Change background color of selected item in listbox

Question

First I search here and on web and I find many and many solution how change background color of selected item in listbox in WPF but not how do it in windows store app. This framework is litte different I cant get to work any solution.

I use this: http://social.msdn.microsoft.com/Forums/windowsapps/en-US/91575930-2058-413a-99de-f3b31c74dfd9/change-itemtemplate-forground-when-listbox-is-focused?forum=winappswithcsharp on the end of page is very good solution but he set item teplate like this: ItemTemplate="{StaticResource DataTemplate1}" but my listbox has datateplate so I dont know how set ItemTemplate style via setter or any different way.

My listbox:

<ListBox x:Name="lbMenu" ItemsSource="{Binding MyDataForLunchGrid}" Tapped="lbMenzaMenu_Tapped" Style="{StaticResource ListBoxStyle1}">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Style" Value="{StaticResource ListBoxItemStyle1}"/>
        </Style>
    </ListBox.ItemContainerStyle >
    <ListBox.ItemTemplate >
        <DataTemplate>
            <Grid>
                <TextBlock Foreground="#FF19536E"  x:Name="tbMenu" Text="{Binding launchItemName}"/>
                <TextBlock x:Name="tbMenuNumber" Text="{Binding launchNumber}"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Now when I press any item in listbox its have dark violet(default) color and its look horible.

McGarnagle McGarnagle · Accepted Answer · 2013-10-11T22:41:50

how to change the background color of selected item in listbox

I think you want to change the definition of your ItemContainerStyle. Try something like this:

<ListBox ItemContainerStyle="{StaticResource ListBoxItemStyle1}" ...

The resource "ListBoxItemStyle1" should contain the control template for ListBoxItem:

<Style TargetType="ListBoxItem" x:Name="ListBoxItemStyle1">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <!-- template here --> 
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The control template in turn defines the "Selected" visual state. From the page you linked, "ListBoxItemStyle1" defines that visual state as follows (yellow background):

<VisualState x:Name="Selected">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

Note that, by default, the ListBoxItem's "selected" state uses as its background the user's current "accent brush", as seen below. This is probably the source of the dark violet color that you see. (You can find all default styles and templates in the Windows Phone SDK folder.)

<VisualState x:Name="Selected">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

You can modify this as needed -- copy-paste a default style, either from the Windows SDK, or from the linked page, and set the background and other properties to whatever you want.

For more background info on control templates and visual states, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

Change background color of selected item in listbox

2 Answers