В WPF кто-нибудь анимировал Grid?

Question

У меня есть 2 столбца в сетке. Когда я нажимаю кнопку, я хочу, чтобы первый столбец анимировался слева от его текущей позиции до 0. Таким образом, в действительности он сворачивается, и у меня остается только просмотр одного столбца.

Answer 1

Не должно быть слишком сложно. Вам нужно создать EventTrigger с BeginStoryboard, который нацелен на сетку и использует DoubleAnimation для уменьшения ширины столбца. Пример здесь имеет похожую настройку. EventTrigger будет нажимать кнопку, а StoryBoard.Target DoubleAnimation будет указывать на 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>

Answer 2

Вам необходимо создать класс 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>

Answer 3

Проверьте эту ссылку на видео-обучение от Тодда Миранды, которая показывает вам, как анимировать высоту элемента управления сеткой. Я думаю, вы могли бы легко заставить это работать для вашего случая.

Answer 4

Вы также можете использовать элемент управления «Открой» из кевин-трюков Кевина, http://j832.com/bagotricks/

Answer 5

Еще одна вещь, которую вы можете сделать, это анимировать содержимое и настроить Grid для автоматического изменения размера содержимого, которое будет плавно изменяться при изменении размера содержимого.

Answer 6

Я взял исходный код Тодда Миранды для C # и изменил его, чтобы продемонстрировать, как анимировать сжатие и расширение ширины столбцов DataGrid.

Вот исходный код ...

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

По сути, вы нажимаете CheckBox, и в зависимости от того, какое значение столбца DataGrid имеет значение MinWidth, установленное в 0, будет уменьшено до нуля. Снова нажмите флажок, столбцы будут анимированы обратно к исходной ширине.

Этот код WPF также демонстрирует, как создавать анимацию / раскадровки в коде позади.

Answer 7

Вы также можете добиться этого с помощью анимации GridLength, см. Пример здесь http://marlongrech.wordpress.com/2007/08/20/gridlength-animation/ Используя этот подход, вы можете манипулировать любым заданным размером Grid.Column или Grid.Row.

Для вашей особой необходимости просто поместите первый столбец с Width = "Auto", а второй с *, анимируйте с содержимым внутри первого столбца - это поможет.