Search code examples
xamluwpalignmentflyout

Left-align Contents of a UWP Button.Flyout

I'm unable to left-align the contents of a Flyout.

enter image description here

Windows seems to automatically right-align flyout contents that display on the right side of the window. I tried setting the HorizontalAlignment property of the children, setting the Flyout.FlyoutPresenterStyle property HorizontalContentAlignment, and other HorizontalContentAlignment properties without success.

<StackPanel Orientation="Horizontal"
            FlowDirection="RightToLeft">
   <!-- Settings menu -->
   <Button.Flyout>
      <Flyout>
         <Flyout.FlyoutPresenterStyle>
            <Style TargetType="FlyoutPresenter">
               <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
               <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
               <Setter Property="HorizontalContentAlignment" Value="Left"/><!-- No -->
            </Style>
         </Flyout.FlyoutPresenterStyle>
         <StackPanel HorizontalAlignment="Left"><!-- No -->
            <TextBlock HorizontalAlignment="Left" HorizontalTextAlignment="Left">Settings</TextBlock><!-- No -->
            …
   </Button.Flyout>
</StackPanel>

I expect the flyout contents to align left, but they stay on the right.

Solution

  • Creating a reproducible example made me realize my error. The property FlowDirection was accidentally set as RightToLeft in a parent StackPanel. Reverting this solves the problem.