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

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 度：

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

Flip flyout closebutton around without changing position

c#

wpf

xaml

flyout

mahapps.metro