如何在ListView中更改用作ItemTemplate的UserControl的VisualState

Question

I've a UserControl with some VisualStates defined:

<UserControl>
  <Grid Height="50" HorizontalAlignment="Stretch">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SelectionStates">
            <VisualState x:Name="Unselected"/>
            <VisualState x:Name="Selected">
            <!-- more code -->

and I use it as an ItemTemplate of my ListView . When item from ListView is selected, I also want to change the VisualState of the DataTemplate . For now I've such a method:

private void list_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
  ListView listView = sender as ListView;
  foreach (var item in e.AddedItems)
    VisualStateManager.GoToState((listView.ContainerFromItem(item) as ListViewItem).ContentTemplateRoot as myControl, "Selected", false);
 }

It seems to work, but in some cases (listView.ContainerFromItem(item) as ListViewItem is null and therefore exception is thrown.

Is there any other/better way to change the VisualState of used DataTemplate ?

Answer 1

The reason that the item container (ie ListViewItem ) is null is because the ListView 's default panel ItemsStackPanel is a pixel-based UI virtualization panel which only renders items when they are in or close to the current viewport .

Since you set up the selected items in code, those items might not be rendered, their containers will return as null .

One simple fix would be to replace the ItemsStackPanel with a normal StackPanel , however doing this will break the built-in virtualization.

Here's another solution without modifying the panel.

First your existing code is still needed, you just need to do a null check, if the item container is null, simply do nothing.

Then, you need to subscribe to the ListView 's ContainerContentChanging event. This fires when the item container gets loaded. So basically, you check if the item that's loaded here is one of the selected items. If it is, then change its visual state. Something like this -

private void MyListView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    if (this.MyListView.SelectedItems.Contains(args.Item))
    {
        // get the container
        var container = (ListViewItem)args.ItemContainer; 

        // do your visual state change here, when the container was previously null
    }
}