Button Menu flyout horizontal alignment in UWP - xaml

Question

I need to set the menuflyout to get right aligned. I used the code, but it appears at left only. Should I need to modify in the style?
<Button Content="Click" HorizontalAlignment="Right" Height="30" Width="30">
<Button.Flyout>
<MenuFlyout Placement="Bottom">
<MenuFlyout.MenuFlyoutPresenterStyle>
<Style TargetType="MenuFlyoutPresenter">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="MaxWidth" Value="50" />
<Setter Property="MaxHeight" Value="50" />
</Style>
</MenuFlyout.MenuFlyoutPresenterStyle>
<MenuFlyoutItem Text="Item" />
</MenuFlyout>
</Button.Flyout>
</Button>

Answer 1

From the screenshot, it seems you are develpoing a Windows Phone 8.1 app not a UWP app.
While using UWP, your code (I remove Height and Width in the Button) looks like:
I think this is what you want.
But in Windows Phone 8.1, we have to modify the template of MenuFlyoutPresenter to achieve this.
To modify the template of MenuFlyoutPresenter, we can select the "[MenuFlyout]" in "Document Outline" and right click, then select "Edit Additional Templates" → "Edit MenuFlyoutPresenterStyle" → "Edit a Copy...".
In the template, we need to set the HorizontalAlignment of OuterBorder, CenterBorder and InnerBorder to Right:
<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right">
...
<Border x:Name="CenterBorder" BorderBrush="{TemplateBinding Background}" FlowDirection="LeftToRight" HorizontalAlignment="Right">
<StackPanel x:Name="InnerBorder" Background="{TemplateBinding Background}" FlowDirection="{TemplateBinding FlowDirection}" HorizontalAlignment="Right">
...
</StackPanel>
</Border>
</Border>
Then in the Button, we can use code like following:
<Button HorizontalAlignment="Right" Content="Click">
<Button.Flyout>
<MenuFlyout MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle1}" Placement="Bottom">
<MenuFlyoutItem Text="Item" />
</MenuFlyout>
</Button.Flyout>
</Button>
It looks like:
You can also change other properties in the Style of MenuFlyoutPresenter to beautify it.

Answer 2

Actually if you use default settings and set your Placement property of MenuFlyout, position should look fine. When I modify your code it should work properly as what you need. Yıu can check from screenshot.
<Button Content="Click" HorizontalAlignment="Right" Height="30" Width="114" Margin="0,200,0,0" VerticalAlignment="Top" >
<Button.Flyout>
<MenuFlyout Placement="Bottom">
<MenuFlyoutItem Text="Item" HorizontalAlignment="Right" />
</MenuFlyout>
</Button.Flyout>
</Button>