在 UWP 中为按钮弹出窗口添加边距

Question

我正在向与屏幕右侧对齐的按钮添加弹出按钮。

当我将弹出按钮放置在底部时，弹出按钮与页面的一侧齐平。

我要给它留边距或间距

感谢帮助

我试过用边距修改浮出控件演示器样式，但这并没有影响浮出控件。

<Flyout x:Name="NextActionFlyout" Opened="Flyout_Opened" Closed="FlyoutClosed">
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="FlyoutPresenter">
                                <Border Margin="-20,0,0,0"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}">
                                    <ScrollViewer
                                            x:Name="ScrollViewer"
                                            AutomationProperties.AccessibilityView="Raw"
                                            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                            ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                        <ContentPresenter
                                                Margin="{TemplateBinding Padding}"
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                Content="{TemplateBinding Content}"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                ContentTransitions="{TemplateBinding ContentTransitions}" />
                                    </ScrollViewer>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Flyout.FlyoutPresenterStyle>
</Flyout>

Answer 1

When I have the placement of the flyout positioned to the bottom, the flyout is flush against the side of the page.

我没有看到你完整的XAML代码，但根据我的测试，这种情况('the flyout is flush against the side of the page')是相对的。您在 Flyout 样式中设置的 <Border Margin="-20,0,0,0" 是正确的。它确实有效。

您可以看到如下截图：

如果不为Border设置边距，则不会覆盖在按钮上。

你说的这种现象是在什么情况下造成的？当我将 window 的大小更改为 minWidth 时，它会弹出页面的一侧。

但是如果你设置<Border Margin="20,0,0,0"，左边就会有一个space。

我的 XAML 代码如下：

<Grid>
    <Button Content="Flyout">
        <Button.Flyout>
            <Flyout Placement="Bottom">
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="FlyoutPresenter">
                                    <Border Margin="20,0,0,0"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}">
                                        <ScrollViewer
                                        x:Name="ScrollViewer"
                                        AutomationProperties.AccessibilityView="Raw"
                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                        ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                            <ContentPresenter
                                            Margin="{TemplateBinding Padding}"
                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                            Content="{TemplateBinding Content}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            ContentTransitions="{TemplateBinding ContentTransitions}" />
                                        </ScrollViewer>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <Grid Width="500" Height="500" Background="LightBlue">
                </Grid>
            </Flyout>
        </Button.Flyout>
    </Button>
</Grid>

在 UWP 中为按钮弹出窗口添加边距

Adding a margin to button flyout in UWP

xaml

button

flyout

uwp