在不改变位置的情况下翻转弹出关闭按钮

Question

我试图将箭头指向我的弹出框中的另一个方向而不将位置更改为左边。

现在这就是我创建弹出窗口的方式

 <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

将新Trigger添加到默认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>

然后将其应用到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">

我使用45度只是为了清楚，但为了你的目的，你想使用180：