Introduction

This article demonstrates how to add custom background image animation for UWP in Xamarin.Forms application. This function is available in Universal Windows Platform applications.
Let's start.
Step 1

Create a Xamarin.Forms app by going to File >> New >> Visual C# >> Cross Platform >> Cross platform app (Xamarin.Native or Xamarin.Forms) and click OK.
( Project Name :CusBackImageAnimationApp)
Step 2

Now, select Blank App >>Platform (Android, IOS, Windows(UWP)) >> Xamarin.Forms >> .NET Standard and click OK.

Step 3

After the project creation, add User Control to your UWP application. For that, go to Solution Explorer >>select and right-click to CusBackImageAnimarionUserControl.UWP app followed by selecting Add >> New Item >> Visual C# >> User Control and give the page a name as BackgroundAnimationUserControl. Click OK.

Step 4

In this step, open BackgroungAnimationUserControl.Xaml page. For that, double-click to get its design view. Here is the code to be pasted into it.
Used toolbox items
  • Image - To use background animation
XAML Code
  1. <UserControl
  2. x:Class="BackgroundAnimation.BackgroundAnimationUserControl"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:BackgroundAnimation"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d">
  10. <Grid>
  11. <Grid.Triggers>
  12. <EventTrigger RoutedEvent="Grid.Loaded">
  13. <EventTrigger.Actions>
  14. <BeginStoryboard>
  15. <Storyboard>
  16. <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
  17. Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
  18. Storyboard.TargetName="BackgroundImage"
  19. AutoReverse="True">
  20. <EasingDoubleKeyFrame KeyTime="0:0:20"
  21. Value="1.3">
  22. <EasingDoubleKeyFrame.EasingFunction>
  23. <SineEase EasingMode="EaseInOut" />
  24. </EasingDoubleKeyFrame.EasingFunction>
  25. </EasingDoubleKeyFrame>
  26. </DoubleAnimationUsingKeyFrames>
  27. <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
  28. Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
  29. Storyboard.TargetName="BackgroundImage"
  30. AutoReverse="True">
  31. <EasingDoubleKeyFrame KeyTime="0:0:20"
  32. Value="1.3">
  33. <EasingDoubleKeyFrame.EasingFunction>
  34. <SineEase EasingMode="EaseInOut" />
  35. </EasingDoubleKeyFrame.EasingFunction>
  36. </EasingDoubleKeyFrame>
  37. </DoubleAnimationUsingKeyFrames>
  38. </Storyboard>
  39. </BeginStoryboard>
  40. </EventTrigger.Actions>
  41. </EventTrigger>
  42. </Grid.Triggers>
  46. <Image x:Name="BackgroundImage"
  47. Source="Images/logesh.JPG"
  48. Stretch="UniformToFill"
  49. RenderTransformOrigin="0.5,0.5">
  50. <Image.RenderTransform>
  51. <CompositeTransform/>
  53. </Image.RenderTransform>
  54. </Image>
  55. </Grid>
  58. </UserControl>
Step 5

Afterward, open Solution Explorer >> CusBackImageAnimationApp.UWP >> click open MainPage.xaml page. Given below is the code for this page.
XAML Code
  1. <Page
  2. x:Class="BackgroundAnimation.MainPage"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:BackgroundAnimation"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d">
  10. <local:BackgroundAnimationUserControl/>

  13. </Page>
Step 6

After the design view, go to Build menu and click "Configure Manager ". Here, you can configure your Universal Windows Platform startup settings.
Click F5 or "Build and Run " to run your UWP application. After running this project, you will get the result like below.

Finally, we have successfully changed a Xamarin.Forms custom UWP application in which we can change the background image.