WPF中ListBoxItem的虚线边框

Question

如何将ListBoxItems的默认边框设置为点状边框？请参考以下样式方式：

<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的线条改为点状边框。如何实现此功能？

- Claus Jørgensen

---

另外，请参见我的答案：https://dev59.com/8m025IYBdhLWcg3wIyOf#17431518 我们能够使用这种技术来使用实际的边框，避免使用矩形。 - Rand Scullard

Answer 1

试试这个：

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

我在控件模板中添加了一个矩形框，放在实际边框的下方。该矩形框的边框可以是点状、虚线或其他（如果要缩小虚线间距，只需将"StrokeDashArray"的一部分改为2，1不明显）。因此，矩形的默认边框厚度为0，但当选中时，我将其厚度设置为1，以便它可见。我还使一些边框属性绑定到模板的父级，这样它就可以像您在样式上设置的那样看起来（刷银色，厚度为0,0,0,1）。

- Carlo