ToogleMenuFlyout和MenuFlyoutPresenterStyle设置宽度-Windows 10移动版 [英] ToogleMenuFlyout and MenuFlyoutPresenterStyle Set Width - Windows 10 Mobile

问题描述

我需要ToogleMenuFlyout中的项目占据屏幕的整个width. 但是我不能解决问题.

I need the items in a ToogleMenuFlyout occupy the full width of the screen. But I'm not solve the problem.

我正在尝试放置网格的width(网格主页)，但是在代码隐藏方面我没有做.

I'm trying to put the width of my Grid (Grid Main page) but I do not get to do in code-behind.

我正在将样式应用于MenuFlyoutPresenterStyle，但也没有给出.

I am applying a style to MenuFlyoutPresenterStyle but also not to give.

我的代码是:

AppBarButton x:Name="FiltersPhone" Icon="Filter" Label="Names">
                <AppBarButton.Flyout>
                     <MenuFlyout>
                    <MenuFlyout.MenuFlyoutPresenterStyle>
                        <Style TargetType="MenuFlyoutPresenter">
                            <Setter Property="Background" Value="Transparent"/>
                            <Setter Property="BorderThickness" Value="0"/>
                            <Setter Property="Margin" Value="0,4,0,0"/>
                        </Style>
                    </MenuFlyout.MenuFlyoutPresenterStyle>
                    <ToggleMenuFlyoutItem x:Name="FlyoutItemDate" Text="Today" Tag="Date"
                                           IsChecked="True/>

                </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>

推荐答案

应用以下内容应有助于[已更新以支持景观]:

Apply the following should help [Updated to support landscape]:

请注意:这仍然不是满足您所有要求的完美解决方案.我只是想让您了解MenuFlyoutPresenter的Maxwidth和ToggleMenuFlyoutItem的width属性是实现所需功能的关键.

Note that: this is still not a perfect solution to meet all your requirement. I am just trying to let you understand the MenuFlyoutPresenter's Maxwidth and the ToggleMenuFlyoutItem's width properties are the key to impelement what you want.

1. 设置x:Name ="rootGrid"到页面的根网格

1. Set x:Name = "rootGrid" to page's root grid

在后台代码中，执行以下操作:

In code-behind, implement the following:

public Page2()
{
    this.InitializeComponent();
    this.Loaded += Page2_Loaded;
}

private void Page2_Loaded(object sender, RoutedEventArgs e)
{
    FlyoutItemDate.Width = rootGrid.ActualWidth;
    DisplayInformation di = DisplayInformation.GetForCurrentView();
    di.OrientationChanged += Di_OrientationChanged;
}

private void Di_OrientationChanged(DisplayInformation sender, object args)
{
    if (sender.CurrentOrientation == DisplayOrientations.Portrait)
    {
        FlyoutItemDate.Width = rootGrid.ActualWidth;
    }
    else if(sender.CurrentOrientation == DisplayOrientations.Landscape)
    {
        FlyoutItemDate.Width = rootGrid.ActualHeight;
    }
}

将MenuFlyoutPresenter的最大宽度增加到较大的宽度(例如1000)

Increase maxwidth of MenuFlyoutPresenter to larger one(like 1000)

 <Style TargetType="MenuFlyoutPresenter">
      <Setter Property="Background" Value="Red"/>
      <Setter Property="BorderThickness" Value="0"/>
      <Setter Property="Margin" Value="0,4,0,0"/>
      <Setter Property="MaxWidth" Value="1000"/>
 </Style>

这是结果，我将背景设为红色以使其清晰:

Here is the result and I make the background to red to make it clear:

这篇关于ToogleMenuFlyout和MenuFlyoutPresenterStyle设置宽度-Windows 10移动版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！