.NET MAUI Adaptive triggers not firing

Question

I have a style setup in a new file that is being merged in App.xaml. In the view, Intellisense shows me the x:Key of the style I want to use but adaptive triggers do not fire. I tested it with a style that only contains a setter for changing the background color. This works fine. Just not the adaptive trigger.

I'm attempting to apply this style to the parent container(Grid) of all elements (Child of the <ContentPage>) but the problem persists even if using this style on inner controls. I tried changing the TargetType as well but even on other control types it does not work.

I even tried placing the style inside of the control and same view page but it's not working like that either. I don't know what I'm doing wrong.

Because this app will have many pages, I'd prefer to be able to use a separate file to contain the styles for a central place to make changes in the future.

Tested on Windows and also multiple Android Emulators.

Current values are for testing. Style:

    <Style x:Key="MainGridStyle"
       TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Small">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="WidthRequest" Value="200"/>
                    </VisualState.Setters>

                </VisualState>
                <VisualState x:Name="Medium">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="WidthRequest" Value="500"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>

    </Setter>

</Style>

App.xaml

    <Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            <ResourceDictionary Source="Resources/Styles/CustomStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Control opening tag (I tried StaticResource too with the same result):

    <Grid
    Style="{DynamicResource MainGridStyle}">

EDIT:

I've narrowed down the problem to being with .Net 6. I tested the same code on .Net 7 and it works well there. Any idea how to fix this issue that I'm only experiencing with .Net 6?

Answer 1

This is related to the size of the MinWindowWidth value you set.

To get value of Grid.Window.Width:

<Grid Style="{DynamicResource MainGridStyle}
      "BackgroundColor="Gold" 
      x:Name="grid">

Console.WriteLine(grid.Window.Width);

grid.Window.Width: 375.6521739130435

Then in CustomStyles.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
                    
    <Style x:Key="MainGridStyle" TargetType="Grid">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup>
                    <VisualState x:Name="Small">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="WidthRequest" Value="200"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Medium">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="376"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="WidthRequest" Value="450"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ResourceDictionary>

Since 0 < grid.Window.Width < 376, WidthRequest of Gird will be 200.

If:

             <VisualStateGroupList>
                <VisualStateGroup>
                    <VisualState x:Name="Small">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0"/>
                        </VisualState.StateTriggers>
                        ...
                    </VisualState>
                    <VisualState x:Name="Medium">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="375"/>
                        </VisualState.StateTriggers>
                        ...
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>

375 < grid.Window.Width, so WidthRequest of Gird will be 450.

Answer 2

After a lot more testing, I was able to narrow down the problem to being related to .Net 6. I upgraded to .Net 7 and, using the same code, it works well.