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

Question

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

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

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

Во-первых, возьмите ширину от 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, испортил исходный макет.

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> 

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