CODEWITHSUNDEEP
wpfxaml
Milos
Milos

Reputation: 1465

How to animate Grid row Height

I have example code that looks like this.

<ItemsControl ItemsSource="{Binding MyDataCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.Style>
                    <Style TargetType="Grid">
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <!--<DoubleAnimation Duration="0:0:0.100" Storyboard.Target="(Grid.RowDefinitions[2])"  Storyboard.TargetProperty="Height" From="10" To="0" />-->
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="10"/>
                </Grid.RowDefinitions>
                <Image Source="{Binding CurrentImage}" Grid.Row="0" Stretch="Uniform" />
                <TextBlock Grid.Row="1" Text="{Binding Title}" TextAlignment="Center" FontSize="16" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

I'm trying to animate row Height on MouseEnter event. What will be the right syntax to set Storyboard.Target in xaml?

Upvotes: 0

Views: 3574

Answers (3)

Sbfam 22
Sbfam 22

Reputation: 91

This is simply done with a Rectangle and Binding,

    <Grid x:Name="Home">

        <Grid.RowDefinitions>

            <RowDefinition Height="*"/>
            <RowDefinition Height="{Binding ActualHeight, ElementName=CurrentHeight}"/>

        </Grid.RowDefinitions>

        <Grid.Resources>

            <Storyboard x:Key="Hide">
                <DoubleAnimation Duration="0:0:1" Storyboard.TargetName="CurrentHeight" Storyboard.TargetProperty="Height" From="100" To="0"/>
            </Storyboard>

            <Storyboard x:Key="Show">
                <DoubleAnimation Duration="0:0:1" Storyboard.TargetName="CurrentHeight" Storyboard.TargetProperty="Height" From="0" To="100"/>
            </Storyboard>

        </Grid.Resources>

        <Button Click="Button_Click" HorizontalAlignment="Center" VerticalAlignment="Center" Height="100" Width="100" Background="Blue" Content="Hide Show"/>

        <Rectangle Name="CurrentHeight" Height="100" Width="Auto" Fill="Red" Grid.Row="1"/>

    </Grid>

Basically, we want to bind the Height of the Grid Row with the Rectangles Height, this way we can use DoubleAnimation on the Rectangle and the Grids Height Will Follow.

Let's Take A Look At The Behind Code In C#

    public MainWindow()
    {
            InitializeComponent();
            Start();
    }

    public Storyboard OpenAnimation { get; set; }
    public Storyboard CloseAnimation { get; set; }

    private void Start()
    {

       CurrentHeight.Height = 0;

       OpenAnimation = Home.FindResource("Show") as Storyboard;

       CloseAnimation = Home.FindResource("Hide") as Storyboard;

    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
         if(CurrentHeight.Height == 0)
           BeginStoryboard(OpenAnimation);

          if (CurrentHeight.Height == 100)
           BeginStoryboard(CloseAnimation);

    }

So now when you edit/Animate the Rectangle the Binded Height of the Grid will follow, this way we can use Double Animation on the rectangle without throwing an error and making our animations look smooth as butter!

~~Shawn J B

Upvotes: 1

Iron
Iron

Reputation: 946

Just use ObjectAnimationUsingKeyFrames to have a try. You should define more key frames to make the animation smooth.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition x:Name="SecondRow" Height="30"/>
        <RowDefinition Height="10"/>
    </Grid.RowDefinitions>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="UIElement.MouseEnter">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0:0:2.000" Storyboard.TargetName="SecondRow" Storyboard.TargetProperty="Height">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.000">
                                <DiscreteObjectKeyFrame.Value>
                                    <GridLength>30</GridLength>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.500">
                                <DiscreteObjectKeyFrame.Value>
                                    <GridLength>32</GridLength>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="0:0:1.000">
                                <DiscreteObjectKeyFrame.Value>
                                    <GridLength>50</GridLength>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="0:0:1.500">
                                <DiscreteObjectKeyFrame.Value>
                                    <GridLength>60</GridLength>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="0:0:2.000">
                                <DiscreteObjectKeyFrame.Value>
                                    <GridLength>60</GridLength>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Grid.Triggers>
    <Rectangle Grid.Row="1" Fill="LightBlue"/>
</Grid>

Upvotes: 2

mm8
mm8

Reputation: 169150

You can't animate the Height of a RowDefinition using a DoubleAnimation because the property is of type GridLength.

You could write a custom animation class as suggested here though: https://www.codeproject.com/Articles/18379/WPF-Tutorial-Part-Writing-a-custom-animation-cla.

Animating Grid Column or Grid Row in XAML?

In WPF, has anybody animated a Grid?

What if I place some custom control in third row definition and make it like this . Will be I able to animate Height of this custom control to achieve the same effect?

You could try something like this:

<DoubleAnimation Duration="0:0:0.100"
                 Storyboard.Target="{Binding Children[2]}"
                 Storyboard.TargetProperty="Height" 
                 From="0" To="100" />

Upvotes: 0

Related Questions