Flip flyout closebutton around without changing position

Question

I'm trying to flip the arrow to point to the other direction in my flyout without changing the Position to left.

Right now this is how I'm creating my flyout

 <Controls:Flyout Name="New_Flyout" 
                             Header="Select Account Type" 
                             IsOpen="False"
                             Theme="Light"
                             Position="Right" 
                             HorizontalContentAlignment="Left"
                             HorizontalAlignment="Left"
                             Margin="0,0,0,0"
                             Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Controls:MetroWindow}, Path=ActualWidth}"
                             AnimateOpacity="True" 
                             AnimateOnPositionChange="True"
                             >

Answer 1

Add a new Trigger to the default HeaderTemplate:

    <DataTemplate x:Key="HeaderTemplate1"
              x:Shared="False">
        <DockPanel x:Name="dpHeader"
               Margin="10,25,10,10"
               VerticalAlignment="Center"
               LastChildFill="True">
            <Button x:Name="nav"
                Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}, Path=CloseCommand, Mode=OneWay}"
                DockPanel.Dock="Left"
                Style="{DynamicResource MetroCircleButtonStyle}"
                Visibility="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Controls:Flyout}}, Path=CloseButtonVisibility}"
                Height="40"
                Width="40"
                FontFamily="Segoe UI Symbol"
                Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}, Path=Foreground}"
                FontSize="16"
                VerticalAlignment="Bottom">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <Actions:SetFlyoutOpenAction TargetObject="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
                                                 Value="False" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <Rectangle Width="20"
                       Height="15"
                       Fill="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Fill">
                            <VisualBrush.Visual>
                                <Canvas Width="48"
                                    Height="48"
                                    Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0"
                                    UseLayoutRounding="False">
                                    <Path Width="25"
                                      Height="18"
                                      Canvas.Left="12"
                                      Canvas.Top="15"
                                      Stretch="Fill"
                                      Fill="Black"
                                      Data="F1 M 12,22L 12,26L 28.25,26L 21,33L 27.5,33L 37,24L 27.5,15L 21,15L 28.25,22L 12,22 Z " />
                                </Canvas>
                            </VisualBrush.Visual>
                        </VisualBrush>
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Button>
            <TextBlock Text="{Binding}"
                   x:Name="PART_BackButton"
                   Visibility="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Controls:Flyout}}, Path=TitleVisibility}"
                   FontSize="{StaticResource FlyoutHeaderFontSize}"
                   Margin="15,0,0,0"
                   VerticalAlignment="Center" />
        </DockPanel>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
                     Value="Right">
                <Setter TargetName="nav"
                    Property="LayoutTransform">
                    <Setter.Value>
                        <RotateTransform Angle="45" />
                    </Setter.Value>
                </Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
                     Value="Left">
                <Setter TargetName="nav"
                    Property="DockPanel.Dock"
                    Value="Right" />
                <Setter TargetName="PART_BackButton"
                    Property="TextAlignment"
                    Value="Right" />
                <Setter TargetName="PART_BackButton"
                    Property="Margin"
                    Value="0,0,15,0" />
                <Setter TargetName="nav"
                    Property="LayoutTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX="-1" />
                    </Setter.Value>
                </Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
                     Value="Top">
                <Setter TargetName="dpHeader"
                    Property="Margin"
                    Value="10" />
                <Setter TargetName="nav"
                    Property="LayoutTransform">
                    <Setter.Value>
                        <RotateTransform Angle="-90" />
                    </Setter.Value>
                </Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
                     Value="Bottom">
                <Setter TargetName="dpHeader"
                    Property="Margin"
                    Value="10" />
                <Setter TargetName="nav"
                    Property="LayoutTransform">
                    <Setter.Value>
                        <RotateTransform Angle="90" />
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>

And then apply it to your Flyout:

            <Controls:Flyout Name="New_Flyout" 
                         HeaderTemplate="{StaticResource HeaderTemplate1}"
                         Header="Select Account Type" 
                         IsOpen="False"
                         Theme="Dark"
                         Position="Right" 
                         HorizontalContentAlignment="Left"
                         HorizontalAlignment="Left"
                         Margin="0,0,0,0"
                         Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Controls:MetroWindow}, Path=ActualWidth}"
                         AnimateOnPositionChange="True">

I used 45 degrees just to make it clear, but for your purposes you want to use 180: