ImageTile Control In UWP With XAML And C#

Before reading this article, please go through the article, given below.

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

Basically ImageTile is a UI component, which looks like "People" tile in our mobile phones. It shows a set of images, which are animated either by fade, Vertical Expand, Horizontal Expand or no effect.

After reading this article, you can learn how to use Coding4Fun ImageTile in Universal Windows apps development with XAML and Visual C# with the different animations.

The important tools, given below are required to develop 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 (UWPC4FImageTile)->OK.



After choosing the Target and minimum platform version for your Windows, Universal Application will support and the project creates App.xaml and MainPage.xaml.



Step 2

Open (double click) the file MainPage.xaml in Solution Explorer and add the Coding4Fun.Toolkit.Controls reference in the project.

To add the reference, Right click on your project (UWPC4FImageTile) and select Manage NuGet Packages.



Choose browse and search Coding4Fun.Toolkit.Controls. Select the package and install it.



Reference is added in your project



Step 3

Add tab in the Toolbox to add Coding4Fun Tool Kit controls.

Right click on the Coding4Fun Toolkit (newly added tab) and select choose items.



Select the path
C:\Users\<username>\.nuget\packages\Coding4Fun.Toolkit.Controls\2.1.8\lib\netcore451 and select the file.

Coding4Fun.Toolkit.dll and filter the Coding4Fun.Toolkit controls.



Step 4

Add TextBlock control, change the name and text property for the title.



Step 5

Now, add the ImageTile Control, set the name and AnimationType property. Here, the animation type is none.



Similarly, add ImageTile control, set the name and AnimationType property. Here, the Animation type is Fade.



Add ImageTile control, set the name and AnimationType property. Here, the animation type is HorizontalExpand.



Add the ImageTile control and set the name and AnimationType property. Here, the animation type is VerticalExpand.



Step 6

Add the images to the Images folder for ImageTile.



Note

Automatically, the code given below will be generated in XAML code view, while we are done in the design view.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPC4FImageTile" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Coding4Fun.Toolkit.Controls" x:Class="UWPC4FImageTile.MainPage" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="317,10,0,0" TextWrapping="Wrap" Text="Coding4Fun Image Tile Demo" VerticalAlignment="Top" FontSize="48" FontWeight="Bold" />
        <Controls:ImageTile x:Name="imgTile1" Content="" HorizontalAlignment="Left" Margin="42,103,0,0" VerticalAlignment="Top" Width="154" Height="128" AnimationType="None" />
        <Controls:ImageTile x:Name="imgTile2" Content="Fade" HorizontalAlignment="Left" Margin="364,103,0,0" VerticalAlignment="Top" Width="286" Height="175" AnimationType="Fade" />
        <Controls:ImageTile x:Name="imgTile3" Content="Horizontally Expanding" HorizontalAlignment="Left" Margin="838,103,0,0" VerticalAlignment="Top" Width="377" Height="253" AnimationType="HorizontalExpand" />
        <Controls:ImageTile x:Name="imgTile4" Content="Vertically Expanding" HorizontalAlignment="Left" Height="408" Margin="42,302,0,0" VerticalAlignment="Top" Width="752" AnimationType="VerticalExpand" Columns="5" Rows="5" /> </Grid>
</Page>

Step 7

Add the code, given below to constructor method in Mainpage.xaml.cs to change the added images in ImageTile control.

List < Uri > items = new List < Uri > ();
for (int i = 1; i < 11; i++)
{
    items.Add(new Uri(string.Format("ms-appx:///Images/{0}.jpg", i), UriKind.RelativeOrAbsolute));
}
imgTile1.ItemsSource = items;
imgTile2.ItemsSource = items;
imgTile3.ItemsSource = items;
imgTile4.ItemsSource = items;

Step 8

Deploy your app in the local machine and the output of UWPC4FImageTile app is given below.


Summary

Now, you have successfully tested Code4Fun ToolKit – ImageTile in Visual C# - UWP environment with the different animations.