В WPF кто-нибудь анимировал Grid?
Вопрос
У меня есть 2 столбца в сетке. Когда я нажимаю кнопку, я хочу, чтобы первый столбец анимировался слева от его текущей позиции до 0. Таким образом, в действительности он сворачивается, и у меня остается только просмотр одного столбца.
Решение
Ознакомьтесь с этой ссылкой на видео-обучение от Тодда Миранды, которая показывает вам как анимировать высоту элемента управления сеткой. Я думаю, вы могли бы легко заставить это работать для вашего случая. Р>
Другие советы
Не должно быть слишком сложно. Вам нужно создать 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>
Вам необходимо создать класс 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>
Еще одна вещь, которую вы можете сделать, это анимировать содержимое и настроить Grid для автоматического изменения размера содержимого, которое будет плавно изменяться при изменении размера содержимого.
Вы также можете использовать элемент управления «Выявить» из кевинских сумок, http://j832.com/bagotricks. / р>
Этого также можно добиться с помощью анимации GridLength, см. пример здесь http : //marlongrech.wordpress.com/2007/08/20/gridlength-animation/ Используя этот подход, вы можете манипулировать любым размером Grid.Column или Grid.Row. Р>
Для вашей особой необходимости просто поместите первый столбец с шириной = " Авто " и затем с помощью *, анимируйте содержимое содержимого внутри первого столбца - это поможет.
Я взял исходный код Тодда Миранды для C # и изменил его, чтобы продемонстрировать, как анимировать уменьшение ширины столбца DataGrid и его увеличение. расширения.
Вот исходный код ...
http://www.pocketpctoolkit.com/WPF/DataGridColumnWidthAnimation.zip р>
По сути, вы нажимаете на CheckBox, и в зависимости от того, какие столбцы DataGrid имеют свою "MinWidth" значение 0 будет уменьшено до нулевой ширины. Снова нажмите флажок, столбцы будут анимированы обратно к исходной ширине.
Этот код WPF также демонстрирует, как создавать анимации / раскадровки в коде позади. Р>