这是一个更好的例子,因为顶部没有分隔符
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<StackPanel>
<Separator x:Name="Separator"/>
<ContentPresenter/>
</StackPanel>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
这建立在 @EvaLacy 给出的答案的基础上,更加完整一些。
因为该答案替换了
ListBoxItem
的模板,所以它禁用了选择列表项时发生的内置突出显示(因为突出显示是通过原始模板中的触发器完成的)。要恢复此功能,请将默认触发器放入新模板中并稍微调整模板内容:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<StackPanel>
<Separator x:Name="Separator"/>
<!-- Bind to parent properties -->
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
Name="Bd"
SnapsToDevicePixels="True">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
</StackPanel>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
</DataTrigger>
</ControlTemplate.Triggers>
<!-- Original Triggers -->
<Trigger Property="Selector.IsSelected" Value="True">
<Setter TargetName="Bd" Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected" Value="True" />
<Condition Property="Selector.IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
我使用旧的但有用的向我展示模板应用程序检索了这些触发器。
我的解决方案:
<Style x:Key="STYLE_ListBoxSubItem" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<DockPanel LastChildFill="True">
<Separator x:Name="Separator" DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="2"/>
<Border x:Name="Border" SnapsToDevicePixels="true">
<ContentPresenter VerticalAlignment="Center" />
</Border>
</DockPanel>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
</DataTrigger>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Orange"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightGray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Usage -->
<ListBox ItemContainerStyle="{StaticResource STYLE_ListBoxSubItem}"/>
您可以将分隔符的呈现移动到
ListBoxItem
控制模板中,如这个有意简化的示例所示:
<Grid>
<Grid.Resources>
<PointCollection x:Key="sampleData">
<Point>10,20</Point>
<Point>30,40</Point>
<Point>50,60</Point>
</PointCollection>
</Grid.Resources>
<ListBox ItemsSource="{StaticResource sampleData}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<StackPanel>
<Separator/>
<ContentPresenter/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
这将使分隔符远离您的项目模板。代价是您可能需要从默认的
ListViewItem
控件模板复制更多内容才能满足您的需求。当然,Separator
是可视化渲染分隔符的十几种方法之一。
我们现在已经到达 Avalonia 11,您不再需要覆盖默认模板(默认模板可能会随时更改,然后您的覆盖可能会中断)。您现在可以设置默认模板的某些元素的样式。
<ListBox ItemsSource="{Binding Documents}">
<ListBox.Styles>
<Style Selector="ListBoxItem">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Style Selector="^:nth-child(1)">
<Setter Property="BorderThickness" Value="0,1,0,1" />
</Style>
</Style>
</ListBox.Styles>
这为每个
ListBoxItem
提供了 1 的下边框,除了第一个也有上边框。