XAML make animation smooth

Question

I'm animating a GridColumn width property ( GridLength ) with an ObjectAnimationUsingKeyFrames . My question is, is it possible to make the animation run smooth.

<Storyboard
    x:Name="HideOptionsExpandDetails">
    <ObjectAnimationUsingKeyFrames
        Duration="0:0:0.5"
        Storyboard.TargetName="col1"
        Storyboard.TargetProperty="Width">
        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
            <DiscreteObjectKeyFrame.Value>
                <GridLength>0</GridLength>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</StoryBoard>

Basically this animation is supposed to make the GridLength property go from 300 to 0 smoothly over a period of 0.5 seconds. But it simply goes from 300 to 0 on the 5th milisecond.

Answer 1

That's how the ObjectAnimationUsingKeyFrames works though. Since the Width is a GridLength type, we can't use some built-in animation like DoubleAnimation.

So what you could do is to the Width of content instead like this:

<Page
    x:Class="stofSmoothAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:stofSmoothAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="redBorder">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="col1" Width="Auto"/>
            <ColumnDefinition Width="300"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border x:Name="redBorder" Background="Red" Width="300"/>
        <Border Background="White" Grid.Column="1"/>
        <Border Background="Black" Grid.Column="2">
            <Button x:Name="reduceGridWidth" Click="reduceGridWidth_Click"
                    HorizontalAlignment="Center">
                Button
            </Button>
        </Border>
    </Grid>
</Page>

Or you could do animation yourself by handling the CompositionTarget.Rendering event like this:

private void reduceGridWidth_Click(object sender, RoutedEventArgs e)
{
    // start handling event
    CompositionTarget.Rendering += CompositionTarget_Rendering;
}

void CompositionTarget_Rendering(object sender, object e)
{
    col1.Width = new GridLength(col1.Width.Value - 20);

    // when the Width hits zero, we stop handling event
    if (col1.Width.Value == 0)
    {
        CompositionTarget.Rendering -= CompositionTarget_Rendering;
    }
}

Hope this helps!