How to change size of XAML flyout?

Question

In my case size of flyout is calculated incorrectly.

<AppBarButton>
    <AppBarButton.Flyout>
        <Flyout>
            <ListView>
                <x:String>Short</x:String>
                <x:String>Very very very long</x:String>
                <x:String>Short</x:String>
                <x:String>Short</x:String>
                <x:String>Short</x:String>
                <x:String>Short</x:String>
                <x:String>Short</x:String>
                <x:String>Short</x:String>
            </ListView>
        </Flyout>
    </AppBarButton.Flyout>
</AppBarButton>

If a height of a window is big enough - all fine. But if not - flyout width is calculated based on the first element (not on the biggest) and I see the following:

How can I change width of Flyout from code (or from XAML) ?

EDIT:

The following code works:

auto w = filesListView->ActualWidth.ToString();
Windows::UI::Xaml::Style^ s = ref new Windows::UI::Xaml::Style();
s->Setters->Append(ref new Setter(MinWidthProperty, w));
myFlyout->FlyoutPresenterStyle = s;

I tried to put it to Flyout.Opening(), Flyout.Opened(), ListView.SizeChanged(), ListView.Loaded(), ListView.Loading(), ListView.LayoutUpdated(). The problem is that it works starting from the second call. In the first call flyout still rendering with wrong width.

Answer 1

I have found another solution: it is enough to fill MaxHeight property of ListView:

void App4::MainPage::MyButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    filesListView->MaxHeight = Window::Current->Content->ActualSize.y - 50;
    auto flyout = static_cast<Flyout^>(Resources->Lookup(L"myFlyout"));
    flyout->ShowAt(SecondButton);
}

Answer 2

I managed to change size of flyout by attaching flyout initially to another element, and overriding Flyout.Opened(), where correct width calculated and flyout attached to the right element.

XAML code:

<Page.Resources>
    <Flyout x:Name="myFlyout" Opened="myFlyoutOpened">
        <ListView x:Name="filesListView">
            <x:String>Short</x:String>
            <x:String>Very very very long</x:String>
            <x:String>Short</x:String>
            <x:String>Short</x:String>
            <x:String>Short</x:String>
            <x:String>Short</x:String>
            <x:String>Short</x:String>
            <x:String>Short</x:String>
        </ListView>
    </Flyout>
</Page.Resources>
<StackPanel>
    <AppBarButton x:Name="myButton" Click="MyButton_Click"/>
    <AppBarButton x:Name="SecondButton"/>
</StackPanel>

C++ code:

void App4::MainPage::MyButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    auto flyout = static_cast<Flyout^>(Resources->Lookup(L"myFlyout"));
    flyout->ShowAt(SecondButton);
}

void App4::MainPage::myFlyoutOpened(Platform::Object^ sender, Platform::Object^ e)
{
    auto w = filesListView->ActualWidth.ToString();
    Windows::UI::Xaml::Style^ s = ref new Windows::UI::Xaml::Style();
    s->Setters->Append(ref new Setter(MinWidthProperty, w));
    myFlyout->FlyoutPresenterStyle = s;
    myFlyout->ShowAt(myButton);
}

Answer 3

You can change the ListView width to change the Flyout width

    <AppBarButton Margin="10,10,10,10">
        <AppBarButton.Flyout>
            <Flyout>
                <ListView Width="500">
                    <x:String>Short</x:String>
                    <x:String>Very very very long</x:String>
                    <x:String>Short</x:String>
                    <x:String>Short</x:String>
                    <x:String>Short</x:String>
                    <x:String>Short</x:String>
                    <x:String>Short</x:String>
                    <x:String>Short</x:String>
                </ListView>
            </Flyout>
        </AppBarButton.Flyout>
    </AppBarButton>

I put all the code on github and you are welcome to visit

And the other way is set the FlyoutPresenterStyle

    <AppBarButton Margin="10,10,10,10">
        <AppBarButton.Flyout>
            <Flyout>
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="MinWidth" Value="500"></Setter>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <ListView >
                    <x:String>Short</x:String>
                    <x:String>Very very very long</x:String>
                    <x:String>Short</x:String>
                    <x:String>Short</x:String>
                    <x:String>Short</x:String>
                    <x:String>Short</x:String>
                    <x:String>Short</x:String>
                    <x:String>Short</x:String>
                </ListView>
            </Flyout>
        </AppBarButton.Flyout>
    </AppBarButton>

See https://stackoverflow.com/a/54902492/6116637

I will also put all the code on github and welcome to visit.