在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

  

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

我没有看到完整的XAML代码，但是经过我的测试，这种情况（“弹出按钮与页面的侧面齐平”）是相对的。您在弹出式广告样式中设置的<Border Margin="-20,0,0,0"是正确的。它确实有效。

您可以看到以下屏幕截图：

如果您未设置Border的边距，则该边距不会覆盖在按钮上。

在什么情况下会引起您提到的现象？当我将窗口的大小更改为minWidth时，它将弹出页面的侧面。

但是，如果您设置了<Border Margin="20,0,0,0"，则左侧将有一个空格。

我的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>