ToogleMenuFlyout and MenuFlyoutPresenterStyle Set Width - Windows 10 Mobile

Question

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<

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