Silverlight 设置网格列中内容的动画

我正在尝试编写一个基本的网格布局概念证明，两列包含内容，第三列只有一个GridSplitter。最左边的列中的内容将由GridSplitter调整大小，但我还希望有一些折叠和展开按钮来收缩/增长同一列。基本上就像VisualStudio中的解决方案资源管理器一样，可以将其拖得更大，也可以取消固定，从而将其折叠

代码如下。LeftPanel是我正在尝试制作的动画。如果我在LeftPanel上设置宽度，它会设置动画，但当我拖动GridSplitter时，它不会再自动重新调整大小以填充网格列。当我从LeftPanel中禁用“宽度”或将其设置为“自动”时，它会设置动画，但不再使用GridSplitter调整大小

我研究了如何添加DependencyProperty来直接设置GridColumn的动画，但是，拖动GridSplitter会破坏它

<UserControl.Resources>
    <Storyboard x:Key="animShrink" x:Name="sbShrink">
        <DoubleAnimation Storyboard.TargetName="leftPanel" Storyboard.TargetProperty="Width" To="50" Duration="0:0:2" />
    </Storyboard>
    <Storyboard x:Key="animGrow" x:Name="sbGrow">
        <DoubleAnimation Storyboard.TargetName="leftPanel" Storyboard.TargetProperty="Width" To="200" Duration="0:0:2" />
    </Storyboard>
</UserControl.Resources>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="leftGridCol" Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0" Width="Auto" Margin="0,0,10,0" Background="Bisque" x:Name="leftPanel" >
        <Button x:Name="btnShrink" Click="Button_Shrink" Height="20" VerticalAlignment="Top">Shrink</Button>
        <Button x:Name="btnGrow" Click="Button_Grow" Height="20" Margin="0,30,0,0" VerticalAlignment="Top">Grow</Button>
    </StackPanel>
    <sdk:GridSplitter Grid.Column="0"></sdk:GridSplitter>

    <StackPanel Grid.Column="2" Background="AliceBlue"></StackPanel>
</Grid>

---

这是我能想到的最好的答案。如果有人有更好的，请告诉我

首先，去掉leftPanel的宽度，然后绑定到您自己的DependencyProperty，如上面链接中所述：

    public double LeftGridWidth {
        get { return (double)GetValue(LeftGridWidthProperty); }
        set { SetValue(LeftGridWidthProperty, value); }
    }

    public static readonly DependencyProperty LeftGridWidthProperty =
        DependencyProperty.Register("LeftGridWidth", typeof(double), typeof(MainPage), new System.Windows.PropertyMetadata(new PropertyChangedCallback(ColumnWidthChanged)));

    private static void ColumnWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){
        (d as MainPage).leftGridCol.Width = new GridLength((double)e.NewValue);
    }

然后，为了使gridSplitter不会出错，请根据需要手动调整依赖项属性：

    private void leftPanel_SizeChanged(object sender, SizeChangedEventArgs e) {
        LeftGridWidth = leftGridCol.Width.Value;
    }

---

（注意，您必须在网格列上设置初始宽度才能使其正常工作。将网格列设置为“自动”将使其混乱，因为宽度为1，会使初始布局混乱。

您可以使用ObjectAnimationUsingKeyFrames直接在列定义中设置宽度（GridLength）动画，如下所示：

<Storyboard x:Name="StoryboardLogin">
 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Width)" Storyboard.TargetName="LeftColumn">
 <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
 <DiscreteObjectKeyFrame KeyTime="0:0:0.20" Value="Auto"/>
 </ObjectAnimationUsingKeyFrames>
</Storyboard>

<Grid.ColumnDefinitions>
 <ColumnDefinition x:Name="LeftColumn" />
 <ColumnDefinition />
</Grid.ColumnDefinitions>

除非添加更多关键帧，否则不平滑，但简单

<Storyboard x:Name="StoryboardLogin">
 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Width)" Storyboard.TargetName="LeftColumn">
 <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
 <DiscreteObjectKeyFrame KeyTime="0:0:0.20" Value="Auto"/>
 </ObjectAnimationUsingKeyFrames>
</Storyboard>

<Grid.ColumnDefinitions>
 <ColumnDefinition x:Name="LeftColumn" />
 <ColumnDefinition />
</Grid.ColumnDefinitions>