How can i reduce the gap between button and it's flyout? C# UWP

Viewed 87

I want to have 0 margin between button and flyout, how can i do that?

Here's the code i used:

<Grid>
    <Button Height="100"
            Width="100"
            Content="More"
            Name="MoreButton">
        <Button.Flyout>
            
            <MenuFlyout x:Name="MoreButtonFlyout"
                        Placement="Bottom">
                <MenuFlyoutItem x:Name="ReplayOn"
                                FontSize="12"
                                FontFamily="Segoe UI Regular"
                                HorizontalAlignment="Left"
                                Foreground="#252525"
                                Text="Item 1"
                                Height="32"/>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    
</Grid>

enter image description here

1 Answers

We can eliminate the default gap by setting a negative Margin for MenuFlyout

<MenuFlyout x:Name="MoreButtonFlyout"
    Placement="Bottom">
    <MenuFlyout.MenuFlyoutPresenterStyle>
        <Style TargetType="MenuFlyoutPresenter">
            <Setter Property="Margin" Value="0,-4,0,0" />
        </Style>
    </MenuFlyout.MenuFlyoutPresenterStyle>
    ...
</MenuFlyout>
Related