Question

I am developing a Silverlight application which has a list

<ListBox x:Name="_list_collection"
    SelectionChanged="SelectionChanged"
    ScrollViewer.VerticalScrollBarVisibility="Auto"
    SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
    ItemsSource="{Binding Collection, Mode=TwoWay}"
    ItemTemplate="{StaticResource ScheduleListItemDataTemplate}"
    ItemContainerStyle="{StaticResource ScheduleListItemContainerDataTemplate}" Margin="10" />

The itemsource is bound to this

 public ObservableCollection<ScheduleDto> Collection
 {
     get { return _collection; }
     set
     {
         _collection = value;
         OnPropertyChanged("Collection");
     }
 }

And the selecteditem is bound to

public ScheduleDto SelectedItem
{
    get { return _selectedItem; }
    set
    {
        _selectedItem = value;
        OnPropertyChanged("SelectedItem");
    }
}

The item is being selected because I can see some details about it populate in a separate view. My only problem is that this item is not highlighted (blue background). I have tried it by adding a selectiong changed event handler which looks like this

private void SelectionChanged(object sender, SelectionChangedEventArgs e)
{
   ListBoxItem selectedItem = (ListBoxItem)_list_collection.ItemContainerGenerator.ContainerFromIndex(_list_collection.SelectedIndex);

    VisualStateManager.GoToState(selectedItem, "Selected", true); 
}

But no luck… Any advice?

Edit:

This is the ItemTemplate

<DataTemplate x:Key="ScheduleListItemDataTemplate">
    <Grid VerticalAlignment="Stretch"
          d:DesignHeight="100">
        <Grid.Resources>
            <Converters1:ScheduleStatusConverter x:Key="ScheduleStatusConverter"/>
            <Converters1:DateToStringConverter x:Key="DateToStringConverter"/>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250" />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.ColumnSpan="3"
                    HorizontalAlignment="Stretch"
                   Text="{Binding Name}"         
                    Foreground="{Binding Converter={StaticResource ScheduleStatusConverter}}"
                   FontFamily="{StaticResource LabelTextStyle}"
                   FontSize="19" TextTrimming="WordEllipsis" VerticalAlignment="Center"/>
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition  />
                <RowDefinition />
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=[lblCreatedBy], Source={StaticResource Translations}}" VerticalAlignment="Center"/>
                <TextBlock Text=":" Margin="2,0,2,0" VerticalAlignment="Center"/>
                <TextBlock TextWrapping="Wrap"
                   Text="{Binding CreatedBy}"
                   FontFamily="{StaticResource LabelTextStyle}"
                   FontSize="16"
                   VerticalAlignment="Center"
                   Grid.Column="2"
                   Margin="0"
                   Grid.Row="1"
                   HorizontalAlignment="Right">
                    <TextBlock.Foreground>
                        <SolidColorBrush Color="{StaticResource FactualTextStyle}" />
                    </TextBlock.Foreground>
                </TextBlock>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Grid.Row="1">
                <TextBlock Text="{Binding Path=[lblCoachingViewGridCreatedDate], Source={StaticResource Translations}}" VerticalAlignment="Center"/>
                <TextBlock Text=":" Margin="2,0,2,0" VerticalAlignment="Center"/>
                <TextBlock TextWrapping="Wrap"
                   Text="{Binding CreatedAt,Converter={StaticResource DateToStringConverter}}"
                   FontSize="16"
                   VerticalAlignment="Center"

                   HorizontalAlignment="Right"/>
            </StackPanel>
        </Grid>
        <Grid Grid.Column="2"
                   Margin="0"
                   Grid.Row="1" Visibility="{Binding}">
            <Grid.RowDefinitions>
                <RowDefinition  />
                <RowDefinition />
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=[lblUpdatedBy], Source={StaticResource Translations}}" VerticalAlignment="Center"/>
                <TextBlock Text=":" Margin="2,0,2,0" VerticalAlignment="Center"/>
                <TextBlock TextWrapping="Wrap"
                   Text="{Binding UpdatedBy}"
                   FontFamily="{StaticResource LabelTextStyle}"
                   FontSize="16"
                   VerticalAlignment="Center"
                   Grid.Column="2"
                   Margin="0"
                   Grid.Row="1"
                   HorizontalAlignment="Right">
                    <TextBlock.Foreground>
                        <SolidColorBrush Color="{StaticResource FactualTextStyle}" />
                    </TextBlock.Foreground>
                </TextBlock>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Grid.Row="1">
                <TextBlock Text="{Binding Path=[lblUpdatedDate], Source={StaticResource Translations}}" VerticalAlignment="Center"/>
                <TextBlock Text=":" Margin="2,0,2,0" VerticalAlignment="Center"/>
                <TextBlock TextWrapping="Wrap"
                   Text="{Binding UpdatedAt,Converter={StaticResource DateToStringConverter}}"
                   FontSize="16"
                   VerticalAlignment="Center"

                   HorizontalAlignment="Right"/>
            </StackPanel>
        </Grid>
    </Grid>
</DataTemplate>

Even if I remove the style template the first item isn’t selected :/

Answer 1

I found the answer… Thanks to @Haris Hasan

There is a Visual stete called SelectedUnfocused. Just copied the properties from Selected and everything works fine

<VisualState x:Name="SelectedUnfocused">
   <Storyboard>
      <DoubleAnimation Duration="0"
          To=".75"
          Storyboard.TargetProperty="Opacity"
          Storyboard.TargetName="fillColor2" />
      <ColorAnimation Duration="0"
          To="#FF8DC5F9"
          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
          Storyboard.TargetName="fillColor2"
          d:IsOptimized="True" />
      <ColorAnimation Duration="0"
          To="#FFBCC0C0"
          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
          Storyboard.TargetName="fillColor"
          d:IsOptimized="True" />
       <DoubleAnimation Duration="0"
          To="1"
          Storyboard.TargetProperty="(Rectangle.RadiusX)"
          Storyboard.TargetName="fillColor2"
          d:IsOptimized="True" />
    </Storyboard>
</VisualState>