Question

I want to set a style for a list box item in which we can provide alternate row colors along with border color changed on mouse hover and IsSelected property. Please give me some example where I can refer from.

Answer 1

This is an example taken from Codeplex project for WPF Themes (BureauBlue Theme)

You can modify the theme as you want

List Box Item Theme

<Style   TargetType="{x:Type ListBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Padding" Value="3" />
    <Setter Property="Foreground" Value="{StaticResource OutsideFontColor}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="HoverOn">
                        <DoubleAnimation Duration="00:00:00.1000000"
                                         Storyboard.TargetName="BackgroundGradientOver"
                                         Storyboard.TargetProperty="Opacity"
                                         To="0.73" />
                    </Storyboard>
                    <Storyboard x:Key="HoverOff">
                        <DoubleAnimation Duration="00:00:00.4000000"
                                         Storyboard.TargetName="BackgroundGradientOver"
                                         Storyboard.TargetProperty="Opacity"
                                         To="0" />
                    </Storyboard>
                    <Storyboard x:Key="SelectedOn">
                        <DoubleAnimation Duration="00:00:00.1000000"
                                         Storyboard.TargetName="BackgroundGradientSelected"
                                         Storyboard.TargetProperty="Opacity"
                                         To="0.84" />
                        <DoubleAnimation Duration="00:00:00.1000000"
                                         Storyboard.TargetName="BackgroundGradientSelectedDisabled"
                                         Storyboard.TargetProperty="Opacity"
                                         To="0.55" />
                    </Storyboard>
                    <Storyboard x:Key="SelectedOff">
                        <DoubleAnimation Duration="00:00:00.4000000"
                                         Storyboard.TargetName="BackgroundGradientSelected"
                                         Storyboard.TargetProperty="Opacity"
                                         To="0" />
                        <DoubleAnimation Duration="00:00:00.4000000"
                                         Storyboard.TargetName="BackgroundGradientSelectedDisabled"
                                         Storyboard.TargetProperty="Opacity"
                                         To="0" />
                    </Storyboard>
                </ControlTemplate.Resources>
                <Grid SnapsToDevicePixels="true">
                    <Rectangle x:Name="BackgroundGradientOver"
                               Fill="{DynamicResource MouseOverBrush}"
                               Opacity="0"
                               RadiusX="1"
                               RadiusY="1"
                               Stroke="{DynamicResource MouseOverBorderBrush}" />
                    <Rectangle x:Name="BackgroundGradientSelectedDisabled"
                               Fill="{DynamicResource ListItemSelectedBrush}"
                               Opacity="0"
                               RadiusX="1"
                               RadiusY="1"
                               Stroke="{DynamicResource ListItemSelectedBorderBrush}" />
                    <Rectangle x:Name="BackgroundGradientSelected"
                               Fill="{DynamicResource PressedBrush}"
                               Opacity="0"
                               RadiusX="1"
                               RadiusY="1"
                               Stroke="{DynamicResource PressedBorderBrush}"
                               StrokeThickness="1" />
                    <ContentPresenter x:Name="contentPresenter"
                                      Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}" />
                </Grid>
                <ControlTemplate.Triggers>

                    <Trigger Property="IsSelected" Value="true">
                        <Trigger.ExitActions>
                            <BeginStoryboard x:Name="SelectedOff_BeginStoryboard"
                                             Storyboard="{StaticResource SelectedOff}" />
                        </Trigger.ExitActions>
                        <Trigger.EnterActions>
                            <BeginStoryboard x:Name="SelectedOn_BeginStoryboard"
                                             Storyboard="{StaticResource SelectedOn}" />
                        </Trigger.EnterActions>

                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.ExitActions>
                            <BeginStoryboard x:Name="HoverOff_BeginStoryboard"
                                             Storyboard="{StaticResource HoverOff}" />
                        </Trigger.ExitActions>
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource HoverOn}" />
                        </Trigger.EnterActions>
                    </Trigger>

                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
        <Style.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Background" Value="#19f39611"></Setter>
            </Trigger>
            <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                <Setter Property="Background" Value="#19000000"></Setter>
            </Trigger>
        </Style.Triggers>        
</Style>

In List Box

<ListBox AlternationCount="2">
</ListBox>