ContentPage
page (XF provides several page types, including NavigationPage and TabbedPage). It then adds a StackLayout
layout (XF provides several layouts, including Grid, Absolute and Relative). Finally it creates a Label
control responsible for displaying simple text (XF provides many useful controls, including Input and Map).Text
and HorizontalTextAlighnment
properties horizontally center the text with the value Welcome to Xamarin Forms!.
MainPage
is a property of the App object, created when the application starts and is the root object of any Xamarin Forms application.NavigationPage
will be used to navigate between them. The first page has a list of articles associated with a SitePoint domain, for example, Mobile. Clicking on a list item will navigate to a page containing a WebView
control that displays the contents of the article. The NavigationPage
will allow a user to navigate back to the list of articles. To keep things simple the list of articles is hard coded into the app, as performing HTTP operations is beyond the scope of this tutorial.Modellayer into the application.
ContentPage
with a NavigationPage
.NavigationPage
takes the first page to display as an argument, as it doesn’t have any content of its own. Depending on the platform, it may provide UI for navigation. Note that I added a value for the Title
of the ContentPage
since on some platforms the NavigationPage
can display this value to the user.ContentPage
, making it the page displayed on startup. Open the Add New Item menu item and select the Forms ContentPage code template, name it ArticlesView. The key component I am introducing is the ListView
control, which displays a list of rows containing data.ListView
has a property named ItemsSource
where a list of items is assigned and then creates a cell for each item in the list, using the DataService
created earlier to provide items to the page.DataService
, but this is not yet helpful to the user.ListView
should display each item. When used with XAML, ListView
shines in this regard, but it’s also possible to accomplish this with code. Change the code in the constructor of ArticlesPage.cs:DataTemplate
to the ItemTemplate
property of the ListView
, which is an instruction to the ListView
on how to display each cell. It uses the built-in TextCell
(there are others provided by Xamarin such as ImageCell
and CustomCell
that allows developers to specify any content to display on the cell level). The key aspect to creating DataTemplate
s is Data-Binding, you need to specify two instructions to bind the values from the Article
object to the Text
and Detail
properties of the TextCell
.ContentPage
, this time named ArticleContentPage.cs. Doing the heavy lifting on this page is the WebView
control (Part of the Xamarin Forms platform), which will render the content of the provided URL.Article
property after the constructor that the first page sets before navigating.ListView
defines an ItemSelected
event, which will be registering to.null
ified SelectedItem
. Protection against this case is added at the start of the method.Navigation
property helper that implements modal and non-modal navigation.NavigationPage
to exist while both Android and Windows do not.WebView
instance and set its' source to the Article’s URL. This is enough for the WebView
to start rendering: