Image Fading Application In UWP

Before reading this article, please go through the following article.

  1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

Reading this article, you can learn how to use UWP ToolKit - Image Fading in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

  1. Windows 10 (Recommended)
  2. Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development.

Step 1 - Open Visual Studio 2015 -> Start -> New Project -> Select Universal (under Visual C# -> Windows) -> Blank App -> give the suitable name for your App (UWPFadeImage) -> OK.

minimum

Choose the Target and Minimum platform version that your Windows Universal Application will support. After this, the Project creates App.xaml and MainPage.xaml.

minimum

Step 2 - Open (double click) the file MainPage.xaml in the Solution Explorer and add the Microsoft.Toolkit.Uwp.UI.Animations reference in the project.

For adding Reference, right click your project's name (UWPFadeImage) and select Manage NuGet Packages.

minimum

Choose Browse and search Microsoft.Toolkit.Uwp.UI.Animations, select the package and install it.

minimum

Accept the license.

Accept the License

Reference is added to your project.

Reference added your project

Step 3 - Add TextBlock control and change the name and text property for the title.

Reference added your project

Step 4 - Add images for Fade in the "Assets" folder.

Reference added your project

Step 5 - Add the image control for displaying the image.

Reference added your project

Step 6 - Add the following Xaml namespaces and code for Fading in Mainpage.xaml,
  1. xmlns: interactivity = "using:Microsoft.Xaml.Interactivity"  
  2. xmlns: behaviors = "using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"  
  3. xmlns: core = "using:Microsoft.Xaml.Interactions.Core" <  
  4.     Image x: Name = "imgFade"  
  5. HorizontalAlignment = "Left"  
  6. Height = "116"  
  7. Margin = "219,102,0,0"  
  8. VerticalAlignment = "Top"  
  9. Width = "206"  
  10. Source = "Assets/01.jpg" >  
  11.     <  
  12.     interactivity: Interaction.Behaviors >  
  13.     <  
  14.     behaviors: Fade x: Name = "Fade"  
  15. Value = "0.16"  
  16. Duration = "0"  
  17. Delay = "1800" / >  
  18.     <  
  19.     /interactivity:Interaction.Behaviors> <  
  20.     /Image>  
xmlns: interactivity = "using:Microsoft.Xaml.Interactivity" xmlns: behaviors = "using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" xmlns: core = "using:Microsoft.Xaml.Interactions.Core" < Image x: Name = "imgFade" HorizontalAlignment = "Left" Height = "116" Margin = "219,102,0,0" VerticalAlignment = "Top" Width = "206" Source = "Assets/01.jpg" /> < interactivity: Interaction.Behaviors > < behaviors: Fade x: Name = "Fade" Value = "0.16" Duration = "0" Delay = "1800" / > < /interactivity:Interaction.Behaviors> < /Image>

Add a button control and add a Click event method for Fade action.

xmlns: interactivity = "using:Microsoft.Xaml.Interactivity" xmlns: behaviors = "using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" xmlns: core = "using:Microsoft.Xaml.Interactions.Core" < Image x: Name = "imgFade" HorizontalAlignment = "Left" Height = "116" Margin = "219,102,0,0" VerticalAlignment = "Top" Width = "206" Source = "Assets/01.jpg" /> < interactivity: Interaction.Behaviors > < behaviors: Fade x: Name = "Fade" Value = "0.16" Duration = "0" Delay = "1800" / > < /interactivity:Interaction.Behaviors> < /Image>

Note - Automatically, the following code will be generated in XAML code View, when we are done with the design View.
  1. <Page x:Class="UWPFadeImage.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPFadeImage" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" xmlns:core="using:Microsoft.Xaml.Interactions.Core" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="219,46,0,0" TextWrapping="Wrap" Text="Imaging Fading demo" VerticalAlignment="Top" RenderTransformOrigin="-0.005,1.833" FontWeight="Bold" FontSize="20" />  
  4.         <Image x:Name="imgFade" HorizontalAlignment="Left" Height="116" Margin="219,102,0,0" VerticalAlignment="Top" Width="206" Source="Assets/01.jpg">  
  5.             <interactivity:Interaction.Behaviors>  
  6.                 <behaviors:Fade x:Name="Fade" Value="0.16" Duration="0" Delay="1800" />  
  7.             </interactivity:Interaction.Behaviors>  
  8.         </Image>  
  9.         <Button x:Name="btnFade" Content="Click me to Fade" HorizontalAlignment="Left" Margin="496,80,0,0" VerticalAlignment="Top" Click="btnFade_Click" />  
  10.     </Grid>  
  11. </Page>  
Step 7 - Add namespace and the following code in MainPage.xaml.cs,
  1. using Microsoft.Toolkit.Uwp.UI.Animations;  
  2. private async void btnFade_Click(object sender, RoutedEventArgs e) {  
  3.         await imgFade.Fade(duration: 0, delay: 500, value: 0.5 f).StartAsync();  
  4. }
MainPage

Step 8
- Deploy your app in Local Machine. The output of the UWPFadeImage App is shown below.

MainPage

After the Fading button clicked,

After the Fading button clicked

Summary - Now, you have successfully tested UWP ToolKit - Image Fading in Visual C# - UWP environment.