Adaptive triggers are not triggering when the min width condition satifies - WinAppSDK; WinUI 3;

Question

I am showing a left navigation pane in my page and all of my pages needs to have a header. I am using a Grid with two rows to show the header and the content. Whenever the window is small I want to add some margin to the header. For this I am using visual state triggers. But it is not adding margin to the header . Here is my code for the page.

<?xml version="1.0" encoding="utf-8" ?>
<Page x:Class="learning.Pages.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:learning"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <NavigationView x:Name="MainNavView"
                    IsSettingsVisible="True"
                    OpenPaneLength="200">
        <!-- Nav Items  -->
        <NavigationView.MenuItems>
            <NavigationViewItem Content="Home"
                                Icon="Home"
                                Tag="HomePage" />
            <NavigationViewItem Content="History" Tag="HistoryPage">
                <NavigationViewItem.Icon>
                    <FontIcon Glyph="&#xE81C;" />
                </NavigationViewItem.Icon>
            </NavigationViewItem>
            <NavigationViewItem Content="Downloads"
                                Icon="Download"
                                Tag="DownloadPage" />
        </NavigationView.MenuItems>

        <Grid x:Name="MainGrid"
              ColumnSpacing="12"
              RowSpacing="6">
            <Grid.RowDefinitions>
                <RowDefinition Height="38" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <TextBlock x:Name="HeaderTitle"
                       Grid.Column="0"
                       Style="{StaticResource TitleTextBlockStyle}"
                       Text="Home" />
            <AutoSuggestBox x:Name="HeaderSearchBox"
                            Grid.Column="2"
                            PlaceholderText="Search"
                            QueryIcon="Find"
                            HorizontalAlignment="Stretch"
                            MinWidth="250" />

            <Frame x:Name="ContentFrame"
                   Grid.Row="1"
                   Grid.ColumnSpan="3" />
        </Grid>
    </NavigationView>
    
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="100" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainGrid.Margin" Value="36,24,8,0" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="641" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainGrid.Margin" Value="8, 16, 8, 0" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Page>

In MainWindow.xaml.cs file I am just using this page.

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

        Content = new MainPage();
    }
}

I tried moving the visual state manager inside the MainGrid and changed the Setter Target Property from MainGrid.Margin to Margin, instead of adjusting the margin tried changing the background to debug, But nothing seems to work.

Any help would be appreciated. Thanks

Answer 1

VisualStateManager only applies to classes that derive from Control.

Please put your <VisualStateManager.VisualStateGroups> into <NavigationView></NavigationView>

 ...
        <Frame x:Name="ContentFrame"
               Grid.Row="1"
               Grid.ColumnSpan="3" />
    </Grid>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="100" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainGrid.Margin" Value="36,24,8,0" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="641" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainGrid.Margin" Value="8, 16, 8, 0" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</NavigationView>