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

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：