win10 uwp 如何修改 Flyout 的寬度或高度

本文告訴大家如何修改 Flyout 的尺寸

在堆棧有小夥伴問如何修改 Flyout 的寬度，他看到寬度會使用第一個元素的大小而不是最大的

<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 的寬度或高度

第一個方法是通過修改 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>

上面代碼就是將 ListView 設置一個寬度，這樣默認就會使用這個元素的寬度作爲 Flyout 的寬度，我將代碼放在 github 歡迎小夥伴訪問

如果此時的窗口的大小變小了，那麼 Flyout 也會自動修改自己的寬度和高度，可以使用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>

上面代碼通過 MinWidth 設置了最小需要的寬度，如果想要設置高度相信小夥伴也知道如何修改

上面代碼有一個細節是需要設置 TargetType="FlyoutPresenter" 纔可以

上面代碼也放在 github 歡迎小夥伴訪問

如果是後臺代碼寫的，也可以設置 FlyoutPresenter 的值

private void Flyout_Opened(object sender, object e)
{         
    Flyout f = sender as Flyout;
    Style s = new Windows.UI.Xaml.Style { TargetType = typeof(FlyoutPresenter) };
    s.Setters.Add(new Setter(MinHeightProperty, "200"));        
    s.Setters.Add(new Setter(MinWidthProperty, "200"));
    f.FlyoutPresenterStyle = s;
}

我推薦使用 Flyout 這個控件解決了很多 Popup 的坑

我搭建了自己的博客 https://blog.lindexi.com/ 歡迎大家訪問，裏面有很多新的博客。只有在我看到博客寫成熟之後纔會放在csdn或博客園，但是一旦發佈了就不再更新

如果在博客看到有任何不懂的，歡迎交流，我搭建了 dotnet 職業技術學院 歡迎大家加入

本作品採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名林德熙(包含鏈接:http://blog.csdn.net/lindexi_gd )，不得用於商業目的，基於本文修改後的作品務必以相同的許可發佈。如有任何疑問，請與我聯繫。