WPF 边框宽度动画

发布于 2024-08-21 23:49:24 字数 499 浏览 4 评论 0原文

我的用户界面上有一个停靠面板，如下所示；

<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 中的工具箱/服务器资源管理器之类的东西。

有人有任何入门指南/示例吗？

谢谢

原文

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>

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?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落叶缤纷 2024-08-28 23:49:24

我不确定我明白你的意思，但如果你想将它设置为动画输入/输出那么你可能想要更新它的宽度？如果您的 ViewModel/PresentationModel 上有一个可以绑定的属性，那么您可以执行以下操作：

<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 中组合起来会更容易，即使您这样做将其放入测试项目中，然后剪切+粘贴生成的故事板:-)

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>

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

回复收藏 0 原文

~没有更多了~