CODEWITHSUNDEEP
xamlwinrt-xaml
Venki
Venki

Reputation: 2169

XAML Animation : Using animation to show or hide controls

I am looking for some guidelines / examples on how to enable the following with XAMl animations. I have a simple control which displays some image. On clicking the control, I need to display another control which has buttons for operating on the image.

I have user control 1:

I have another user control 2:

Using animation I need to show the ImageControl on top of the ImageViewer at the left corner when the user taps on the image viewer.

Please provide inputs

Upvotes: 3

Views: 2711

Answers (1)

kimsk
kimsk

Reputation: 2231

What you need is a storyboard that will make the UserControl 2 appear when user interacts with the 1st UserControl. That could be done in several ways, for example, we can hide and show the 2nd UserControl using Opacity or Visibility.

Here is my sample:

Let's say I have two UserControls:

1st UserControl (e.g., ImageViewer)

<UserControl
    x:Class="XamlAnimation.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Background="Cyan">
    </Grid>
</UserControl>

2nd UserControl (e.g., some buttons or controls)

<UserControl
    x:Class="XamlAnimation.MyUserControl2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <StackPanel Orientation="Horizontal" Background="Black" 
                HorizontalAlignment="Left"
                VerticalAlignment="Top">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
    </StackPanel>
</UserControl>

And here is the Page containing both UserControls:

<Page
    x:Class="XamlAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">   
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <local:MyUserControl1 Tapped="MyUserControl1_Tapped"/>
        <local:MyUserControl2 x:Name="myUserControl2" Opacity="0"/>
    </Grid>
</Page>

Please notice that I have the Opacity of the 2nd UserControl set to zero which will hide the 2nd UserControl when the page is loaded.

The easiest way to create a storyboard is to use Blend. We start by opening the page with Blend and create a new Storyboard resource.

Create a new Storyboard

Once you create a Storyboard, Blend will be in recording mode.

Then you select the 2nd UserControl and select when you want the 2nd UserControl to appear. enter image description here enter image description here

At that time, we can change the 2nd UserControl's opacity value to 100%, so the buttons will be shown. If you want, you can apply the easing function to make the animation looks smooth.

enter image description here enter image description here

Now, close Blend and rebuild the project in Visual Studio. And you should see the Storyboard resource on your page.

<Page
    x:Class="XamlAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    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="ShowUserControl2">
            <DoubleAnimation Duration="0:0:2" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="myUserControl2" d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseInOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <local:MyUserControl1 Tapped="MyUserControl1_Tapped"/>
        <local:MyUserControl2 x:Name="myUserControl2" Opacity="0"/>
    </Grid>
</Page>

Finally, we can start the Storyboard in code-behind like this:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
    }

    private void MyUserControl1_Tapped(object sender, TappedRoutedEventArgs e)
    {
        ShowUserControl2.Begin();
    }
}

Run the project, and you should be able to see the animation in action by tapping the 1st UserControl. Hope this helps!

Upvotes: 5

Related Questions