Анимированное содержимое в столбце сетки

Question

Я пытаюсь написать базовое подтверждение концепции наличия сетки, с двумя столбцами с содержимым в них, а также с третьим столбцом, в котором есть только GridSplitter. Размер содержимого в крайнем левом столбце будет изменен с помощью GridSplitter, но я бы также хотел бы иметь некоторые кнопки свертывания и развертывания, которые уменьшают / увеличивают этот же столбец. В основном, как Solution Explorer в visual studio, который можно перетаскивать больше или просто откреплять, что приводит к его свертыванию.

Код ниже. LeftPanel - это то, что я пытаюсь оживить. Если я установил Width на LeftPanel, он анимируется, но больше не изменяет размеры автоматически, чтобы заполнить столбец сетки, когда я перетаскиваю GridSplitter вокруг. И когда я отключаю Width от LeftPanel или устанавливаю его на Auto, он анимируется, но больше не изменяет размеры с помощью 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>

Обработчики

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

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

Answer 1

Вот лучший ответ, который я мог придумать.Если у кого-то есть лучше, пожалуйста, дайте мне знать.

Сначала снимите ширину с левой панели, затем привяжите к своему собственному 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>

Не гладко, если вы не добавите больше ключевых кадров, но просто.