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.



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



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.



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



Accept the license.



Reference is added to your project.



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



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

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



Step 6 - Add the following Xaml namespaces and code for Fading in Mainpage.xaml,

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.



Note - Automatically, the following code will be generated in XAML code View, when we are done with the design View.

<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">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <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" />
        <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>
        <Button x:Name="btnFade" Content="Click me to Fade" HorizontalAlignment="Left" Margin="496,80,0,0" VerticalAlignment="Top" Click="btnFade_Click" />
    </Grid>
</Page>

Step 7 - Add namespace and the following code in MainPage.xaml.cs,

using Microsoft.Toolkit.Uwp.UI.Animations;
private async void btnFade_Click(object sender, RoutedEventArgs e) {
        await imgFade.Fade(duration: 0, delay: 500, value: 0.5 f).StartAsync();
}

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



After the Fading button clicked,



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