Question

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

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

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

DataTrigger只是说：如果ShowGrid = true，那么visibility =“Visible”。没什么好看的。

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

Answer 1

此实现有多种变体。我会这样做的。我将创建一个附加依赖项属性，该属性设置为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 setting the left value

Animation limited by panel

How to clear the contents of a PasswordBox when login fails without databinding?

How to inherit Button behaviour in WPF style?

Quit application from a user Control

滑动覆盖面板

1 个答案: