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

Question

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

Answer 1

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

Answer 2

Не должно быть слишком сложно. Вам нужно будет создать EventTrigger, у которого есть BeginStoryboard, который нацелен на сетку и использует DoubleAnimation для сокращения ширины столбца. The example here has a similar setup. 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 3

Другая вещь, которую вы можете сделать, это анимировать содержимое и установить сетку для Autosize к содержимому которой он будет делать гладко, как размер содержимого изменяется.

Answer 4

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

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

Answer 5

Вы также можете использовать управление Reveal из мешка-о-трика Кевина, http://j832.com/bagotricks/

Answer 6

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

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

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

В принципе, вы нажимаете на CheckBox, и какая-либо столбцы DataGrid имеют их значение «MinWidth» установлено значение 0, будет уменьшен до нулевой ширины. Еще раз нажмите CheckBox, столбцы будут обновлены до их первоначальной ширины.

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

Answer 7

Вам нужно создать класс 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>