Adaptive trigger doesn't work in a user control

Question

I'm working on a UWP app. I'm already using adaptive triggers to adapt my xaml depending on the width of the window, and it works.. only in a Page.

Now I want to do the same for the xaml of a User Control, and it's not working .. Yet I put the VisualStateManager to root grid of the user control.

Is there a difference ?

Here's the code of my user control :

<UserControl
    x:Class=.....>

<UserControl.Resources>
    <ResourceDictionary>
        <vm:ViewModelLocator x:Key="Locator"/>
        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    </ResourceDictionary>
</UserControl.Resources>

<UserControl.DataContext>
    <Binding Path="MyUserControlVM" Source="{StaticResource Locator}"/>
</UserControl.DataContext>


<Grid x:Name="LayoutRoot" Background="white">

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Narrow">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="LastName.Foreground" Value="Red" />
                    <Setter Target="LastName.Fontsize" Value="10" />
                    <Setter Target="FirstName.Foreground" Value="Red"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Normal">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="LastName.Foreground" Value="Red" />
                    <Setter Target="LastName.Fontsize" Value="25" />
                    <Setter Target="FirstName.Foreground" Value="Red"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Wide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1000"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="LastName.Foreground" Value="Red" />
                    <Setter Target="FirstName.Foreground" Value="Red"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Listbox>
        ...
    </ListBox>
    <TextBlock x:Name="lblNoData" Grid.ColumnSpan="2" Text="No Data"  Visibility="{Binding NoDataVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/>
    <ProgressRing x:Name="prLoading" Width="60" Height="60" Foreground="Blue" IsActive="{Binding InitializationNotifier.IsNotCompleted}" />
</Grid>

("LastName" and "FirstName" are textblocks in the DataTemplate of my listbox. I'm just trying to put my text in red in order to see when the triggers work)

And I call the user control in a simple page like this :

<Grid x:Name="LayoutRoot" Background="{StaticResource white}">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Margin="0,0,0,10">
        ...
    </StackPanel>

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0">
        <UC:MyUserControl/>
    </Grid>
</Grid>

I don't understand why this code won't work. Thank you in advance for your help !

Answer 1

("LastName" and "FirstName" are textblocks in the DataTemplate of my listbox. I'm just trying to put my text in red in order to see when the triggers work)

You can refer to my another answer here, as I said in that answer, when the controls are placed in the DataTemplate, they becomes the visual structure of your data objects. I think there is no clean way to do this work only in the xaml code, Data Binding here is your friend.

From your code I can see that you want to change the Foreground (but all to Red?) and the FontSize of the TextBlocks inside of the DataTemplate depending on the window's size. So you can bind these two proprieties to the window's size, or you can use ItemsControl.ItemTemplateSelector to select different template when the window's size is changed.