UWP - Button flyout is somehow height locked

Question

I can't figure this bug out, so I stripped it to the simplest version where it still happens.

This is my XAML code:

<Grid>
    <Button x:Name="button1" Content="Button" VerticalAlignment="Top">
        <Button.Flyout>
            <Flyout Placement="Right">
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="Margin" Value="0"/>
                        <Setter Property="BorderThickness" Value="0"/>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <Grid Name="PopupGrid" Background="Aqua"/>
            </Flyout>
        </Button.Flyout>
    </Button>
</Grid>

And then I have one event for that page:

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    PopupGrid.Height = Window.Current.Bounds.Height;
}

So the expected behavior for that code is as follows: Upon pressing the button, a popup opens, which is vertically stretched across the window. And this works flawlessly, until I make my window too tall. Here's a GIF of what I'm describing.

As you can see, the popup clearly thinks that it should be the height of the window, but for some reason it just stops expanding at some point, and adds a scrollbar.

Am I just not seeing something here? Or do these Flyouts have some arbitrary maximum height that I've never heard of?

score 3 · Accepted Answer · answered Dec 27 '16 at 05:57

Flyout does have a max height limitation. In FlyoutPresenter styles and templates, you can find FlyoutPresenter has a MaxHeight property set to FlyoutThemeMaxHeight:

<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}"/>
<Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}"/>
<Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}"/>

And FlyoutThemeMaxHeight is a theme resource represents 758:

<x:Double x:Key="FlyoutThemeMaxHeight">758</x:Double>

You can try to reset FlyoutPresenter's MaxHeight to PositiveInfinity (which can be set in XAML as simply "Infinity") like following then the grid should be able to vertically stretched across the window.

<Button x:Name="button1" VerticalAlignment="Top" Content="Button">
    <Button.Flyout>
        <Flyout Placement="Right">
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="Margin" Value="0" />
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="MaxHeight" Value="Infinity" />
                </Style>
            </Flyout.FlyoutPresenterStyle>
            <Grid Name="PopupGrid" Background="Aqua" />
        </Flyout>
    </Button.Flyout>
</Button>

UWP - Button flyout is somehow height locked

1 Answers1