Dotted frame on ListBoxItem in WPF

Question

How can I make the default border on my ListBoxItems a dashed border? See the following way to style 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> 

Here I am making AlternationIndex 0, 1 and 2 with a dashed border instead of a solid line. How can I do that?

Answer 1

Try the following:

 <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 below the actual border in the control template. A rectangle can have its own border, dotted or dotted, or w / e (to reduce the dash, just change the part to 2, 1 is not noticeable). Thus, the default value for the border width of the rectangle is 0, but when selected, I set the thickness to 1 so that it is visible. I also added some border properties for my template parent, so it may look like you set it in your style (silver brush, thickness 0,0,0,1).