Listboxitem stop showing highlited on select in Windows phone 8

Question

I am using listbox to show my data in windows phone 8. I have added some logic for enable/disable click of listboxitem. Its working correct now but how I don't know on tap color change for listbox is now stop working can anyone please help me to get out from this. here is my code

<ListBox Name="lstCourses" 
                     ItemsSource="{StaticResource ListOfCourse}"
                     toolkit:TiltEffect.IsTiltEnabled="True"
                     SelectionChanged="lstCourses_SelectionChanged">
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListBoxItem">
                                        <ContentPresenter IsHitTestVisible="{Binding IsEnabled}"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>

                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>

                                <TextBlock TextWrapping="Wrap" 
                                           Grid.Row="0"
                                           FontFamily="Segoe WP SemiLight"
                                           FontSize="25"
                                           Text="{Binding CourseName}"/>

                                <Grid Grid.Row="1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="3*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock TextWrapping="Wrap" 
                                               Grid.Column="0"
                                               FontFamily="Segoe WP SemiLight"
                                               FontSize="20"
                                               Foreground="{StaticResource PhoneSubtleBrush}"
                                               Text="Instructor: "/>
                                    <TextBlock TextWrapping="Wrap" 
                                               Grid.Column="1"
                                               FontFamily="Segoe WP SemiLight"
                                               FontSize="20"
                                               Text="{Binding CourseInstructor, Converter={StaticResource InstructorConvertor}}"
                                               Foreground="{StaticResource PhoneSubtleBrush}"/>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
            </ListBox>

Answer 1

That happens because you override the default ItemContainerStyle which is null and setting a new style for the ListBoxItem without a storyboard for the Selected / Unselected Visual States.

Have a look at the default styles. What you should do will be straightforward after you read the article.

EDIT

Here's an example.

<ListBox 
    Name="lstCourses" 
    ItemsSource="{StaticResource ListOfCourse}"
    toolkit:TiltEffect.IsTiltEnabled="True"
    SelectionChanged="lstCourses_SelectionChanged">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid 
                            IsHitTestVisible="{Binding IsEnabled}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionState">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="textbox1"
                                                Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame 
                                                    KeyTime="0:0:0" Value="{StaticResource PhoneAccentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="textbox2"
                                                Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame 
                                                    KeyTime="0:0:0" Value="{StaticResource PhoneAccentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="textbox3"
                                                Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame 
                                                    KeyTime="0:0:0" Value="{StaticResource PhoneAccentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>


                            <TextBlock 
                                x:Name="textbox1"
                                TextWrapping="Wrap" 
                                Grid.Row="0"
                                FontFamily="Segoe WP SemiLight"
                                FontSize="25"
                                Text="{Binding CourseName}"
                                />
                            <Grid Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="3*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock 
                                    x:Name="textbox2"
                                    TextWrapping="Wrap" 
                                    Grid.Column="0"
                                    FontFamily="Segoe WP SemiLight"
                                    FontSize="20"
                                    Foreground="{StaticResource PhoneSubtleBrush}"
                                    Text="Instructor: "
                                    />
                                <TextBlock 
                                    x:Name="textbox3"
                                    TextWrapping="Wrap" 
                                    Grid.Column="1"
                                    FontFamily="Segoe WP SemiLight"
                                    FontSize="20"
                                    Text="{Binding CourseInstructor, Converter={StaticResource InstructorConvertor}}"
                                    Foreground="{StaticResource PhoneSubtleBrush}"
                                    />
                            </Grid>
                        </Grid>                            
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Answer 2

Also,if you are manipulating through code ,you can set "YourListBox.SelectedItem.Background" property in Selection_changed event handler of ListBox.

If you are using styles then just update Selected / Unselected Visual States accordingly.