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 的宽度属性是实现您想要的元素的关键.
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.
将 x:Name = "rootGrid" 设置为页面的根网格
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屋!