21

グリッドに 2 つの列があります。ボタンをクリックすると、最初の列が現在の位置から 0 まで左にアニメーション化されるようにします。そのため、実際には折りたたまれ、1 つの列だけが表示されます。

4

6 に答える 6

16

難しすぎてはいけません。グリッドを対象とし、DoubleAnimation を使用して列幅を縮小する BeginStoryboard を持つ EventTrigger を作成する必要があります。 ここの例では、同様の設定が行われています。 EventTrigger はボタンに配置され、DoubleAnimation のStoryBoard.Targetは縮小する ColumnDefinition を指します。

さて、それはうまくいきません。列を直接縮小することはできませんが、縮小する列を塗りつぶし (width="*") に設定し、グリッドと縮小しない列の幅を設定してから、グリッド全体を縮小することができます。これは機能します。以下の例は動作します:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="Opacity Animation Example" 
      Background="White">
   <StackPanel Margin="20">
      <Grid Name="MyGrid" Width="200" HorizontalAlignment="Left">
         <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="100"/>
         </Grid.ColumnDefinitions>
         <Rectangle HorizontalAlignment="Stretch"  
                    VerticalAlignment="Stretch" 
                    Grid.Column="0" Fill="Red"/>
         <Rectangle HorizontalAlignment="Stretch"  
                    VerticalAlignment="Stretch" 
                    Grid.Column="1" Fill="Blue"/>
      </Grid>

      <Button Name="hideButton">
         <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
               <BeginStoryboard>
                  <Storyboard>
                     <DoubleAnimation 
                         Storyboard.TargetName="MyGrid"
                         Storyboard.TargetProperty="(Grid.Width)" 
                         From="200" To="100" 
                         Duration="0:0:2" 
                         AutoReverse="True"  /> 
                  </Storyboard>
               </BeginStoryboard>
            </EventTrigger>
         </Button.Triggers>
      </Button>
   </StackPanel>
</Page>
于 2008-10-13T15:13:27.857 に答える
9

GridLengthAnimationクラスを作成する必要があります（コード：http ：//windowsclient.net/learn/video.aspx？v = 70654 ）

public class GridLengthAnimation : AnimationTimeline
{
    public GridLengthAnimation()
    {
        // no-op
    }

    public GridLength From
    {
        get { return (GridLength)GetValue(FromProperty); }
        set { SetValue(FromProperty, value); }
    }

    public static readonly DependencyProperty FromProperty =
      DependencyProperty.Register("From", typeof(GridLength), typeof(GridLengthAnimation));

    public GridLength To
    {
        get { return (GridLength)GetValue(ToProperty); }
        set { SetValue(ToProperty, value); }
    }

    public static readonly DependencyProperty ToProperty =
        DependencyProperty.Register("To", typeof(GridLength), typeof(GridLengthAnimation));

    public override Type TargetPropertyType
    {
        get { return typeof(GridLength); }
    }

    protected override Freezable CreateInstanceCore()
    {
        return new GridLengthAnimation();
    }

    public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock)
    {
        double fromValue = this.From.Value;
        double toValue = this.To.Value;

        if (fromValue > toValue)
        {
            return new GridLength((1 - animationClock.CurrentProgress.Value) * (fromValue - toValue) + toValue, this.To.IsStar ? GridUnitType.Star : GridUnitType.Pixel);
        }
        else
        {
            return new GridLength((animationClock.CurrentProgress.Value) * (toValue - fromValue) + fromValue, this.To.IsStar ? GridUnitType.Star : GridUnitType.Pixel);
        }
    }
}

そして、RowDefinition/ColumnDefinitionのストーリーボード。

<Window.Resources>
    <Storyboard x:Key="ColumnAnimation">
        <Animations:GridLengthAnimation
            BeginTime="0:0:0"
            Duration="0:0:0.1"
            From="0*"
            Storyboard.TargetName="ColumnToAnimate"
            Storyboard.TargetProperty="Width"
            To="10*" />
    </Storyboard>

</Window.Resources>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition x:Name="ColumnToAnimate" Width="0*" />
    </Grid.ColumnDefinitions>
</Grid>
于 2012-09-27T20:36:12.710 に答える
2

グリッドコントロールの高さをアニメーション化する方法を示す、ToddMirandaのこのビデオトレーニングリンクを確認してください。私はあなたがあなたのケースのためにそれを簡単に機能させることができると思います。

于 2008-10-16T13:56:25.327 に答える
1

もう 1 つの方法は、コンテンツをアニメーション化し、グリッドをコンテンツに合わせて自動サイズ設定することです。これにより、コンテンツのサイズが変化してもスムーズに処理されます。

于 2008-10-13T17:00:50.247 に答える
0

GridLengthアニメーションでもこれを実現できます。ここで例を参照してくださいhttp://marlongrech.wordpress.com/2007/08/20/gridlength-animation/ このアプローチを使用すると、任意のGrid.ColumnまたはGrid.Rowサイズを操作できます。

特別なニーズがある場合は、最初の列にWidth = "Auto"を配置し、2番目に*を配置して、最初の列内のコンテンツのwithをアニメーション化します。これでうまくいきます。

于 2008-10-13T18:27:39.090 に答える
0

Todd Miranda の C# ソース コードを使用して修正し、DataGrid の列幅の縮小と拡大をアニメーション化する方法を示しました。

これがソースコードです...

http://www.pocketpctoolkit.com/WPF/DataGridColumnWidthAnimation.zip

基本的に、CheckBox をクリックすると、"MinWidth" 値が 0 に設定されている DataGrid 列がゼロ幅に縮小されます。チェックボックスをもう一度クリックすると、列が元の幅に戻ります。

この WPF コードは、コード ビハインドでアニメーション/ストーリーボードを作成する方法も示しています。

于 2010-07-09T11:16:58.953 に答える