未加星标

Metro Flow Control In UWP With XAML AND C#

字体大小 | |
[系统(windows) 所属分类 系统(windows) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

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.


Metro Flow Control In UWP With XAML AND C#

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


Metro Flow Control In UWP With XAML AND C#

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.


Metro Flow Control In UWP With XAML AND C#

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


Metro Flow Control In UWP With XAML AND C#

The reference is added to your project.


Metro Flow Control In UWP With XAML AND C#

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.


Metro Flow Control In UWP With XAML AND C#

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.


Metro Flow Control In UWP With XAML AND C#

Step 4

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


Metro Flow Control In UWP With XAML AND C#

Add the StackPanel control and set the name property.


Metro Flow Control In UWP With XAML AND C#

Step 5

Add the Metroflow control and set the name property.


Metro Flow Control In UWP With XAML AND C#

Step 6

Add the images to the Images folder for MetroFlow.


Metro Flow Control In UWP With XAML AND C#
Metro Flow Control In UWP With XAML AND C#

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" />


Metro Flow Control In UWP With XAML AND C#

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.

<Pagexmlns="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"> <GridBackground="{ThemeResourceApplicationPageBackgroundThemeBrush}"> <TextBlockx:Name="tblTitle"HorizontalAlignment="Left"Margin="54,64,0,0"TextWrapping="Wrap"Text="Coding4FunMetroFlowcontrolDemo"VerticalAlignment="Top"Width="293"FontWeight="Bold"/> <StackPanelx:Name="SPMF"HorizontalAlignment="Left"Height="379"Margin="54,113,0,0"VerticalAlignment="Top"Width="260"> <Controls:MetroFlowx:Name="MFTest"Height="161"Margin="10,0"> <Controls:MetroFlowDatax:Name="MFD1"ImageUri="Images/1.jpg"Title="First"/> <Controls:MetroFlowDatax:Name="MFD2"ImageUri="Images/2.jpg"Title="Second"/> <Controls:MetroFlowDatax:Name="MFD3"ImageUri="Images/3.jpg"Title="Third"/> </Controls:MetroFlow> </StackPanel> </Grid> </Page>//Thisisjustasamplescript.Pasteyourrealcode(javascriptorHTML)here.if('this_is'==/an_example/){of_beautifier();}else{vara=b?(c%d):e[f];}

Step 8

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


Metro Flow Control In UWP With XAML AND C#

Afterwards, click or tap the later part.


Metro Flow Control In UWP With XAML AND C#

Summary

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

本文系统(windows)相关术语:三级网络技术 计算机三级网络技术 网络技术基础 计算机网络技术

主题: C#WindowsVisual StudioVisual StudiUWHTML
分页:12
转载请注明
本文标题:Metro Flow Control In UWP With XAML AND C#
本站链接:http://www.codesec.net/view/483668.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(windows) | 评论(0) | 阅读(37)