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

Ответ 1

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

Ответ 2

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

Ответ 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>

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Здесь исходный код...

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

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

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