滑动覆盖面板

Question

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

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

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

DataTrigger 只是说：如果 ShowGrid = true 则可见性 =“Visible”。没什么特别的。

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

Answer 1

此实现有多种变体。我会这样做的。我将创建一个 attached 依赖属性，该属性设置为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在Bottom中设置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