ToogleMenuFlyout and MenuFlyoutPresenterStyle Set

2019-03-06 03:59发布

问题:

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

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

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

my code is:

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>

回答1:

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

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. Set x:Name = "rootGrid" to page's root grid

  2. 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;
        }
    }
    
  3. 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: