c# - 滑动覆盖面板

我在 View 中设置了ItemsControl，它会生成可单击的项目(duh!)。当用户单击/选择其中一个项目时，我希望面板/网格从左向右滑动并覆盖(占据整个空间)。如何通过带有幻灯片动画的MVVM实现此目的？我知道如何进行编码，以便通过设置样式DataTrigger来使网格显示正确的数据，但由于它看起来像是可怕的，所以没有动画。

PS:由于有人会问，我只是在ViewModel中设置了一个新的bool项，例如:

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

而DataTrigger只是说:如果ShowGrid = true，则可见性=“Visible”。没有什么花哨。

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

最佳答案

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

关于c# - 滑动覆盖面板，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19203398/