The WPF set control implements the delimiter (ItemsControl Separator) and wpfitemscontrol

The WPF set control implements the delimiter (ItemsControl Separator) and wpfitemscontrol

In the collection control of WPF, you often need to insert a separator style between each set item. However, the ItemsControl of WPF does not directly implement related functions. Therefore, you can only consider saving the country by curve. After research, we probably thought of the following two methods.

Write firstItemsControlAs 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 is the separator. At this time, the separator can be seen in the header of each item. Our goal is to hide the separator of the first item, this achieves the goal of separator between items.

FirstThe most simple implementation method is to bind PreviousData to a set item. This is one of the four binding methods, and it is estimated that it is also the least commonly used method, but it will be useful 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 is empty, the Delimiter is hidden and a simple line of code is done. However, this implementation method has the disadvantage that if the Insert method is used to add data to the very beginning of the bound data source, there will be more than one item without a separator, this problem does not occur if you want to add it to the end of the team or to the team.

SecondThe implementation method is based onItemsControlOfAlternationCountAndAlternationIndexProperty to mark the index number for the set item, and then hide the separator of the item whose index number is 0. The Code is as follows:

Copy codeThe Code is as follows: <ItemsControl ItemsSource = "{Binding Source}" BorderThickness = "1" BorderBrush = "Blue"
VerticalAlignment = "Stretch" AlternationCount = "{Binding Source. Count}">

FirstItemsControlBind AlternationCount to the Count attribute of the data source. Then, the AlternationIndex attribute of ItemsControl becomes the index number of the data source of the set. 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 the index is hidden when the index is 0.BorderThis method has a small amount of code. The advantage is that this function can be absolutely implemented, no matter whether it is inserted to the first or the end of the team,AlternationCountAndAlternationIndexThe attribute originally meant to implement functions such as the barrier color. At this time, this function is occupied. Therefore, if your set needs to implement both the separator and the barrier style functions, you may need to add an extra converter, however, the converter content is also very simple. You can find a remainder to restore the previous functions.

For code on this small feature, see: https://github.com/fengrui358/WPFLabs/tree/master/WpfItemsControlSplitter

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.