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

Question

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

Answer 1

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

Answer 2

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

Хорошо, так что это не так хорошо работает. Вы не можете сжать столбец напрямую, но вы МОЖЕТЕ установить уменьшающий столбец для заполнения (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 3

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

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

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

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