处理切换按钮 ControlTemplate

Question

如果我使用此代码：

关注“路径”元素

<ToggleButton Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton">
                                    <ToggleButton.Template>
                                        <ControlTemplate>
                                            <Grid>
                                                <Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/>
                                                <Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center" 
                                                Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </ToggleButton.Template>
                                    <ToggleButton.RenderTransform>
                                        <RotateTransform x:Name="RotateButtonTransform"/>
                                    </ToggleButton.RenderTransform>
                                </ToggleButton>

所有节目都很好。

例子：

但是当我将整个代码与动画一起使用时，位置设置为左侧，但它出现在右侧

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Expander">
<Style TargetType="local:Expander">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:Expander">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ViewStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.0"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                                    Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/>
                                    <DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                                    Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Collapsed">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                                    Storyboard.TargetProperty="ScaleY" To="0" Duration="0"/>
                                    <DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                                    Storyboard.TargetProperty="Angle" To="0" Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    Background="{TemplateBinding Background}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid  Background="#FFDBDBDB" Margin="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Grid.Column="1" VerticalAlignment="Center" Content="{TemplateBinding HeaderContent}" Canvas.ZIndex="2"/>
                                <ToggleButton Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton">
                                    <ToggleButton.Template>
                                        <ControlTemplate>
                                            <Grid>
                                                <Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/>
                                                <Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center" 
                                                Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </ToggleButton.Template>
                                    <ToggleButton.RenderTransform>
                                        <RotateTransform x:Name="RotateButtonTransform"/>
                                    </ToggleButton.RenderTransform>
                                </ToggleButton>
                            </Grid>
                            <ContentPresenter Grid.Row="1" Margin="5" Content="{TemplateBinding Content}" x:Name="Content">
                                <ContentPresenter.RenderTransform>
                                    <ScaleTransform x:Name="ContentScaleTransform"/>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Grid>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

当我点击扩展器时，路径会从左向右跳转 - 问题出在哪里？

例子：

当位置为中心时，它显示正确

补充：

如果我删除动画 x:Name="RotateButtonTransform" 那么 Path 元素会正确显示 - 但我需要这个变换来旋转 Path

补充 2：

删除了切换按钮动画，并添加了以下几行：

到视觉状态故事板：

<DoubleAnimation Storyboard.TargetName="RotatePath"
Storyboard.TargetProperty="Angle" To="180" Duration="0"/>

到路径元素：

<Path.RenderTransform>
     <RotateTransform x:Name="RotatePath"/>
</Path.RenderTransform>

代码为什么会失败...

错误：

System.Windows.ni.dll 中出现“System.InvalidOperationException”类型的异常，但未在用户代码中处理

Answer 1

因为您的 ToggleButton 跨越 2 列，并且您将其设置为 HorizontalAlignment 为 Stretch，这意味着 ToggleButton 将具有整个标题的宽度，并且当您展开并应用 180 度旋转时，它围绕其中心旋转并且左侧的东西现在倒置在右侧。将ToggleButton 上的HorizontalAlignment 更改为Left，这应该可以解决您的问题。

如果你想保持ToggleButton 被拉伸，那么不要旋转按钮，而是在里面旋转Path：

<ToggleButton.Template>
    <ControlTemplate>
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="ViewStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0:0:0.0"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="0" Duration="0"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/>
            <Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center" Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB">
                <Path.RenderTransform>
                    <RotateTransform x:Name="RotateButtonTransform"/>
                </Path.RenderTransform>
            </Path>
        </Grid>
    </ControlTemplate>
</ToggleButton.Template>