C# 滑动覆盖板

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

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

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

DataTrigger只是说：如果ShowGrid=true，那么visibility=Visible。没什么特别的

---

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

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

附加的依赖项属性的示例：

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" ... />

在WPF中，没有动画对齐，唯一能出现的是使用边距的ThicknessAnimation。但是可以使用DiscreteObjectKeyFrame设置对齐。上面是面板在底部设置垂直对齐的简单演示

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

请参阅我的带有附加属性和对齐动画的实现示例：

---

惊人的编码。在那里我学到了很多

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