Question

我有一个ListView，我在其中创建了自己的itemtemplate。 itemtemplate看起来就像一个带有彩色边框的正方形，里面会显示非常简单的文字。我想要完成的是在每个项目（listviewitem）之间放置一条垂直线，让它看起来是垂直“链接”的。现在我做了一个stackpanel但问题是如果你选择项目它也选择了行。我想让它看起来好像该行不是listboxitem的一部分。我有什么想法可以设计这个？对我来说，帆布似乎是订购但我没有任何运气。

<ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel Margin="2">
            <Line StrokeThickness="3" X1="0" Y1="0" Y2="20" Stroke="Black" HorizontalAlignment="Center" >
                <Line.Style>
                    <Style TargetType="{x:Type Line}">
                        <Setter Property="Stroke" Value="Black" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsFirstRow}" Value="True">
                                <Setter Property="Visibility" Value="Collapsed" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Line.Style>
            </Line>

            <Border x:Name="UnitBorder" Style="{StaticResource UnitBorderStyle}">
                <TextBlock Text="{Binding UnitLandNumber}" HorizontalAlignment="Center" />
            </Border>

            <Line StrokeThickness="3" X1="0" Y1="0" Y2="20" Stroke="Black" HorizontalAlignment="Center" />

        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>

Answer 1

ItemTemplate可以帮助您更改ContentPresenter布局。选中后，整个ContentPresenter始终会突出显示。因此很难用它实现你想要的。要解决此问题，我们可以使用在ControlTemplate上应用的自定义ListViewItem。这是一个这样做的例子：

<ListView.ItemContainerStyle>
  <Style TargetType="ListViewItem">
     <Setter Property="Template"> 
       <Setter.Value>
         <ControlTemplate TargetType="ListViewItem">
           <Grid>
             <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition/>
               <RowDefinition Height="Auto"/>
             </Grid.RowDefinitions>
             <Line StrokeThickness="3" X1="0" Y1="0" Y2="20" Stroke="Black" 
                   HorizontalAlignment="Left" Margin="15,1,0,0">
                   <Line.Style>
                     <Style TargetType="{x:Type Line}">
                       <Setter Property="Stroke" Value="Black" />
                       <Style.Triggers>
                         <DataTrigger Binding="{Binding IsFirstRow}" Value="True">
                            <Setter Property="Visibility" Value="Collapsed" />
                         </DataTrigger>
                       </Style.Triggers>
                     </Style>
                   </Line.Style>
             </Line>
             <Border Name="c"  Grid.Row="1">                                          
               <ContentPresenter/>
             </Border>
             <Line StrokeThickness="3" X1="0" Y1="0" Y2="20" Stroke="Black" 
                   HorizontalAlignment="Left" Grid.Row="2"  Margin="15,0,0,1"/>
           </Grid>
         <ControlTemplate.Triggers>
            <Trigger Property="IsSelected" Value="True">
               <Setter TargetName="c" Property="Background" 
                       Value="{x:Static SystemColors.HighlightBrush}"/>
               <Setter TargetName="c" Property="TextElement.Foreground" 
                       Value="{x:Static SystemColors.HighlightTextBrush}"/>
            </Trigger>
         </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
     </Setter>
   </Style>
 </ListView.ItemContainerStyle>

我们将ListViewItem分为3行。第二行（中间行）当然是ContentPresenter，在选中时将突出显示。第1行和第3行是连接Line的位置。这个ListView将失去一些相当肤色的默认外观。但是，您可以尝试更多地进行自定义（甚至比默认设置更好）。

添加垂直线（＆＃34;链接＆＃34;）在ListView中的两个项目之间

1 个答案: