如何在WPF中为父元素设置动画

我为ToggleButton控件创建了一个自定义样式/控件模板，使其看起来像一个切换开关

目前，我使用IsChecked上的触发器将开关的水平对齐设置为向左或向右

然而，这不是一个很好的用户体验

当控件进入选中的视觉状态时，我希望开关向右设置动画/滑动，当控件进入未选中的视觉状态时，我希望开关向左设置动画/滑动

下面是控制模板中XAML的超级简单的外观

<Grid x:Name="RootElement">
    ...
    <Grid x:Name="SwitchElement">
        <Grid.RenderTransform>
            <TranslateTransform/>
        </Grid.RenderTransform>
        ...
    </Grid>
</Grid>

我如何为SwitchElement创建故事板/动画，使其转换为适合根元素的宽度

---

我感谢你的帮助

我认为网格并不适合您的需要，也许您可以尝试使用dockpanel和触发器之类的方法将SwitchElement移动到Dock。对吗

大概是这样的：

<ToggleButton>
        <ToggleButton.Template>
            <ControlTemplate TargetType="ToggleButton">
                <Border Width="50" Height="25" Background="Transparent">
                    <Canvas>
                        <Ellipse Name="SliderElement" DockPanel.Dock="Left" Fill="Red" Canvas.Left="0" Height="25" Width="25">
                        </Ellipse>
                    </Canvas>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard  >
                                <Storyboard>
                                    <DoubleAnimation To="25" Duration="0:0:0.4" 
                                                     Storyboard.TargetName="SliderElement" Storyboard.TargetProperty="(Canvas.Left)"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ToggleButton.Template>
    </ToggleButton>

---

这个问题的答案是在代码中构建动画并将其作为行为应用。问题是XAML中的动画不能是动态的，不能使用绑定，因为它们在运行时被冻结

通过在代码中创建幻灯片动画，我能够使用查看父对象实际宽度的绑定

---

我现在已经将这种行为扩展为一种成熟的动画行为，我可以在许多其他地方使用。

检查/取消检查视觉状态到底是什么意思？您的意思是说您有一个复选框可以显示/隐藏元素，还是在什么情况下希望该复选框切换位置？在ControlTemplate中，有一个VisualStateManager，它使用VisualStateGroup来组织各个VisualState。对于ToggleButton控件，当控件被选中或取消选中时，有两种可视状态。编辑以使我的目标更清晰。我已经根据IsChecked属性将HorizonalAlignment属性设置为Left或Right，但这不是一种良好的用户体验。如果SwitchElement可以前后设置动画/滑动，效果会更好。这就是我试图解决的问题。@keithernet我对其进行了重构，以使用动画并在画布中移动椭圆。您还可以为示例的平移变换设置动画。你只要说出它的名字就行了。并设置Storyboard.TargetName