Presentation is loading. Please wait.

Presentation is loading. Please wait.

Changing the default visualization of views in Xamarin.Forms Telerik School Academy Xamarin apps for iOS, Android & WinPhone.

Similar presentations


Presentation on theme: "Changing the default visualization of views in Xamarin.Forms Telerik School Academy Xamarin apps for iOS, Android & WinPhone."— Presentation transcript:

1 Changing the default visualization of views in Xamarin.Forms Telerik School Academy http://schoolacademy.telerik.com Xamarin apps for iOS, Android & WinPhone

2  Custom Views in Xamarin.Forms  Extending the built-in controls  Adding custom functionality  Customizing views for different platforms  Creating Platform renderers to customize views on different platforms

3

4  Creating views is easy – just inherit the view you want to extend (Button, Label, etc)  Or inherit View/ContentView, if you want to create a totally different view class Player: ContentView { public Player(){ public Player(){ var container = new StackLayout{ var container = new StackLayout{ Orientation = StackOrientation.Horizontal Orientation = StackOrientation.Horizontal }; }; container.Children.Add(new Button{Text="Play"}); container.Children.Add(new Button{Text="Play"}); container.Children.Add(new Button{Text="Pause"}); container.Children.Add(new Button{Text="Pause"}); container.Children.Add(new Button{Text="Stop"}); container.Children.Add(new Button{Text="Stop"}); this.Content = container; this.Content = container; }}

5 Live Demo

6

7  To add features to custom view just write a plain- old C# code and use Xamarin.Forms features: class Player: ContentView { public event EventHandler Play; public event EventHandler Play; public event EventHandler Pause; public event EventHandler Pause; public event EventHandler Stop; public event EventHandler Stop; public Player(){ public Player(){ //… //… this.PlayButton.Clicked += (sender, e) => { this.PlayButton.Clicked += (sender, e) => { //play the video/audio //play the video/audio if(this.Play != null){ if(this.Play != null){ this.Play(this, e); this.Play(this, e); } }; }; }}

8 Live Demo

9 Create a view that looks different on different platforms

10  To customize a view: 1.Inherit the view to customize: class HighlightedButton: Button{ } 2.Implement a renderer in each platform's project and overload the OnElementChanged(e) method: class HighlightedButtonRenderer_iOS: ButtonRenderer { protected override void OnElementChanged(EventArgs e) { protected override void OnElementChanged(EventArgs e) { //this.Control has a reference to the native view //this.Control has a reference to the native view //this.Element has a reference to the Xamarin Forms view //this.Element has a reference to the Xamarin Forms view } }} 3.Register the renderer (out of any namespace): [assembly: ExportRenderer(typeof(HighlightedButton), typeof(HighlightedButtonRenderer_iOS))]

11 Live Demo

12  Platform renderers are used:  When a view needs to look differently on each platform  On different on a single platform  When we need a platform-specific features:  Gestures  Messaging  Connection to Application Storage

13 форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен SEO курс - оптимизация за търсачки уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop уроци по програмиране и уеб дизайн за ученици ASP.NET MVC курс – HTML, SQL, C#,.NET, ASP.NET MVC безплатен курс "Разработка на софтуер в cloud среда" BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране, книги – безплатно от Наков безплатен курс "Качествен програмен код" алго академия – състезателно програмиране, състезания ASP.NET курс - уеб програмиране, бази данни, C#,.NET, ASP.NET курсове и уроци по програмиране – Телерик академия курс мобилни приложения с iPhone, Android, WP7, PhoneGap free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране http://academy.telerik.com


Download ppt "Changing the default visualization of views in Xamarin.Forms Telerik School Academy Xamarin apps for iOS, Android & WinPhone."

Similar presentations


Ads by Google