none
Animation of usercontrol change!! RRS feed

  • Question

  • Hi everyone/Andy/Magnus,

    I am trying to animate the usercontrol change. Meaning, I have one mainwindow whose content will be given usercontrols. In short, in one mainwindow, i will be switching many usercontrols by giving mainwindow.content = new usercontrol(). Now, when the user control changes, I want to animate the change, like usercontrol slowly appears or usercontrol appears like we turn the square etc. Can i achieve this with storyboard? or do I have to go with different approach..??

    As per my knowledge, animation is possible to elements inside usercontrol like button, charts etc. I doubt whether i can apply animation to whole usercontrol itself. Correct me if I am wrong!!

    Regards,

    Rakesh.N


    Rakesh murthy


    • Edited by Rakkk Monday, June 29, 2015 9:26 AM
    Monday, June 29, 2015 9:24 AM

Answers

  • >>Now, when the user control changes, I want to animate the change, like usercontrol slowly appears or usercontrol appears like we turn the square etc. Can i achieve this with storyboard? or do I have to go with different approach..??

    You could animate the Opacity property of the UserControl using an EventTrigger:

    <UserControl x:Class="WpfApplication9.UserControl5"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300" Opacity="0" Background="Green">
        <UserControl.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                  Storyboard.TargetProperty="Opacity"
                  From="0.0" To="1.0" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </UserControl.Triggers>
        <Grid>
            <TextBlock Text="Text..." FontSize="20"/>
        </Grid>
    </UserControl>

    Then it will appear slowly. You could change the duration of the DoubleAnimation to make it appear event slower (or faster).

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Marked as answer by Rakkk Monday, June 29, 2015 10:47 AM
    Monday, June 29, 2015 10:34 AM
  • >>Now, when the user control changes, I want to animate the change, like usercontrol slowly appears or usercontrol appears like we turn the square etc. Can i achieve this with storyboard? or do I have to go with different approach..??

    You could animate the Opacity property of the UserControl using an EventTrigger:

    <UserControl x:Class="WpfApplication9.UserControl5"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300" Opacity="0" Background="Green">
        <UserControl.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                  Storyboard.TargetProperty="Opacity"
                  From="0.0" To="1.0" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </UserControl.Triggers>
        <Grid>
            <TextBlock Text="Text..." FontSize="20"/>
        </Grid>
    </UserControl>

    Then it will appear slowly. You could change the duration of the DoubleAnimation to make it appear event slower (or faster).

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Magnus, 

    This works perfectly fine. But, since my mainwindow background, usercontrol background are transparent. Hence, going with your code is there any way to apply slide effect or any other effect which shows transparent user control appear in attractive way? (my usercontrol has buttons, labels etc only background is transparent thats it.) 

    I tried this

    <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="1014" Duration="0:0:2" />
                        <DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="735" Duration="0:0:2" />

    But, my usercontrol is not occupying entire mainwindow. (Mainwindow windowstate=maximized)

    Is there anyway to give the mainwindows window size to the width and height of doubleanimation tag?


    Rakesh murthy

    • Marked as answer by Rakkk Friday, July 3, 2015 2:35 PM
    Monday, June 29, 2015 11:17 AM

All replies

  • You could flip a control whose content is your 2 usercontrols with one on each side.

    I'd advise against that if they navigate a lot though.

    It gets old pretty quick that one.

    .

    In fact I've been asked to put such transitions in....

    Then take them back out.

    .

    I'd suggest you slide the old one off and the new one in.

    Put 2 contentcontrols on a canvas.

    Animate both left or fade the original and slide the next over it.

    You can get a reference to the animation and change which it's targeting.

    If you take a look at how the marquee effect in this works:

    https://gallery.technet.microsoft.com/WPF-User-Notification-MVVM-98940828

    It moves the entire canvas.

    You'd move the contentcontrols.

    Which means you'd want the transform on those.

    Or...

    You could have a contentcontrol on top of another contentcontrol.

    Animate the scale of the top one from 0 to 1 so it grows.

    Perhaps fade the back one as you do.

    Once it's full size..

    Set the opacity of the back one to full, take your new usercontrol out the top contentcontrol and stick it in the back one, set the scale of the front one to 0.

    Notice also how the Toast works in that sample.


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles

    Monday, June 29, 2015 9:45 AM
    Moderator
  • You could flip a control whose content is your 2 usercontrols with one on each side.

    I'd advise against that if they navigate a lot though.

    It gets old pretty quick that one.

    .

    In fact I've been asked to put such transitions in....

    Then take them back out.

    .

    I'd suggest you slide the old one off and the new one in.

    Put 2 contentcontrols on a canvas.

    Animate both left or fade the original and slide the next over it.

    You can get a reference to the animation and change which it's targeting.

    If you take a look at how the marquee effect in this works:

    https://gallery.technet.microsoft.com/WPF-User-Notification-MVVM-98940828

    It moves the entire canvas.

    You'd move the contentcontrols.

    Which means you'd want the transform on those.

    Or...

    You could have a contentcontrol on top of another contentcontrol.

    Animate the scale of the top one from 0 to 1 so it grows.

    Perhaps fade the back one as you do.

    Once it's full size..

    Set the opacity of the back one to full, take your new usercontrol out the top contentcontrol and stick it in the back one, set the scale of the front one to 0.

    Notice also how the Toast works in that sample.


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles

    Hello Andy,

    Well, I couldnt follow you completely andy. I understood that u suggested me to put slide animation. Do you have any sample code for example 1 mainwindow and 2 usercontrols. so when application begins, 1st usercontrols is show with some animated effects and when i click on the button on usercontrol 1, main window shows usercontrol 2 again with animation effect. If you have simple sample code, please share with me... it would be of great break through for me.

    Thanks andy.


    Rakesh murthy

    Monday, June 29, 2015 10:05 AM
  • >>Now, when the user control changes, I want to animate the change, like usercontrol slowly appears or usercontrol appears like we turn the square etc. Can i achieve this with storyboard? or do I have to go with different approach..??

    You could animate the Opacity property of the UserControl using an EventTrigger:

    <UserControl x:Class="WpfApplication9.UserControl5"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300" Opacity="0" Background="Green">
        <UserControl.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                  Storyboard.TargetProperty="Opacity"
                  From="0.0" To="1.0" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </UserControl.Triggers>
        <Grid>
            <TextBlock Text="Text..." FontSize="20"/>
        </Grid>
    </UserControl>

    Then it will appear slowly. You could change the duration of the DoubleAnimation to make it appear event slower (or faster).

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Marked as answer by Rakkk Monday, June 29, 2015 10:47 AM
    Monday, June 29, 2015 10:34 AM
  • No problem.

    Download the sample.

    You will want some of the code in there to get a reference to and manipulate the storyboard settings.

    It changes the "To" value dynamically in the code behind.

    Here's a rough idea of the sliding in.

    You will also have to switch the content around and stuff for the second go, but it'll give you a clearer idea of what I'm on about.

    <Window x:Class="wpf_Slide_In.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
        <Storyboard x:Key="SlideIn">
            <DoubleAnimation From="0" To="-505" 
                                 Duration="00:00:4"
                                 Storyboard.TargetProperty="X"
                                 Storyboard.TargetName="TopTransform" 
                                 />
        </Storyboard>
        </Window.Resources>
        <Grid>
            
    
            <Canvas
                    TextBlock.Foreground="Red">
                <ContentControl Name="Bottom" Canvas.Left="0"
                              Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}" 
                               Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}" 
                                >
                    <Rectangle Fill="Blue"
    
                               />
                </ContentControl>
                <ContentControl Name="Top"
                           Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}" 
                           Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}"   
                           Canvas.Left="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
                    <ContentControl.RenderTransform>
                        <TranslateTransform x:Name="TopTransform" X="0"/>
                    </ContentControl.RenderTransform>
                    <Rectangle Fill="Red"
     
                               />
                                
                </ContentControl>
            </Canvas>
            <Button Height="30" Click="Button_Click">Slide in</Button>
        </Grid>
    </Window>

    and

        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Storyboard slidein = this.Resources["SlideIn"] as Storyboard;
                slidein.Begin();
            }
        }


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles

    Monday, June 29, 2015 10:34 AM
    Moderator
  • No problem.

    Download the sample.

    You will want some of the code in there to get a reference to and manipulate the storyboard settings.

    It changes the "To" value dynamically in the code behind.

    Here's a rough idea of the sliding in.

    You will also have to switch the content around and stuff for the second go, but it'll give you a clearer idea of what I'm on about.

    <Window x:Class="wpf_Slide_In.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
        <Storyboard x:Key="SlideIn">
            <DoubleAnimation From="0" To="-505" 
                                 Duration="00:00:4"
                                 Storyboard.TargetProperty="X"
                                 Storyboard.TargetName="TopTransform" 
                                 />
        </Storyboard>
        </Window.Resources>
        <Grid>
            
    
            <Canvas
                    TextBlock.Foreground="Red">
                <ContentControl Name="Bottom" Canvas.Left="0"
                              Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}" 
                               Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}" 
                                >
                    <Rectangle Fill="Blue"
    
                               />
                </ContentControl>
                <ContentControl Name="Top"
                           Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}" 
                           Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}"   
                           Canvas.Left="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
                    <ContentControl.RenderTransform>
                        <TranslateTransform x:Name="TopTransform" X="0"/>
                    </ContentControl.RenderTransform>
                    <Rectangle Fill="Red"
     
                               />
                                
                </ContentControl>
            </Canvas>
            <Button Height="30" Click="Button_Click">Slide in</Button>
        </Grid>
    </Window>

    and

        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Storyboard slidein = this.Resources["SlideIn"] as Storyboard;
                slidein.Begin();
            }
        }


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles

    Thanks a lot andy and Magnus,

    Your code indeed gave me some idea. However, Magnus answer readily suited my exisiting code and solved the problem. 

    However, can you throw some light on how can i have slide animation in Magnus code?

    I added these lines 

    <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="1014" Duration="0:0:2" />
                        <DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="735" Duration="0:0:2" />

    However, after animation, my usercontrol is not occupying complete 735 * 1014 space of my mainwindow


    Rakesh murthy

    Monday, June 29, 2015 10:52 AM
  • If magnus' approach suits you so well, why are you using the slide animation?

    The code in the sample I linked dynamically updates the "To" value on the animation.

    It copes with resizing the window.


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles

    Monday, June 29, 2015 11:00 AM
    Moderator
  • If magnus' approach suits you so well, why are you using the slide animation?

    The code in the sample I linked dynamically updates the "To" value on the animation.

    It copes with resizing the window.


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles

    Exactly Andy, 

    My animation on width and height is not occupying maximized window screen. I have set mainwindow windowstate as maximized. however, when i apply animation on width and height of my usercontrol. its not occupying maximized window size. 

    To follow you code andy, I really dont have anything on mainwindow xaml except content control in mainwindow xaml. How will the storyboard be applied on the usercontrol ? in your code?


    Rakesh murthy

    Monday, June 29, 2015 11:08 AM
  • >>Now, when the user control changes, I want to animate the change, like usercontrol slowly appears or usercontrol appears like we turn the square etc. Can i achieve this with storyboard? or do I have to go with different approach..??

    You could animate the Opacity property of the UserControl using an EventTrigger:

    <UserControl x:Class="WpfApplication9.UserControl5"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300" Opacity="0" Background="Green">
        <UserControl.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                  Storyboard.TargetProperty="Opacity"
                  From="0.0" To="1.0" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </UserControl.Triggers>
        <Grid>
            <TextBlock Text="Text..." FontSize="20"/>
        </Grid>
    </UserControl>

    Then it will appear slowly. You could change the duration of the DoubleAnimation to make it appear event slower (or faster).

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Magnus, 

    This works perfectly fine. But, since my mainwindow background, usercontrol background are transparent. Hence, going with your code is there any way to apply slide effect or any other effect which shows transparent user control appear in attractive way? (my usercontrol has buttons, labels etc only background is transparent thats it.) 

    I tried this

    <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="1014" Duration="0:0:2" />
                        <DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="735" Duration="0:0:2" />

    But, my usercontrol is not occupying entire mainwindow. (Mainwindow windowstate=maximized)

    Is there anyway to give the mainwindows window size to the width and height of doubleanimation tag?


    Rakesh murthy

    • Marked as answer by Rakkk Friday, July 3, 2015 2:35 PM
    Monday, June 29, 2015 11:17 AM
  • If you're going to slide something in then you need 2 contentcontrols if you want to see both, one if you want to see just one.

    The canvas allows you to have something offscreen easily.

    Your usercontrols are equivalent to the rectangles.

    You switch the usercontrols in and out as content of the contentcontrol.

    Animate the contentcontrol.

    So long as you let them, the usercontrols will fill the contentcontrol they are in.


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles

    Monday, June 29, 2015 11:38 AM
    Moderator
  • >>Is there anyway to give the mainwindows window size to the width and height of doubleanimation tag?

    Once the UC has been loaded you can get a reference to its Window using the Window.GetWindow method:

    public UserControl5()
            {
                InitializeComponent();
                this.Loaded += (s, e) => { Window parentWindow = Window.GetWindow(this); };
            }

    ...and then create the animation programmatically. Or you could bind to the Width of the window in the XAML  markup:

                    <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="{Binding Width, RelativeSource={RelativeSource AncestorType=Window}}" Duration="0:0:2" />

    This works in EventTriggers.


    But if you set the Opacity of the UC to 0 in the XAML markup you could just apply a TranslateTransform to the UC and then animate the X property of it from -ActualWidth to 0:

    public partial class UserControl5 : UserControl
        {
            public UserControl5()
            {
                InitializeComponent();
                this.Loaded += UserControl5_Loaded;
            }
    
            void UserControl5_Loaded(object sender, RoutedEventArgs e)
            {
                TranslateTransform tt = new TranslateTransform(-this.ActualWidth, 0);
                this.RenderTransform = tt;
                this.Opacity = 1;
    
                Window parentWindow = Window.GetWindow(this);
                DoubleAnimation animation = new DoubleAnimation();
                animation.From = -this.ActualWidth;
                animation.To = 0;
                Storyboard.SetTarget(animation, this);
                Storyboard.SetTargetProperty(animation, new PropertyPath("(UserControl.RenderTransform).(TranslateTransform.X)"));
                animation.Duration = TimeSpan.FromSeconds(1);
                Storyboard sb = new Storyboard();
                sb.Children.Add(animation);
                sb.Begin();
    
            }
        }
    

    <UserControl x:Class="WpfApplication9.UserControl5"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300" Opacity="1" Background="Green">
        <Grid>
            <TextBlock Text="UC" FontSize="20"/>
        </Grid>
    </UserControl>

    This will create a sliding effect.


    Hope that helps.

    Please remember mark all helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Proposed as answer by duskydawn Friday, March 17, 2017 10:21 PM
    Monday, June 29, 2015 12:12 PM
  • Thankyou Magnus! Your answer greatly helped me in creating the sliding effect.
    Friday, March 17, 2017 10:21 PM