CODEWITHSUNDEEP
c#xamlwinui-3winuiwindows-app-sdk
Eric Nien
Eric Nien

Reputation: 45

How to set the Flyout Width and Height in WinUI 3

I would like to create a Flyout with a width, for example 800, which is same as the TextBox. And then attach the flyout to the textbox. Since I cannot set the Width of Flyout directly (There is no Width property in Flyout class). I tried to set the width of Grid inside the flyout to 800. Here is my code

<TextBox x:Name="SearchBox1" Height="40" Width="800">
    <FlyoutBase.AttachedFlyout>
        <Flyout x:Name="SearchBoxFlyout">
            <Grid x:Name="ContentArea" Width="800">
                <StackPanel x:Name="StackLayout">
                    <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="HI"/>
                </StackPanel>
            </Grid>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBox>

public SearchBox()
{
    this.InitializeComponent();
}

public void ShowFlyout()
{
    SearchBoxFlyout.Placement = FlyoutPlacementMode.Bottom;
    SearchBoxFlyout.ShowAt(SearchBox1);
}

When I run the ShowFlyout() method. It shows the grid with Scrolling instead of expanding the Flyout(Sorry I didn't change the backgroud color so it may be hard to see). The TextBox above is 800 width. Obviously the Flyout is not 800 width. This is the image

What I tried is to follow this official document. So I add these xaml into <Flyout> element

<Flyout.FlyoutPresenterStyle>
    <Style TargetType="FlyoutPresenter">
        <Setter Property="Width" Value="800"></Setter>
    </Style>
</Flyout.FlyoutPresenterStyle>

Unfortunately nothing changed. How can I solve this?

Upvotes: 0

Views: 137

Answers (1)

Andrew KeepCoding
Andrew KeepCoding

Reputation: 13666

You can set the MaxWidth and Width directly like this:

<TextBox
    x:Name="SearchBox1"
    Width="800"
    Height="40">
    <FlyoutBase.AttachedFlyout>
        <Flyout Opened="SearchBoxFlyout_Opened">
            <!-- FLYOUT CONTENT -->
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBox>

private void SearchBoxFlyout_Opened(object sender, object e)
{
    // This also works.
    //if (VisualTreeHelper
    //    .GetOpenPopupsForXamlRoot(this.XamlRoot)
    //    .FirstOrDefault()?.Child is not FlyoutPresenter flyoutPresenter ||
    //    sender is not Flyout flyout)
    //{
    //    return;
    //}

    if (sender is not Flyout flyout ||
        (flyout.Content as FrameworkElement)?.Parent is not FlyoutPresenter flyoutPresenter)
    {
        return;
    }

    // The flyout.Target is the TextBox in this case.
    flyoutPresenter.MaxWidth = flyout.Target.ActualWidth;
    flyoutPresenter.Width = flyout.Target.ActualWidth;
}

Upvotes: 0

Related Questions