UserControl XAML Animation

Question

I am trying to animate the opening of UserControl without any luck and wondered if anyone can help?

I have a UserControl that simply stores information about a record. It opens like a window on an existing page, however I would like the box to open with simple animation. I am trying to open a window with expanding animation instead of the window that appears.

Below is the code I was working on.

<UserControl Name="RecordViewerUserControl" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="VisionWare.MasterDataServices.Silverlight.UI.Common.RecordViewer" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:conv="clr-namespace:VisionWare.MasterDataServices.Silverlight.UI.Converters" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" Height="490" Width="600" Margin="0,0,0,0"> <UserControl.Resources> <conv:DateConverter x:Key="dateConverter" /> <conv:BoolToVisibilityConverter x:Key="visibilityConverter" /> <conv:EntityIdToUrlConverter x:Key="urlConverter"/> <conv:FileConverter x:Key="fileConverter"/> <conv:AlertImageURLConverter x:Key="alertConverter"/> <Style TargetType="UserControl" x:Key="CustomUserControlStyle"> <Setter Property="Effect"> <Setter.Value> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX"> <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" /> <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05" /> <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY"> <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" /> <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05" /> <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </Setter.Value> </Setter> </Style> </UserControl.Resources> 

I changed my code as recommended by @jrb ...]

 <UserControl.Triggers> <EventTrigger RoutedEvent="UserControl.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="RecordViewerUserControl" Storyboard.TargetProperty="Width" To="600"/> <DoubleAnimation Storyboard.TargetName="RecordViewerUserControl" Storyboard.TargetProperty="Height" To="490"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </UserControl.Triggers> 

I inserted this right after the initial UserControl tag. He no longer complains when the application starts, however it does not seem to have an effect.

Any ideas? Am I missing something in the code?

Answer 1

I suggest you check the size setting on usercontrol to 1, then use the loaded event trigger (I think) and a simple double increase to increase the size of the control.

 <EventTrigger RoutedEvent="Loaded"> 

This is a working example, you can check it in kaxaml.

 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="1" Height="1" Background="Black"> <Page.Triggers> <EventTrigger RoutedEvent="Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Width" To="200"/> <DoubleAnimation Storyboard.TargetProperty="Height" To="200"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Page.Triggers> <Grid> </Grid> </Page> 

Answer 2

I think your animation values ​​are incorrect, in the end you should have a value of 1 (100% size), not 0.

Why do you animate the first child of LayoutRoot? Instead, you should have RecordViewerUserControl as the animation target.