WPF边框宽度动画 [英] WPF Animation of border width

问题描述

我的用户界面上有一个扩展面板，如下所示：

I've got a dockpanel on my ui as follows;

<DockPanel>
    <Border DockPanel.Dock="Top">Header</Border>
    <Border DockPanel.Dock="Bottom">My footer</Border>
    <Border DockPanel.Dock="Left">Menu</Border>

    <Border>Content</Border>
 </DockPanel>

我要做的是制作一个演示图板动画来显示/隐藏左侧的菜单-手侧。边框加载后，边框会增加宽度，但我想关闭/重新打开边框。我在某处需要一个按钮，但我希​​望它在边框控件而不是本身中触发动画。理想情况下，我想到的是Visual Studio中的工具箱/服务器资源管理器。

What I want to do is to have a storyboard animation to show / hide the Menu on the left-hand side. I've got my border to increase the width when it has loaded but I want a way to close / reopen it. I need a button somewhere but I want this to trigger the animation in the border control rather than itself. Ideally I was thinking of something like the Toolbox / Server Explorer in visual studio.

有人有入门的指针/示例吗？

Does anyone have any pointers / examples for getting started?

谢谢

推荐答案

我不确定我理解你的意思，但是如果要设置动画它进/出然后您可能要更新其宽度？如果在ViewModel / PresentationModel上具有可以绑定的属性，则可以执行以下操作：

I'm not sure I understand what you mean, but if you want to animate it in/out then you probably want to update its width? If you have a property on your ViewModel/PresentationModel that you can bind to then you can do something like:

<DataTrigger Binding="{Binding IShouldBeVisible}" Value="True">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard AccelerationRatio="0.4" DecelerationRatio="0.4">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Width)">
                    <SplineDoubleKeyFrame KeyTime="00:00:0.13" Value="100"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>
    <DataTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard AccelerationRatio="0.4" DecelerationRatio="0.4">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Width)">
                    <SplineDoubleKeyFrame KeyTime="00:00:0.1" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.ExitActions>
</DataTrigger>

如果您要制作复杂的动画，这些动画会更改多个属性，不同的时间等，那么放在一起就容易多了在Blend中，即使您在测试项目中进行操作，也要剪切+粘贴生成的StoryBoard：-）

If you are doing complicated animations that change multiple properties, different timings etc then it's much easier to put together in Blend, even if you do it in a test project then cut+paste the resulting StoryBoard :-)

这篇关于WPF边框宽度动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！