CODEWITHSUNDEEP
xamlbuttonuwpflyout
Aaron R
Aaron R

Reputation: 13

Adding a margin to button flyout in UWP

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>

Upvotes: 1

Views: 628

Answers (1)

Xie Steven
Xie Steven

Reputation: 8601

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:

enter image description here

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

enter image description here

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.

enter image description here

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

enter image description here

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>

Upvotes: 1

Related Questions