AdaptiveTrigger not working on Template10 Shell

Question

I'm building my first app for UWP platform and I decided to start from the hamburger template included in Template10.

What I need to do is something similar to the hamburger menu of the Groove Music app included in Windows 10, so that clicking on a button of the hamburger opens a Flyout to create a new category (like they do for playlists).

Everything works fine and the Flyout just opens without issues, the problem shows up when using the app on mobile: the Flyout contains a text input that makes the virtual keyboard spawn, moving the Flyout outside the screen.

My goal is then to have that Flyout to show on fullscreen when the app is in a narrow visual state, while being shown on the right of the hamburger in the other cases.

Unfortunately it seems that adding the AdaptiveTriggers to the Shell.xaml page doesn't work, as nothing happens.

Here's the relevant XAML code:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="AdaptiveVisualStateGroup">
        <VisualState x:Name="VisualStateNarrow">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <!--  TODO: change properties for narrow view  -->
                <Setter Target="CategoryFlyout.Placement"                            
                        Value="Full"/>
                <Setter Target="MyHamburger.HamburgerBackground"
                        Value="Green"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="VisualStateNormal">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <!--  TODO: change properties for normal view  -->
                <Setter Target="CategoryFlyout.Placement"                            
                        Value="Right"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="VisualStateWide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <!--  TODO: change properties for wide view  -->
                <Setter Target="CategoryFlyout.Placement"                            
                        Value="Right"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Page.Resources>
    <Flyout x:Key="CategoryFlyout"
            x:Name="CategoryFlyout"
            Placement="Right">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Set category name:"
                       HorizontalAlignment="Left"/>
            <TextBox Width="200"
                     Margin="0,5,0,5"       
                     x:Name="CategoryTextBox"
                     utils:ImmediateSourceUpdate.IsEnabled="True"
                     utils:ImmediateSourceUpdate.Text="{x:Bind ViewModel.NewCategoryName, Mode=TwoWay}"/>
            <Button Content="Add"
                    HorizontalAlignment="Right"
                    Command="{x:Bind ViewModel.AddCategoryCommand}"/>
        </StackPanel>
    </Flyout>
</Page.Resources>

As you can see there's a <Setter Target="MyHamburger.HamburgerBackground" Value="Green"/> line used to see if the issue could be related to the Flyout itself, but even this line doesn't work (I'd expect the background fo the hamburger button to be green but it doesn't change from default).

Tempate10's model includes a MainPage.xaml which prints the current visual state so I'm sure that I'm using the correct one to set the Flyout, still I have no results. Nothing happens, not even errors in the debug console.

I also tried inserting the AdaptiveTriggers inside the HamburgerMenu but even this didn't work.

Do you have any ideas on why is this failing?

Answer 1

This is not a Template 10 issue. The Flyout control is not intended to be used on Mobile. Please use ContentDialog or a custom Popup. It's not ideal, I know; but I am not the author of the entire XAML platform, just Template 10. :)

Their reasoning, by the way, has to do with this line of thinking: exactly how should a Flyout look on the Phone?

In all reality, if this is for settings or something, just create a new page.

Best of luck!