Dotted border on ListBoxItem in WPF

Question

Hi

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>

Here I make the AlternationIndex 0, 1 and 2 to a dotted border instead of a solid line. How can this be done?

Answer 1

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