Dotted border on ListBoxItem in WPF Dotted border on ListBoxItem in WPF wpf wpf

Dotted border on ListBoxItem in WPF


Try this:

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

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