Adding a margin to button flyout in UWP

Question

I am adding a flyout to a button that is aligned to the right of the screen.

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

I would like to give it a margin or spacing

Thanks for the help

I've tried modifying the flyout presenter style with margins but that did not affect the flyout.

<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.

I did not see your complete XAML code, but with my testing, this situation('the flyout is flush against the side of the page') is relative. What you have set the <Border Margin="-20,0,0,0" in the Flyout's style is correct. It actually does work.

You could see the following screenshot:

If you do not set the margin for the Border, it will not cover on the button.

Under what circumstances does it cause the phenomenon you mentioned? When I change the window's size to the minWidth, it will make flyout against the side of the page.

But if you set the <Border Margin="20,0,0,0", there will be a space on the left.

My XAML code is the following:

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