WPF MVVM - 信息栏滑动动画

Question

我对 WPF 的动画/图形方面非常陌生并且正在苦苦挣扎。

我有一个用户控件，它由 4 个文本框和一个按钮组成。

我希望有一个栏从控件顶部向下滑动并显示数据模板

到目前为止，我没有任何要添加的代码或示例，因为我的攻击角度如此多样。我知道我想要一个用于展开和折叠的 Storyboard，但不确定如何从 MVVM 的角度对其进行动画处理。

最好使用带有内容控件的 DockPanel 或 Stackpanel 吗？还是完全不同的东西？

任何相关的动画或 mvvm/动画教程将不胜感激。

编辑 - 添加了“粗略”的概念图像。



谢谢。
史蒂夫

Answer 1

我在 View 模型中创建了 2 个属性。
ShowPane - bool 值
PaneInfo - 类绑定(bind)到内容控件以显示显示相关信息的 DataTable。

<Control>
     <Control.Template>
           <ControlTemplate>
               <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding ShowPane}" Value="true">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(Grid.Height)" From="0" To="50" Duration="0:0:.5" AutoReverse="False"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(Grid.Height)" From="50" To="0" Duration="0:0:.5" AutoReverse="False"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                    <ContentControl DataContext="{Binding PaneInfo}" Name="InfoPanel" />
                </ControlTemplate>
            </Control.Template>
        </Control>