VisualState is not applied to listbox ItemTemplate

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

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>