Reputation: 1911
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 :/
Upvotes: 1
Views: 3451
Reputation: 1911
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>
Upvotes: 2