WPF collection control implements separator (ItemsControl Separator)

This article mainly introduces the WPF collection control to implement the separator ItemsControl Separator in detail. It has a certain reference value. Interested friends can refer to it.

is often needed in WPF collection controls. Insert a separator style between each collection item, but WPF's ItemsControl does not have direct implementation of related functions, so we can only consider curves to save the country. After research, I have probably thought of the following two implementation methods.

First write the data template of ItemsControl, as follows:

##

<ItemsControl ItemsSource="{Binding Source}" BorderThickness="1" BorderBrush="Blue" VerticalAlignment="Stretch">
 <ItemsControl.ItemTemplate>
  <DataTemplate>
   <Grid>
    <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Border Name="Bd" Grid.Row="0" Height="1" Background="Red" />
    <TextBlock Grid.Row="1" Text="{Binding}" />
   </Grid>
  </DataTemplate>
 </ItemsControl.ItemTemplate>
</ItemsControl>

The Border named Bd It is the separator. At this time, the separator can be seen in the header of each item. Now our goal is to hide the separator of the first item. This achieves the purpose of having separators between items.

The firstimplementation method is the simplest, using the collection item to forward bind PreviousData. This is one of the four binding methods, and it is probably the one that is used the least. , but it comes in handy at this time. The code is as follows:

<DataTemplate.Triggers>
 <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}"
     Value="{x:Null}">
  <Setter TargetName="Bd" Property="Visibility" Value="Collapsed" />
 </DataTrigger>
</DataTemplate.Triggers>

When the previous item of a certain item is empty, the separator is hidden. It can be done with a simple line of code. However, one disadvantage of this implementation is that if you use the Insert method to add data to the front of the bound data source, more than one item without a separator will appear. If you add data to the end of the queue or to the middle of the queue, there will be no This problem occurs.

The second implementation method is to use ItemsControl#AlternationCount and AlternationIndex attribute to mark the index number for the collection item, and then hide the separator of the item with index number 0. The code is as follows:

Copy code The code is as follows :

             VerticalAlignment="Stretch" AlternationCount="{Binding Source.Count}">
First bind AlternationCount to the Count property of the data source on

ItemsControl, and then the AlternationIndex property of ItemsControl becomes the index number of the collection data source. , just write the logic in the trigger:

<Border Name="Bd" Grid.Row="0" Height="1" Background="Red">
 <Border.Style>
  <Style TargetType="{x:Type Border}">
   <Style.Triggers>
    <DataTrigger
     Binding="{Binding Path=(ItemsControl.AlternationIndex), 
   RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}"
     Value="0">
     <Setter Property="Visibility" Value="Collapsed" />
    </DataTrigger>
   </Style.Triggers>
  </Style>
 </Border.Style>
</Border>

The trigger determines that when the index number is 0, it will be hidden

Border, the amount of code in this method is not large, and the advantage is that it can definitely realize this function, whether inserting to the beginning or the end of the queue, but AlternationCount and The original meaning of the AlternationIndex attribute is to implement functions such as interlaced color changing. This function is occupied at this time, so if your collection wants to implement both separator and alternate line style functions, you may need to add an additional converter. , but the content of the converter is also very simple. You can restore the previous function by finding the remainder.

The above is the detailed content of WPF collection control implements separator (ItemsControl Separator). For more information, please follow other related articles on the PHP Chinese website!