CS 322 MOBILE PROGRAMMING LECTURE 06
Xamarin.Forms Pages • Xamarin.Forms Pages represent cross-platform mobile application screens. • All the page types that are described below derive from the Xamarin.Forms Page class. These visual elements occupy all or most of the screen.
ContentPage • ContentPage is the simplest and most common type of page. Set the Content property ot a single View object, which is most often a Layout such as StackLayout, Grid, or ScrollView.
MasterDetailPage • The Xamarin.FormsMasterDetailPage is a page that manages two related pages of information – a master page that presents items, and a detail page that presents details about items on the master page.
NavigationPage • The NavigationPage class provides a hierarchical navigation experience where the user is able to navigate through pages, forwards and backwards, as desired. The class implements navigation as a last-in, first-out (LIFO) stack of Page objects. This article demonstrates how to use the NavigationPage class to perform navigation in a stack of pages.
NavigationPage • To move from one page to another, an application will push a new page onto the navigation stack, where it will become the active page, as shown in the following diagram:
NavigationPage • To return back to the previous page, the application will pop the current page from the navigation stack, and the new topmost page becomes the active page, as shown in the following diagram:
TabbedPage • The Xamarin.FormsTabbedPage consists of a list of tabs and a larger detail area, with each tab loading content into the detail area.
TabbedPage • The following screenshots focus on the tab format on each platform:
CarouselPage • The Xamarin.FormsCarouselPage is a page that users can swipe from side to side to navigate through pages of content, like a gallery. • Pages can be navigated through by swiping right to left to navigate forwards through the collection, and by swiping left to right to navigate backwards through the collection.
TemplatedPage • Control templates provide a clean separation between the appearance of a page and its content, enabling the creation of pages that can easily be themed.
Xamarin.Forms Layouts • Xamarin.Forms Layouts are used to compose user-interface controls into visual structures.
Layouts with Single Content ContentView • ContentView contains a single child that is set with the Content property. The Content property can be set to any View derivative, including other Layout derivatives. ContentView is mostly used as a structural element and serves as a base class to Frame.
Layouts with Single Content Frame • The Frame class derives from ContentView and displays a rectangular frame around its child.
Layouts with Single Content ScrollView • ScrollView is capable of scrolling its contents. Set the Content property to a view or layout too large to fit on the screen.
Layouts with Single Content TemplatedView • Control templates provide a clean separation between the appearance of a page and its content, enabling the creation of pages that can easily be themed.
Layouts with Multiple Children StackLayout • StackLayout organizes views in a one-dimensional line ("stack"), either horizontally or vertically.
Layouts with Multiple Children Grid • Grid positions its child elements in a grid of rows and columns.
Layouts with Multiple Children AbsoluteLayout • AbsoluteLayout positions and sizes child elements proportional to its own size and position or by absolute values.
Layouts with Multiple Children RelativeLayout • RelativeLayout positions child elements relative to the RelativeLayout itself or to their siblings.
Layouts with Multiple Children FlexLayout • FlexLayout is similar to the Xamarin.FormsStackLayout in that it can arrange its children horizontally and vertically in a stack. However, the FlexLayout is also capable of wrapping its children if there are too many to fit in a single row or column, and also has many options for orientation, alignment, and adapting to various screen sizes.
Views • Views are user-interface objects such as labels, buttons, and sliders that are commonly known as controls or widgets in other graphical programming environments.
Views for presentation Label • The Label view is used for displaying text, both single and multi-line. Labels can have text decorations, colored text, and use custom fonts
Views for presentation Image • Image displays a bitmap. Bitmaps can be downloaded over the Web, embedded as resources in the common project or platform projects, or created using a .NET Stream object.
Views for presentation BoxView • BoxView renders a simple rectangle of a specified width, height, and color. You can use BoxView for decoration, rudimentary graphics, and for interaction with the user through touch.
Views for presentation WebView • WebView is a view for displaying web and HTML content in your app.
Views for presentation OpenGLView • OpenGLView displays OpenGL graphics in iOS and Android projects.
Views for presentation Map • Map displays a map.