グリッド列内のコンテンツをアニメ化する

Question

グリッドレイアウトを持つための基本概念証明書を作成しようとしています.2つの列に内容があり、3列目にGridSplitterのみがあります。一番左の列の内容はGridSplitterによってサイズが変更されますが、でもには、この同じ列を縮小/拡大するいくつかの折りたたみと展開ボタンがあります。基本的には、ビジュアルスタジオのソリューションエクスプローラのように、大きなものをドラッグするか、または単にピンを解除して折り畳むことができます。

コードは次のとおりです。 LeftPanelは私がアニメーション化しようとしているものです。 LeftPanelでWidthを設定すると、グリッドスプリッタをドラッグするとグリッド列を塗りつぶすように自動的にサイズ変更されなくなります。 LeftPanelからWidthを外すか、またはAutoに設定すると、それはアニメーション化されますが、GridSplitterでサイズ変更されなくなりました。

私はGridColumnを直接アニメーション化するためにDependencyPropertyを追加することについてこのpostを見ましたが、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

ここで私が思い付くことができる最高の答えです。誰かがより良いものを持っているなら、私に知らせてください。手動での調整、gridSplitterは物事を台無しにしないように取得するために、次に

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); 
    } 

：

まず、上記のリンクで説明したように、その後、あなた自身のDependencyPropertyに結合し、leftPanelオフ幅を取ります依存関係プロパティ必要に応じて：

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

（ノート、あなたはこれを動作させるためのグリッド列の初期幅を設定する必要がAutoにグリッド列を設定します混乱これまで、幅が1のように伝わってくることから、。最初のレイアウトを乱す

0あなたが使用することができます

Answer 2

あなたが直接このような列の定義に幅（GridLength）をアニメーション化するObjectAnimationUsingKeyFramesを使用することができます。

<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> 

あなたはより多くのキーフレームを追加しない限り、滑らかな、しかし単純ではありません。