在按钮单击时运行两个命令和动画

Question

在我的应用程序中，我有一个 Left Grid 和一个 Right Grid。最初，Left Grid 完全展开 (GridLength = 7*)，而 Right Grid 不可见 (Width = 0*)。

如果单击LeftGrid 中的Button 并且Right Grid 未展开，则Right Grid 应展开为Width 的3*。

如果Right Grid 被展开并且LeftGrid 中的Button 被连续点击两次，那么RightGrid 应该收缩回0* 的Width。

这些扩展/收缩应该是Animated。

当点击Button 时，必须发生三件事。

1) 所选Button 的id 应存储在ViewModel 中的Property 中。

2) 将设置RightGrid 的Width 存储在Property 中的ViewModel 中。这个Command 负责处理两个连续的点击情况。

3) 最后，Animation 应该运行。

我遇到了一些问题：

1) 如何将两个Commands 绑定到一个Button？

<Button DockPanel.Dock="Top"                        
   Command="{Binding DataContext.SetSelectedItemCommand, 
             RelativeSource={RelativeSource 
             AncestorType={x:Type ItemsControl}}}"
             CommandParameter="{Binding id}"
             Command="{Binding ElementName=root, Path=DataContext.ChangeRightGridWidthCommand}"          
>

这是不允许的。

我一直在看这篇文章 (http://www.codeproject.com/Articles/25808/Aggregating-WPF-Commands-with-CommandGroup)。

但是，我不确定这是否对我有用，因为我在 ViewModel 中定义了 Commands。

2) 我正在使用自定义 GridLength 动画类，因为我需要将 * 用于我的 Widths。

public class GridLengthAnimation : AnimationTimeline
{

    public static readonly DependencyProperty ToProperty =
    DependencyProperty.Register(
        "To", typeof(GridLength), typeof(GridLengthAnimation));

    public GridLength To
    {
        get { return (GridLength)GetValue(ToProperty); }
        set { SetValue(ToProperty, value); }
    }

    public override Type TargetPropertyType
    {
        get { return typeof(GridLength); }
    }

    protected override Freezable CreateInstanceCore()
    {
        return new GridLengthAnimation();
    }

    public override object GetCurrentValue(
        object defaultOriginValue, object defaultDestinationValue,
        AnimationClock animationClock)
    {
         return new GridLength(To.Value,
            GridUnitType.Star);
    }
}

我打算在我的XAML 中使用这样的东西：

<proj:GridLengthAnimation
          Storyboard.TargetName="rightGrid"
          Storyboard.TargetProperty="Width"
          To="RightGridWidth" Duration="0:0:2" />

<Grid.ColumnDefinitions>
      <ColumnDefinition Name="leftGrid"  Width="7*"/>
      <ColumnDefinition Name="rightGrid" Width="{Binding RightGridWidth}"/>
 </Grid.ColumnDefinitions>

我应该把上面的XAML代码放在：

  <EventTrigger RoutedEvent="Button.Click">

如果是这样，我的Commands 或EventTrigger 会先运行吗？我需要先运行我的Commands，因为只有在Storyboard 运行时，To 的值才会正确设置。

我很困惑如何将所有这些放在一起。

任何帮助/建议将不胜感激！

Answer 1

快速而肮脏地使用您已有的东西，即运行动画的 EventTrigger。

将RightGridWidth 属性（带有更改通知）添加到您的视图模型：

public GridLength RightGridWidth
{
    get { return rightGridWidth; }
    set
    {
        rightGridWidth = value;
        OnPropertyChanged("RightGridWidth");
    }
}

在SetSelectedItemCommand 的执行处理程序中切换属性值：

if (RightGridWidth.Value == 0d)
{
    RightGridWidth = new GridLength(3d, GridUnitType.Star);
}
else
{
    RightGridWidth = new GridLength(0d, GridUnitType.Star);
}

在ClickEventTrigger中运行动画：

<Button Content="Click" Command="{Binding SetSelectedItemCommand}">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <local:GridLengthAnimation
                        Storyboard.Target="{Binding ElementName=col2}"
                        Storyboard.TargetProperty="Width"
                        Duration="0:0:1" To="{Binding RightGridWidth}"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

最后，使用动画的GetCurrentValue 的工作实现，它必须返回一个取决于CurrentProgress 的值：

public override object GetCurrentValue(
    object defaultOriginValue, object defaultDestinationValue,
    AnimationClock animationClock)
{
    var from = (GridLength)defaultOriginValue;

    if (from.GridUnitType != To.GridUnitType ||
        !animationClock.CurrentProgress.HasValue)
    {
        return from;
    }

    var p = animationClock.CurrentProgress.Value;

    return new GridLength(
        (1d - p) * from.Value + p * To.Value,
        from.GridUnitType);
}

---

一个完全不同的也许更好的方法是使用视觉状态。见VisualStateManager。