UWP 中的按钮菜单弹出水平对齐答案

【问题标题】：Button Menu flyout horizontal alignment in UWPUWP 中的按钮菜单弹出水平对齐
【发布时间】：2018-09-24 02:51:47
【问题描述】：

我需要将 menuflyout 设置为右对齐。我使用了代码，但它只出现在左侧。我需要修改样式吗？

<Button Content="Click" HorizontalAlignment="Right" Height="30" Width="30">
        <Button.Flyout>
            <MenuFlyout Placement="Bottom">
                <MenuFlyout.MenuFlyoutPresenterStyle>
                    <Style TargetType="MenuFlyoutPresenter">
                        <Setter Property="HorizontalAlignment" Value="Right" />
                        <Setter Property="MaxWidth" Value="50" />
                        <Setter Property="MaxHeight" Value="50" />
                    </Style>
                </MenuFlyout.MenuFlyoutPresenterStyle>
                <MenuFlyoutItem Text="Item" />
            </MenuFlyout>
        </Button.Flyout>
    </Button>

【问题讨论】：

标签： xaml uwp

【解决方案1】：

从屏幕截图中，您似乎正在开发 Windows Phone 8.1 应用而不是 UWP 应用。

使用 UWP 时，您的代码（我删除了 Button 中的 Height 和 Width）如下所示：

我想这就是你想要的。

但在 Windows Phone 8.1 中，我们必须修改 MenuFlyoutPresenter 的模板来实现这一点。

要修改MenuFlyoutPresenter的模板，我们可以在“Document Outline”中选择“[MenuFlyout]”并点击右键，然后选择“编辑其他模板" → "编辑 MenuFlyoutPresenterStyle" → "编辑副本..."。

在模板中，我们需要将OuterBorder、CenterBorder和InnerBorder的HorizontalAlignment设置为Right：

<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right">
    ...
    <Border x:Name="CenterBorder" BorderBrush="{TemplateBinding Background}" FlowDirection="LeftToRight" HorizontalAlignment="Right">
        <StackPanel x:Name="InnerBorder" Background="{TemplateBinding Background}" FlowDirection="{TemplateBinding FlowDirection}" HorizontalAlignment="Right">
        ...
        </StackPanel>
    </Border>
</Border>

然后在Button，我们可以使用如下代码：

<Button HorizontalAlignment="Right" Content="Click">
    <Button.Flyout>
        <MenuFlyout MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle1}" Placement="Bottom">
            <MenuFlyoutItem Text="Item" />
        </MenuFlyout>
    </Button.Flyout>
</Button>

看起来像：

您还可以更改MenuFlyoutPresenter的Style中的其他属性来美化它。

【讨论】：

【解决方案2】：

实际上，如果您使用默认设置并将Placement 属性设置为MenuFlyout，则位置应该看起来不错。当我修改您的代码时，它应该可以根据您的需要正常工作。 Yıu可以从截图中查看。

<Button Content="Click" HorizontalAlignment="Right" Height="30" Width="114" Margin="0,200,0,0" VerticalAlignment="Top" >
    <Button.Flyout>
        <MenuFlyout Placement="Bottom">
            <MenuFlyoutItem Text="Item" HorizontalAlignment="Right" />
        </MenuFlyout>
    </Button.Flyout>
</Button>

【讨论】：