Xamarin Forms

1. http://schoolacademy.telerik.com Xamarin Forms XAML and Controls Xamarin apps for iOS, Android &WinPhone Telerik School Academy http://schoolacademy.telerik.com

2. Table of Contents • Overview • Requirements • Mac Requirements • Windows Requirements • Xamarin.Forms App • Controls • Views – Button, Label, Entry, ListView, Cells • Pages – ContentPage, MasterDetailPage… • Layouts – Managed/Unmanaged Layouts

3. Overview • Requirements • Mac Requirements • Windows Requirements • Xamarin.Forms App • Controls • Views – Button, Label, Entry, ListView, Cells • Pages – ContentPage, MasterDetailPage… • Layouts – Managed/Unmanaged Layouts

4. Overview • Allow cross platform user interfaces • Allow for rapid prototyping • Rendered using native controls • Written with C# and XAML • Does not have the limitations of other toolkits • Browser sandboxing • Limited APIs • Poor performance

5. Overview • Possible to create applications part with Xamarin.Forms, part with native UI toolkit • Can be written for • Android 4.0 or higher • iOS 6.1 or higher • Windows Phone 8 or higher

6. Overview • Requirements • Mac Requirements • Windows Requirements • Xamarin.Forms App • Controls • Views – Button, Label, Entry, ListView, Cells • Pages – ContentPage, MasterDetailPage… • Layouts – Managed/Unmanaged Layouts

7. Requirements • Mac System Requirements • XamarinStudio 5 – for applications on OS X • Xcode5 – to develop iOS applications • Windows Phone apps cannot be developed on OS X • Windows System Requirements • Windows 8 operating system • VS 2013 with the Windows Phone SDK installed • Visual Studio 2013 Update 2 • iOS and Android can be built on any Windows

8. Overview • Requirements • Mac Requirements • Windows Requirements • Xamarin.Forms App • Controls • Views – Button, Label, Entry, ListView, Cells • Pages – ContentPage, MasterDetailPage… • Layouts – Managed/Unmanaged Layouts

9. Xamarin.Forms App • Xamarin.Formssolutionwill contain: • Portable Library • Xamarin.Android Application • Xamarin.iOSApplication • Windows Phone Application

10. Xamarin.Forms App • A Xamarin.Forms.Page represents: • Activity in Android • View Controller in iOS • Page in Windows Phone public class App { public static Page GetMainPage() { return new ContentPage { Content = { ... } }; } }

11. Overview • Requirements • Mac Requirements • Windows Requirements • Xamarin.Forms App • Controls • Views – Button, Label, Entry, ListView, Cells • Pages – ContentPage, MasterDetailPage… • Layouts – Managed/Unmanaged Layouts

12. Overview • Requirements • Mac Requirements • Windows Requirements • Xamarin.Forms App • Controls • Views – Button, Label, Entry, ListView, Cells • Pages – ContentPage, MasterDetailPage… • Layouts – Managed/Unmanaged Layouts

13. Views • The building blocks of the UI • Commonly known as controls • Xamarin Forms supports: • Button, Label, Entry, Editor • Image, BoxView, Slider, Stepper, Switch • Picker, DatePicker, TimePicker • ListView, TableView, WebView • ActivityIndicator, ProgressBar, SearchBar • http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/views/

14. Button • A button view which reacts to touch Button button = new Button { Text = "Click Me!", Font = Font.SystemFontOfSize(NamedSize.Large), BorderWidth = 1, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.CenterAndExpand }; button.Clicked += OnButtonClicked;

15. Label • A view that displays text Label lbl = new Label { Text = "Hello, Forms!", Font = Font.SystemFontOfSize(NamedSize.Large), VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions= LayoutOptions.CenterAndExpand, };

16. Entry • A control that can edit a single line of text varusernameEntry = new Entry { Placeholder = "Username“, }; usernameEntry.TextChanged += usernameEntry_TextChanged; usernameEntry.Focused+= usernameEntry_Focused; usernameEntry.Unfocused+= usernameEntry_Unfocused; varpasswordEntry = new Entry { Placeholder = "Password", IsPassword = true };

17. DatePicker • A view that allows date picking DatePickerdatePicker = new DatePicker { Format = "D", VerticalOptions = LayoutOptions.CenterAndExpand };

18. ListView • ItemsViewthat displays a collection of data ListViewlistView = new ListView { ItemsSource = people, ItemTemplate = new DataTemplate(() => { return new ViewCell() { View = ... } } };

19. Cells • A Cell is a specialized element used to describe how each item in a list should be drawn • Cells are elements designed to be added to ListViewor TableView • Xamarin Forms supports: • ViewCell – containing a developer-defined View • EntryCell, SwitchCell, TextCell, ImageCell <TextCell Text="{Binding Name}" Detail="{Binding DateOfBirth}"/>

20. Overview • Requirements • Mac Requirements • Windows Requirements • Xamarin.Forms App • Controls • Views – Button, Label, Entry, ListView, Cells • Pages – ContentPage, MasterDetailPage… • Layouts – Managed/Unmanaged Layouts

21. Pages • ContentPage– display a single View • MasterDetailPage– manages two panes of info • NavigationPage– manages a stack of other pages • TabbedPage– allows navigation using tabs • CarouselPage– swipe gestures between subpages

22. Overview • Requirements • Mac Requirements • Windows Requirements • Xamarin.Forms App • Controls • Views – Button, Label, Entry, ListView, Cells • Pages – ContentPage, MasterDetailPage… • Layouts – Managed/Unmanaged Layouts

23. Layouts • The Layout class acts as a container for other Layouts or Views • It typically contains logic to set the position and size of child elements • Managed Layouts – StackLayout • Takes care of positioning and sizing of children • Unmanaged Layouts – AbsoluteLayout • The user will specify the size and position of the child control

24. Layouts: Types • ContentView • An element with a single content • Serves as a base class for user-defined compound veiws • StackLayout • Positions child elements in a single line • Orientation: Vertical or Horizontal • ScrollView • Capable of scrolling if the Content requires it

25. Layouts: Types • Grid • Arranges views in rows and columns • Frame • Has a single child with some framing options • AbsoluteLayout • Positions child elements at absolute requested positions • RelativeLayout • Uses Constraints to layout its children

26. Layouts Demo

27. Strings and Text Processing http://csharpfundamentals.telerik.com

28. Free Trainings @ Telerik Academy • C# Programming @ Telerik Academy • csharpfundamentals.telerik.com • Telerik Software Academy • academy.telerik.com • Telerik Academy @ Facebook • facebook.com/TelerikAcademy • Telerik Software Academy Forums • forums.academy.telerik.com