Change MenuFlyoutPresenter to align with button in UWP - xaml

Question

I am trying to get the MenuFlyout to align bottom-left of the button. I can achieve this if i put the button at the left of the screen, but if the button is anywhere else the MenuFlyout is always centered right under the button. I suspect that I have to create a template and change a property in there but I do not know what I need to change to achieve this.
I've pasted my xaml below with a note of where i suspect I need to make the change. I am new to xaml, any help or guidance will be much appreciated. Thanks!
<Page
x:Class="ButtonMenuFlyout.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ButtonMenuFlyout"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="BasicTextStyle" TargetType="MenuFlyoutItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="13" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Padding" Value="0,0,0,0" />
<Setter Property="MinHeight" Value="36" />
</Style>
<Style x:Key="MenuFlyoutPresenterStyle1" TargetType="MenuFlyoutPresenter">
<Setter Property="Background" Value="#FFFFFF" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Padding" Value="20,0,20,16" />
<Setter Property="Visibility" Value="Visible"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<Grid Background="{TemplateBinding Background}">
<!--[change property in here]-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="buttonMenuFlyout"
Content="..."
VerticalAlignment="Top"
HorizontalAlignment="right"
Padding="16,4"
Margin="120,10,0,5"
Background="White">
<Button.Flyout>
<MenuFlyout Opened="MenuFlyout_Opened" MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle1}">
<MenuFlyoutItem Style="{StaticResource BasicTextStyle}" Text="Settings" Click="MenuFlyoutItem_Click" />
<MenuFlyoutItem Style="{StaticResource BasicTextStyle}" Text="Feedback" Click="MenuFlyoutItem_Click_1"/>
<MenuFlyoutItem Style="{StaticResource BasicTextStyle}" Text="Notebook" Click="MenuFlyoutItem_Click_2" />
</MenuFlyout>
</Button.Flyout>
</Button>
</Grid>
</Page>

Answer 1

In your MenuFlyout_Opened method, you can explicitly call ShowAt(UIElement, Point) method.
This first parameter will probably be your buttonMenuFlyout; the second one, your offset which might roughly be new Point(0, buttonMenuFlyout.ActualHeight).