Metro Flow Control In UWP With XAML AND C#

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

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

MetroFlow is a UI component, which allows the developer to display a short data collection that contains images and labels in a "flowing" manner.

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

The important tools, given below are required to develop UWP.

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

Now, we can discuss step by step app development.

Step1

Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> Give the suitable name for your app (UWPC4FMetroFlow)->OK.

studio

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

studio

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 (UWPC4FMetroFlow) and select Manage Nuget Packages.

studio

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

studio

The reference is added to your project.

studio

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, given below.

C:\Users\<username>\.nuget\packages\Coding4Fun.Toolkit.Controls\2.1.8\lib\netcore451

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

path

Step 4

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

path

Add the StackPanel control and set the name property.

path

Step 5

Add the Metroflow control and set the name property.

path

Step 6

Add the images to the Images folder for MetroFlow.

path

path

Step 7

Add the MetroFlowData (adding flow data to the Metro Flow control) code. Set the Name, ImageUri Property, inside the Metro Flow Control.

<Controls:MetroFlowData x:Name="MFD1" ImageUri="Images/1.jpg" Title="First" />

path

Similarly, add additional MetroFlowData to the Metro Flow control.

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:UWPC4FMetroFlow" 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="UWPC4FMetroFlow.MainPage" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="54,64,0,0" TextWrapping="Wrap" Text="Coding4Fun MetroFlow control Demo" VerticalAlignment="Top" Width="293" FontWeight="Bold" />
<StackPanel x:Name="SPMF" HorizontalAlignment="Left" Height="379" Margin="54,113,0,0" VerticalAlignment="Top" Width="260">
<Controls:MetroFlow x:Name="MFTest" Height="161" Margin="10,0">
<Controls:MetroFlowData x:Name="MFD1" ImageUri="Images/1.jpg" Title="First" />
<Controls:MetroFlowData x:Name="MFD2" ImageUri="Images/2.jpg" Title="Second" />
<Controls:MetroFlowData x:Name="MFD3" ImageUri="Images/3.jpg" Title="Third" />
</Controls:MetroFlow>
</StackPanel>
</Grid>
</Page>// This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

Step 8

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

Afterwards, click or tap the later part.

studio

Summary

Now, you have successfully tested Code4Fun ToolKit – MetroFlow in Visual C# - UWP environment.