UWP/WinUI 2 - How to increase the maximum size of a Flyout

The Flyout is a useful class in UWP/WinUI 2 that allows you to display content in a popup. The Flyout class contains various useful built in behaviour such as showing and hiding animations and functionality to for dismissing the popup when it looses focus. One of the built in behaviours of the Flyout, is that it contains a ScrollViewer and a maximum size. This means that, if the content inside the Flyout becomes too large for the Flyout, the content will become scrollable. In some situations, this behaviour can be helpful, however, in other situations, you may want the flyout to simply size itself to fit its content rather than cutting content off and forcing the user to scroll to see the cut off content. Luckily, there's an easy way to do this by modifying a Flyout's FlyoutPresenterStyle.

How to change the maximum size of a Flyout

To change the maximum size of a Flyout, simply modify its FlyoutPresenterStyle like so (You can of course replace MaxHeight and/or MaxWidth with a different value if desired):
Note: If you're not using WinUI, you can omit the BasedOn property. The BasedOn property is set here to ensure that the Flyout uses the WinUI styles, otherwise it will default to the default UWP one (And the default UWP styles have not been modified much at all since Windows 10 1903).

<Flyout.FlyoutPresenterStyle>

                <Style TargetType="FlyoutPresenter" BasedOn="{StaticResource DefaultFlyoutPresenterStyle}">

                    <Setter Property="MaxHeight" Value="Infinity"/>

                    <Setter Property="MaxWidth" Value="Infinity"/>

                    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>

                  <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>

                </Style>

</Flyout.FlyoutPresenterStyle>


By applying the above style to a Flyout, the Flyout will grow to fit the size of its content.
Tip: If you find that a Flyout's size and position will not leave the bounds of its XAML Root (such as its parent Window or parent XAML Island), try setting the ShouldConstrainToRootBounds property to false. This property determines whether the flyout is rendered within its XAML Root (True) or if it is rendered in its own top level window (False).

This snippet is available in Codly. Click the appropriate link below to download the snippet. If you don't have Codly, it is available here in the Microsoft Store.

Comments

Popular posts from this blog

How to enable dark title bar in Windows Forms and WPF (Windows Presentation Foundation) apps

How to show placeholder text in a WPF textbox

How to enable precision scrolling in a WPF app on Windows