Change the ListBox Item Border Color

Question

I have list box with style added to it.

Here is my code:

<!-- Style for list item selector -->
        <Style x:Key="ListItemSelectorStyle" TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property ="Foreground" Value="Black" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="ListBoxItem" Background="{TemplateBinding Background}" 
                                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                                    VerticalAlignment="{TemplateBinding VerticalAlignment}" 
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ListItemBorder" BorderBrush="Transparent" Background="#e3e8f0">
                                <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <TextBlock
                                           Name="textBlock"
                                           Text="{Binding Path=answerText}" 
                                           HorizontalAlignment="Stretch"
                                           Padding="10,25,10,25"
                                           MinHeight="80"
                                           VerticalAlignment="Center"
                                           TextAlignment="Center"
                                           Style="{StaticResource TextStyle}"
                                           Foreground="Black"/>
                                    <Image Name="ImageBlock"
                                           Grid.Row="0"
                                           Width="Auto"
                                           Height="Auto"
                                           Stretch="UniformToFill"
                                           Source="{Binding answerImage}"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Margin="1,1,1,1"/>
                                </Grid>
                            </Border>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

My List box :

<ListBox Name="listBox" 
                                 HorizontalAlignment="Stretch"
                                 ItemContainerStyle="{StaticResource ListItemSelectorStyle}"
                                 HorizontalContentAlignment="Stretch" 
                                 VerticalContentAlignment="Stretch" 
                                 SelectionChanged="ListBoxClicked"
                                 ScrollViewer.VerticalScrollBarVisibility="Disabled">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
 </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

Here i have added two colors one for default item color "#e3e8f0" and one is Selected item and MouseOver color "#c9ebf2" in my style Now I have a button and its click event in my .CS file Now when i click on that the Selected item and MouseOver color "#c9ebf2" should be changed to Green color,

How to acheive this ?

stackamar stackamar · Accepted Answer · 2014-02-15T09:46:55

You have given #c9ebf2 color for both mouseover and selected state in your style. Change your color for selected state.

Change the ListBox Item Border Color

1 Answers