Question

我正在尝试为网格布局编写一个基本的概念验证，其中包含两列内容，另外还有一个只有GridSplitter的第三列。最左边一列中的内容将由GridSplitter调整大小，但我也喜欢有一些折叠和展开按钮缩小/增长同一列。基本上就像Visual Studio中的解决方案资源管理器一样，它可以被拖得更大，或者只是取消固定，这会使它崩溃。

代码如下。 LeftPanel是我想要动画的东西。如果我在LeftPanel上设置了一个宽度，它会动画，但在我拖动GridSplitter时不再自动重新调整大小以填充网格列。当我从LeftPanel中取消Width，或将其设置为Auto时，它会动画，但不再使用GridSplitter调整大小。

我查看了这个post关于添加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>

处理程序

private void Button_Grow(object sender, RoutedEventArgs e) {
    sbGrow.Begin();
}

private void Button_Shrink(object sender, RoutedEventArgs e) {
    sbShrink.Begin();
}

Answer 1

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

首先，取宽度offPanel，然后绑定到您自己的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，弄乱了初始布局。

Answer 2

您可以使用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>

除非您添加更多关键帧，否则不顺畅。

在网格列中设置动画内容

2 个答案: