Question

我为ToggleButton控件创建了一个自定义样式/控件模板，使其看起来像一个Toggle Switch。

目前，我在IsChecked上使用Trigger将开关的HorizontalAlignment设置为Left或Right。

然而，这不是一个非常好的用户体验。

当控件进入Checked视觉状态时，我希望开关动画/滑动到右侧，当它进入Unchecked视觉状态时，我希望开关动画/滑动到左侧。 / p>

以下是控件模板中XAML的超简单外观。

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

如何为SwitchElement创建故事板/动画，以便将其翻译为适合RootElement的宽度？

感谢您的帮助！

Answer 1

我不认为网格确实符合您的需求，也许您尝试使用dockpanel和Trigger来将SwitchElement移动到Dock.Right

这样的事情：

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

Answer 2

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

通过在代码中创建我的幻灯片动画，我能够使用一个查看父级的ActualWidth的绑定。

我现在已经将此行为扩展为一个完整的动画行为，我可以在许多其他地方使用。

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

2 个答案: