세로줄 추가 ("링크") ListView의 두 항목 사이에

Question

나는 내 자신의 itemtemplate을 만든 ListView를 가지고 있습니다. itemtemplate은 단순히 색상 테두리가있는 사각형처럼 보이고 내부는 매우 간단한 텍스트를 표시합니다. 내가 성취하고자하는 것은 각 항목 (listviewitem) 사이에 수직선을 배치하여 수직으로 "링크"된 모양을주는 것입니다. 지금은 스택 패널을 만들었지 만 항목을 선택하면 선을 선택하는 문제가 있습니다. 줄이 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은 선택시 항상 강조 표시됩니다. 따라서 원하는 것을 성취하는 것은 어렵습니다. 이를 해결하기 위해 대신 ListViewItem에 맞춤 ControlTemplate을 적용 할 수 있습니다. 다음은 이에 대한 예입니다.

<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> 

을 3 행으로 나눕니다. 2 행 (중간 행)은 당연히 ContentPresenter이며 선택하면 강조 표시됩니다. 1 행과 3 행은 연결 Line에 대한 장소입니다. 이 ListView은 상당히 껍질이 벗겨진 기본 모양과 느낌을 잃게됩니다. 그러나 더 많이 사용자 정의 해 볼 수 있습니다 (기본값보다 좋음).