如何更改 XAML 弹出窗口的大小？

Question

在我的例子中，弹出窗口的大小计算不正确。

<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>

如果 window 的高度足够大 - 没问题。但如果不是 - 弹出宽度是根据第一个元素（不是最大的）计算的，我看到以下内容：

如何从代码（或 XAML）更改 Flyout 的宽度？

编辑：

以下代码有效：

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;

我试着把它放到Flyout.Opening(),Flyout.Opened(),ListView.SizeChanged(),ListView.Loaded(),ListView.Loading() , ListView.LayoutUpdated()。问题是它从第二次调用开始工作。在第一次调用中，弹出窗口仍然以错误的宽度呈现。

Answer 1

您可以更改 ListView 宽度以更改 Flyout 宽度

    <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>

所有代码我都放在了github上，欢迎大家访问

另一种方式是设置 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>

见

我也会把所有的代码放在github上，欢迎访问

Answer 2

我设法通过最初将弹出窗口附加到另一个元素并覆盖 Flyout.Opened() 来更改弹出窗口的大小，其中计算了正确的宽度并将弹出窗口附加到正确的元素。

XAML代码：

<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++代码：

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

我找到了另一种解决方案：填充ListView的MaxHeight 属性即可：

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);
}

如何更改 XAML 弹出窗口的大小？

How to change size of XAML flyout?

xaml

c++-cx

uwp