Как изменить размер выпадающего меню 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>

Если высота окна достаточно велика - все хорошо. Но если нет - ширина выпадающего списка рассчитывается на основе первого элемента (не самого большого), и я вижу следующее:

Как я могу изменить ширина Flyout из кода (или из XAML)?

РЕДАКТИРОВАТЬ:

Следующий код работает:

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

Мне удалось изменить размер всплывающей подсказки, сначала прикрепив всплывающую подсказку к другому элементу, и переопределив функцию 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 2

Вы можете изменить ширину ListView, чтобы изменить ширину выпадающего меню

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

Я нашел другое решение: достаточно заполнить свойство MaxHeight 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);
}