未加星标

Animation In Xamarin.Forms Application For Android And UWP

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

Animation is a great way to show your information on screen by providing an attractive user interface. In Xamarin.Forms, the ViewExtensions class provides a number of extension methods that can be used to create simple animations that rotate, scale, translate, and fade VisualElement instances.

Reading this article, you can learn how to use animation features in Xamarin.Forms cross-platform applications for Android and Universal windows Platform with XAML and Visual C# using Visual Studio 2017RC.

The following important tools are required for developing UWP.

Windows 10 (Recommended) Visual Studio 2017 RC Community/Enterprise/Professional Edition (It is a Free trial software available online) Using Visual studio 2017 Installer, Enable the feature of Mobile development with .NET.

Now, let us discuss step by step app development.

Step 1

Open Visual Studio 2017 RC. Go to Start -> New Project-> select Cross-Platform (under Visual C#->Cross Platform App-> Give suitable name for your app (Example - XamFormAnim) ->OK.


Animation In Xamarin.Forms Application For Android And UWP

Step 2

Select the Cross Platform App template as Blank App, set UI Technology as Forms, and Sharing as PCL. Afterwards, Visual Studio creates 4 projects (Portable, Droid, iOS, UWP) and displays Getting Started.XamarinPage.


Animation In Xamarin.Forms Application For Android And UWP
Step 3

Add an XAML page for animation demo. Right click XamFormAnim(Portable) project, select ADD-> NewItem.

Select ->CrossPlatform-> FormXamlPage-> Give a relevant name (Example- AnimTest.Xaml).


Animation In Xamarin.Forms Application For Android And UWP

Add the image in XamFormAnim_Droid project Resourses-> Drawable folder and add the image in XamFormAnim_UWP project

In AnimTest.Xaml, add Button, Label, and Image Controls, as shown below.

<StackLayout> <LabelText="XamarinForms-Animation(Translate,Rotate,FadeandScale)inAndroidandUWP"/> <ButtonText="Click"TextColor="Blue"BackgroundColor="Yellow"Font="Large"Clicked="Button_Clicked"TranslationX="20"TranslationY="25"/> <LabelText="Translate"TranslationX="50"TranslationY="50"/> <ImagexName="AnimTest1"Source="Smiley.jpg"WidthRequest="150"HeightRequest="50"HorizontalOptions="Start"TranslationX="50"TranslationY="50"/> <LabelText="Rotation"TranslationX="50"TranslationY="50"/> <ImagexName="AnimTest2"Source="Smiley.jpg"WidthRequest="150"HeightRequest="50"HorizontalOptions="Start"TranslationX="50"TranslationY="50"/> <LabelText="Fading"TranslationX="50"TranslationY="50"/> <ImagexName="AnimTest3"Source="Smiley.jpg"WidthRequest="150"HeightRequest="50"HorizontalOptions="Start"TranslationX="50"TranslationY="50"/> <LabelText="Scaling"TranslationX="50"TranslationY="50"/> <ImagexName="AnimTest4"Source="Smiley.jpg"WidthRequest="150"HeightRequest="50"HorizontalOptions="Start"TranslationX="150"TranslationY="50"/> </StackLayout>
Animation In Xamarin.Forms Application For Android And UWP

Add the following code in AnimTest.Xaml.cs for Button Click event.

privatevoidButton_Clicked(objectsender,EventArgse){ AnimTest1.TranslateTo(300,50,1000,Easing.Linear); AnimTest2.RotateTo(180,800,Easing.SinOut); AnimTest3.FadeTo(0.5,600,Easing.CubicOut); AnimTest4.ScaleTo(2,50,Easing.SpringIn); }
Animation In Xamarin.Forms Application For Android And UWP
Step 4

Open (double click) App.cs in the Solution Explorer-> XamFormAnim (portable) and set the Root Page.


Animation In Xamarin.Forms Application For Android And UWP

Step 5

Change the "Configuration Manager " settings.

Go to Build -> Configuration Manager, and uncheck the "Build" and "Deploy" options for iOS and check them for Droid and UWP.


Animation In Xamarin.Forms Application For Android And UWP
Step 6

Deploy your app on Android Emulator and Local Machine (UWP). The output of the XamFormAnim App is shown below.


Animation In Xamarin.Forms Application For Android And UWP

After clicking the "Click" button.


Animation In Xamarin.Forms Application For Android And UWP

Summary

Now, you have successfully tested simple animations in Xamarin.Forms application, using Visual C# and Xamarin in Visual Studio 2017 RC.

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

分页:12
转载请注明
本文标题:Animation In Xamarin.Forms Application For Android And UWP
本站链接:http://www.codesec.net/view/531923.html
分享请点击:


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