Beruflich Dokumente
Kultur Dokumente
XAMARIN.FORMS HANDS
Chapter 1 :
Create your first Xamarin.Forms Application
Chapter 2 :
Pages
ContentPage (Lab 1)
TabbedPage (Lab 2)
Chapter 3 :
Layouts
StackLayout (Lab 3)
AbsoluteLayout (Lab 4)
Grid (Lab 5)
Chapter 4 :
Views
ActivityIndicator (Lab 6)
DatePicker (Lab 7)
Editor (Lab 8)
Picker (Lab 9)
Switch Cell (Lab 10)
Chapter 5 :
Tutorial
P a g e 1 | 17
XAMARIN.FORMS HANDS
CHAPTER 1: Create Your First Xamarin.Forms Application
In the Start screen, launch Visual Studio. This opens the start page:
P a g e 2 | 17
XAMARIN.FORMS HANDS
3. In the New Project dialog, click Mobile Apps, select the Blank App (Xamarin.Forms Portable) template,
set the Name and Solution name to Phoneword, choose a suitable location for the project and then click
the OK button:
4. In Solution Explorer, right click on the Phoneword project and select Add > New Item...
P a g e 3 | 17
XAMARIN.FORMS HANDS
5. In the Add New Item dialog, select Visual C# > Forms Xaml Page, name the new file MainPage, and
click the Add button. This will add a page named MainPage to the project:
XAMARIN.FORMS HANDS
P a g e 5 | 17
XAMARIN.FORMS HANDS
Pages
The Page class is a visual element that occupies most or all of the screen and
contains a single child. A Xamarin.Forms.Page represents a View Controller in
iOS or a Page in Windows Phone. On Android each page takes up the screen like
an Activity, but Xamarin.Forms Pages are not Activities.
ContentPage
A ContentPage displays a single View,often a container such as a StackLayout or a
ScrollView.
In the ContentPage class,there is a property named Content that can be assigned to
via code or by placing the child (content) UI element within ContentPage element.
XAML Example (Lab 1)
P a g e 6 | 17
XAMARIN.FORMS HANDS
TabbedPage
A Page that allows navigation between children pages,using Tabs.
In Xamarin.Forms applications, a TabbedPage is generally useful when you have a
small predefined number of pages that users can navigate between, such as a menu
or a simple wizard that can be positioned at the top of bottom of the screen.
XAML Example (Lab 2)
P a g e 7 | 17
XAMARIN.FORMS HANDS
Layouts
Xamrin.Forms has several layouts and features for organizing content on screen.
Each Layout control is described below,as well as details on how to handle screen
orientation changes:
Choosing the Right Layout
The layouts you choose in your app can either help or hurt you as you're creating
an attractive and usable Xamarin.Forms app. Taking some time to consider how
each layout works can help you write cleaner and more scalable UI code. A screen
can have a combination of different layouts to achieve a specific design.
Stack Layout
StackLayout used to arrange views linearly, either horizontally or vertically.
Views in a StackLayout can be aligned to the center, left or right of the layout.
A StackLayout is used to automatically position all of its child elements in a single
line.The direction of the line is based on the Orientation property.The valid options
for this property are Horizontal or Vertical.The Default value,if not explicity set,is
Vertical.
When it comes to adjusting the amount of space between the child elements in the
StackLayout,this should be done using the Spacing property and not at the
individual child element level.During the layout process of a StackLayout,the userassigned bounds will be overwritten and set to the value associated with the
StackLayout control.
XAML Example (Lab 3)
P a g e 8 | 17
XAMARIN.FORMS HANDS
Absolute Layout
XAMARIN.FORMS HANDS
P a g e 10 | 17
XAMARIN.FORMS HANDS
Grid Layout
Grid used to arrange views in a grid. Rows and columns can be specified in terms of
absolute values or ratios.
The Grid container is a very useful option if you are looking to divide your screen into
a series of rows and columns in which you can place child elements.The process of
working with a Grid starts with creating a number of RowDefinition and
ColumnDefinition objects.Onece have created these,you are free to assign child
elements into a cell based on its coordinates.Once an element is placed within a
cell,any layout propertied assigned to that element will be applied to it with respect to
the cell it occupies.
When it comes to defining the Height and Width values in the RowDefinition and
ColumnDefinition objects,you have three options.You can define an explicit value that
the row or column will try to honor based on the amount of space available on the
screen.You can choose to set the value to auto this value will automatically size the
row or column based on the size of its contents. Finally,you can use the star value (*)
which will allow that row or column to take all remaining space that is not used by
anything else. The following example uses star sizing.
XAML Example (Lab 4)
P a g e 11 | 17
XAMARIN.FORMS HANDS
Views
Xamarin.Forms uses the word View to refer to visual objects such as buttons,labels
or text entry boxes which may be more commonly known as controls of widgets.
ActivityIndicator
A visual control used to indicate that something is ongoing. This control gives a
visual clue to the user that something is happening, without information about its
progress.
There are only two properties that are specific to the ActivityIndicator control:
P a g e 12 | 17
XAMARIN.FORMS HANDS
DatePicker
A View that allows date picking. The visual representation of a DatePicker is very
similar to the one of Entry, except that a special control for picking a date appears
in place of a keyboard
There are a few properties that are important to understand when working with the
DatePicker control:
P a g e 13 | 17
XAMARIN.FORMS HANDS
Editor
A control that can edit multiple lines of text.
There are two important properties associated with the Editor:
There are two events raised by the entry to which you can subscribe:
Completed: fired when the user finalizes the entry by tapping the Return
key.
TextChanged: Fired when the text within the Editor is changed.
P a g e 14 | 17
XAMARIN.FORMS HANDS
Picker
A View control for picking an element in a list. The visual representation of a
Picker is similar to a Entry, but a picker control appears in place of a keyboard.
For being a relatively sophisticated control,there are only three properties of
note:
P a g e 15 | 17
XAMARIN.FORMS HANDS
P a g e 16 | 17
XAMARIN.FORMS HANDS
P a g e 17 | 17