1

我在我的视图中设置了一个 ItemsControl，它会生成可点击的项目（呃！）。当用户单击/选择其中一个项目时，我希望面板/网格从左向右滑动并覆盖（占据整个空间）。如何通过带有幻灯片动画的 MVVM 实现这一点？我知道如何对其进行编码，以便网格显示正确的数据，并且所有这些都通过设置样式 DataTrigger 来实现，但它只是看起来很可怕，没有动画什么的。

PS：因为有些人会问，我只是在我的 ViewModel 中设置了一个新的 bool 项，例如：

public bool ShowGrid
{
    get { return _showGrid; }
    set
    {
        _showGrid = value;
        NotifyOfPropertyChange(() => ShowGrid);
    }
}

DataTrigger 只是说：如果 ShowGrid = true 则 visibility="Visible"。没有什么花哨。

如何对此进行编码，以便当 DataTrigger 知道显示/隐藏网格时，它会将其滑入/滑出？

4

1 回答 1

0

此实现有多种变体。我会这样做的。我会创建一个附加的依赖属性，该属性设置为True，当您单击一个项目时会触发该事件。根据DataTrigger依赖属性，动画会显示滑动动画。

附加依赖属性示例：

public static class PanelBehaviors
{
    public static void SetIsSliding(DependencyObject target, bool value)
    {
        target.SetValue(IsSlidingProperty, value);
    }

    public static readonly DependencyProperty IsSlidingProperty =
                                              DependencyProperty.RegisterAttached("IsSliding",
                                              typeof(bool),
                                              typeof(PanelBehaviors),
                                              new UIPropertyMetadata(false, OnIsSliding));

    private static void OnIsSliding(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        if (e.NewValue is bool && ((bool)e.NewValue) == true)
        {
            // You can do the operations on the object for which the property is set,
            // for example, for panel - set Visible
        }
    }
}

在后面的代码中（例如：在事件处理程序中），您可以为附加的依赖属性设置值，如下所示：

PanelBehaviours.SetIsSliding(SomeControl, Value // True or False);

或在 XAML 中：

<SomeControl local:PanelBehaviours.SetIsSliding="True" ... />

在OnIsSliding你可以应用动画，但我会在 XAML 方面做。显示面板可以通过依赖属性或动画在侧面完成。

DataTrigger幻灯片动画示例：

<DataTrigger Binding="{Binding ElementName=MyPanel, Path=(local:MyDependencyClass.IsSliding), Mode=OneWay}" Value="True">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <!-- Here you can show the panel, or use additional animation -->
                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="MyPanel" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                        <DiscreteObjectKeyFrame.Value>
                            <VerticalAlignment>Bottom</VerticalAlignment>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>
</DataTrigger>

在 WPF 中没有动画对齐，唯一能出现的就是它ThicknessAnimation（使用Margin）。但是您可以使用DiscreteObjectKeyFrame来设置对齐方式。以上是Panel在底部设置 VerticalAlignment 的简单演示。

原则上，所有这些选项都不应与 MVVM 模式相矛盾。

请查看我的附加属性和对齐动画的实现示例：

wpf ObjectAnimationUsingKeyFrames 设置左值

动画受面板限制

如何在没有数据绑定的情况下登录失败时清除 PasswordBox 的内容？

如何继承 WPF 样式中的按钮行为？

从用户控件退出应用程序

于 2013-10-06T10:53:19.677 回答