WPF 中 ListBoxItem 上的虚线边框 [英] Dotted border on ListBoxItem in WPF
问题描述
如何将 ListBoxItems 上的默认边框设为虚线边框?请参阅以下样式设置方式:
How can I make the default border on my ListBoxItems a dotted border? See following way of styling it:
<Grid.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Height" Value="30" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Setter Property="BorderBrush" Value="Silver" />
<Setter Property="Content" Value="" />
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="3">
<Setter Property="BorderBrush" Value="Black"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
这里我将 AlternationIndex 0、1 和 2 设置为虚线边框而不是实线.这怎么办?
Here I make the AlternationIndex 0, 1 and 2 to a dotted border instead of a solid line. How can this be done?
推荐答案
试试这个:
<Window.Resources>
<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
<!-- SimpleStyles: ListBoxItem -->
<Style TargetType="ListBoxItem" x:Key="ListBoxItemTemplate">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Rectangle x:Name="Rectangle" Fill="Transparent" Stroke="Black"
StrokeDashCap="Square" StrokeThickness="0" SnapsToDevicePixels="True">
<Rectangle.StrokeDashArray>
<sys:Double>5</sys:Double>
</Rectangle.StrokeDashArray>
</Rectangle>
<Border
Name="Border"
Padding="2"
BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness}"
BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrush}">
<ContentPresenter />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Rectangle" Property="StrokeThickness" Value="1" />
<Setter TargetName="Border" Property="BorderThickness" Value="0" />
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Rectangle" Property="Fill" Value="{StaticResource SelectedBackgroundBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource ListBoxItemTemplate}">
<Setter Property="Height" Value="30" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Setter Property="BorderBrush" Value="Silver" />
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="3">
<Setter Property="BorderBrush" Value="Black"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<ListBox>
<ListBoxItem Content="Item 1" />
<ListBoxItem Content="Item 2" />
<ListBoxItem Content="Item 3" />
<ListBoxItem Content="Item 4" />
</ListBox>
</StackPanel>
所以我在控件模板中的实际边框下方放置了一个矩形.矩形的边框可以是虚线、虚线或 w/e(为了使虚线更小,只需将部分更改为 2,1 不明显).因此,矩形边框厚度的默认值为0,但选择时,我将厚度设置为1,因此它是可见的.我还制作了一些边框属性以绑定到其模板化父级,因此它看起来就像您在样式中设置的一样(刷银色,厚度 0,0,0,1).
So I put a rectangle bellow the actual border in the control template. The rectangle can have its border be dotted, or dashed or w/e (to make the dash smaller just change the part to 2, 1 is not noticeable). So the default value of the rectangle's border thickness is 0, but when selected I set the thickness to 1 so it's visible. I made some border properties to be binded to its templated parent too, so it can look like what you set on your style (brush silver, thickness 0,0,0,1).
这篇关于WPF 中 ListBoxItem 上的虚线边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!