XAML and Controls Telerik School Academy Xamarin apps for iOS, Android & WinPhone

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

3

 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 4

 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 5

6

 Mac System Requirements   Xamarin Studio 5 – for applications on OS X   Xcode 5 – 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 7

8

  Xamarin.Forms solution will contain:   Portable Library   Xamarin.Android Application   Xamarin.iOS Application   Windows Phone Application 9

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

11

12

 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  platform/xamarin-forms/controls/views/ platform/xamarin-forms/controls/views/ platform/xamarin-forms/controls/views/ 13

 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; 14

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

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

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

 ItemsView that displays a collection of data ListView listView = new ListView { ItemsSource = people, ItemTemplate = new DataTemplate(() => { return new ViewCell() { View =... } } }; 18

 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 ListView or TableView  Xamarin Forms supports:  ViewCell –  ViewCell – containing a developer-defined View  EntryCell, SwitchCell, TextCell, ImageCell <TextCell Text="{Binding Name}" Detail="{Binding DateOfBirth}"/> Detail="{Binding DateOfBirth}"/> 19

20

 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 21

22

  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 23

 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 24

 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 25

Demo 26

форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен 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# Николай Костов - блог за програмиране

 C# Telerik Academy  csharpfundamentals.telerik.com csharpfundamentals.telerik.com  Telerik Software Academy  academy.telerik.com academy.telerik.com  Telerik Facebook  facebook.com/TelerikAcademy facebook.com/TelerikAcademy  Telerik Software Academy Forums  forums.academy.telerik.com forums.academy.telerik.com