How to add List item Selector to ListBox

Question

I am currently working on Windows Phone 8 Application, i have a ListBox with TextBlock with border as a background to it, when i click on the item in the list box there is no indication to the user that he as selected that item, how to add selected item color to it?

And also i need to select multiple items in the ListBox, Which ever the item is selected its background color should be changed.

Below is my code:

<Grid x:Name="ListBoxLayout" Grid.Row="2" Margin="4,0,0,0">
    <ListBox Name="listBox" 
             HorizontalContentAlignment="Stretch" 
             VerticalContentAlignment="Stretch" 
             SelectionChanged="TopicListboxSelectionChanged"
             ScrollViewer.VerticalScrollBarVisibility="Disabled">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Name="AnswerCellBack" Tap="AnswerCellBack_Tap" Margin="0,0,0,4" Orientation="Horizontal">
                    <Border Name="borderColor" Background="#FFF2F4F7">
                        <TextBlock Name="text"
                               Width="456"
                               Padding="10,20,10,20"
                               TextAlignment="Center"
                               Text="{Binding Path=Value}"
                               Style="{StaticResource AnswerTextStyle}"/>
                    </Border>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>              
</Grid>

so for changing the background color, you have two main option - create custom style for your longlistmultiselector or you can create simple converter — Swift Sharp

stackamar stackamar · Accepted Answer · 2014-02-13T07:59:20

You need to use SelectionMode property to enable multiple selection in listbox. Or you can use LongListMultiSelector from Windows Phone toolkit.

To change the background color of selected item, change the style template of listbox as mentioned here, http://msdn.microsoft.com/en-us/library/cc278062%28v=vs.95%29.aspx.

Find this line in the ListBoxItem Style, and change it to your color

<Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>

You can declare styles in App.xaml under the Application.Resources tag.

Or like these 2 ways in your page.

First Way.

<ListBox Name="lstbx">
<ListBox.Style>
    // Your Style
</ListBox.Style>
</ListBox>

Second way.

Declare the styles under the tag phone:PhoneApplicationPage.Resources, like this.

<phone:PhoneApplicationPage
x:Class="Test.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="False">

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="MyListStyle"  TargetType="ListBoxItem">
        //your style
    </Style>
</phone:PhoneApplicationPage.Resources>

<ListBox Name="list1" Style="{StaticResource MyListStyle}"
//....

How to add List item Selector to ListBox

1 Answers