VisualState is not applied to listbox ItemTemplate - xaml

Question

I want to use the VisualStateManager to change the appearance of my listbox items. I created a simplified example. When the listbox or listbox items got only space for width = 500 it should set for example the background to Beige otherwise to Green.
I tried the following and some other variations but neither of them worked. Has anyone a idea how to fix this?
<ListBox Grid.Column="0">
<ListBoxItem>asdfasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>asdsf</ListBoxItem>
<ListBoxItem>aasf</ListBoxItem>
<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="visualStateGroup" >
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="a" />
<Setter Target="border.Background" Value="Beige" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="b" />
<Setter Target="border.Background" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl.Content>
<Border x:Name="border" >
<TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />
</Border>
</ContentControl.Content>
</ContentControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I tried to adopt:
https://stackoverflow.com/a/32092547/740651

Answer 1

The easiest way I find to do this is to create a UserControl of your DataTemplate code. So something like this
<UserControl x:class="MyListBoxControl">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="visualStateGroup" >
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="a" />
<Setter Target="border.Background" Value="Beige" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="b" />
<Setter Target="border.Background" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" >
<TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />
</Border>
</Grid>
</UserControl>
and then add to your ListBox ItemTemplate. The Visual States will then work accordingly. Note you will need to create a reference to where your UserControls are stored at the top of your page something like xmlns:myUserControls="[location of your controls]"
<ListBox Grid.Column="0">
<ListBoxItem>asdfasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>asdsf</ListBoxItem>
<ListBoxItem>aasf</ListBoxItem>
<ListBox.ItemTemplate>
<DataTemplate>
<myUserControls:MyListBoxControl />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Answer 2

Usually we don’t manipulate the ListBox's item directly, the common way is adding the items to the ObservableCollection and set ItemSource property of ListBox to bind to the ObservableCollection.
If you use the ItemSource, you can use the UserControl like #SWilko said. But it does not need to use the RelativeSource.
For example, I create a Person class, and it has a property Name. I use <TextBlock x:Name="PathTextBlock" Text="{Binding name}" /> replace <TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />.
If you want to add the ListBox’s item directly, and use the VisualStateManager to change the appearance of the ListBox items. You can edit the ItemContainerStyle.
To modify the template of ListBoxItem, we can select the ListBox in "Document Outline" and right click, then select "Edit Additional Templates"→ "Edit Generated Item Container (ItemContainerStyle)" → "Edit a Copy...".
You can create a VisualStateGroup into the <VisualStateManager.VisualStateGroups>.
For example:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
...
</VisualStateGroup>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="a" />
<Setter Target="border.Background" Value="Beige" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="b" />
<Setter Target="border.Background" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And you can edit the ContentPresenterlike:
<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border Name="border">
<TextBlock Name="PathTextBlock" Text="{TemplateBinding Content}"></TextBlock>
</Border>
</ContentPresenter>
By the way, you set the MinWindowWidth property to 500 of AdaptiveTrigger, the effect will not obvious. You can set it to 600.