Download presentation
Presentation is loading. Please wait.
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
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
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.