EditArticle

Edit Article XML Content

<document> <header> <issuecode /> <articlecode /> <zone /> <title>Exploring .NET MAUI: Styles, Navigation, and Reusable UI</title> <authors /> <copyright>CODE Magazine</copyright> <owner>CODE Magazine</owner> </header> <body> In Part 1 of this ongoing series on developing an application in .NET MAUI (https://tinyurl.com/3vz3f5j7), you learned the basics of XAML, XML namespaces, attributes, and elements. You created your first .NET MAUI application and ran that application on both a Windows computer and an Android emulator. And you learned how to lay out a basic data-entry page using a Grid and Stack Layouts. In this article, you’ll learn to apply styles so all pages in your application look consistent. You’ll create several pages and learn how to use the built-in navigation to move from one page to another. Using a ContentView control, you’ll create a header with data bindings that you can reuse on all pages in your application. Finally, you’ll add a border and a scroll viewer around all your controls. <h2>Applying Styles to Your Controls</h2> In the XAML you wrote in the previous article Exploring .NET MAUI: Getting Started (https://tinyurl.com/3vz3f5j7), you added attributes to many of the same types of controls to change the Margin, Padding, and Spacing properties. The problem with adding these attributes to individual controls is that if you wish to change them, you must find them all and change them one-by-one. Instead of applying attributes on each control, create a Style element to specify which attributes you wish to apply to all controls of the same type. For example, you can create a style that applies to all Label controls or to all Grid controls. Styles avoid you having to set the attributes on individual controls. There are a few different locations you may place these Style elements. Where you place them has different ramifications as to how those styles are applied to the controls. For example, if you create styles within a ContentPage, those styles are only available on that one page and no others. If you create styles in the App.xaml file, those styles are applied to all pages within the application. You may even create styles in a Class Library that allows many different .NET MAUI applications to reuse those same styles. <h3>Creating Style Elements</h3> Style elements belong inside a <Resources> element. A <Resources> element can be within a single control, on a ContentPage, for the whole application, and within resource dictionary files. The <Style> starting tag must contain a TargetType property into which you specify the type of control to target, as shown below. <codesnippet> < Style » TargetType = "HorizontalStackLayout" > </codesnippet> <codesnippet>»»//»Add»Setter»elements»here</codesnippet> <codesnippet> </ Style > </codesnippet> Within the Style element, place one or more <Setter> elements. Each Setter element sets a single property to a specific value for the TargetType specified. For example, on a HorizontalStackLayout, you can set the Spacing property using the following Setter element. Assign to the Property attribute the name of the property on the HorizontalStackLayout you wish to set. Set the Value property to the value you want for that property, as shown in the code snippet below. <codesnippet> < Style » TargetType = "HorizontalStackLayout" > </codesnippet> <codesnippet> »» < Setter » Property = "Spacing" </codesnippet> <codesnippet> »»»»»»»»»» Value = "5" »/> </codesnippet> <codesnippet> </ Style > </codesnippet> If you place this style within a <ContentPage.Resources> element at the top of the ContentPage, all the Spacing properties on all HorizontalStackLayout controls are set to the value of five (5). If you place this style in the App.xaml file within the <Application.Resources> element, this style applies to all HorizontalStackLayout controls on all pages in the application. <h3>Place Styles on the Content Page</h3> Let's start out by removing all the Margin, Padding, and Spacing properties from the XAML and place those settings into Style elements. Open the MainPage.xaml file and just after the starting <ContentPage> element and before the first starting <Grid> tag, add a new element called <ContentPage.Resources>, as shown in Listing 1. Remove the ColumnSpacing, RowSpacing, Margin, and Padding from the <Grid> element on this page. Remove the Spacing="5" and Padding="10" from the <VerticalStackLayout> element on this page. Remove the Spacing="5" from all <HorizontalStackLayout> elements on this page. <h3>Try It Out</h3> Run the application and notice that the spacing is still the same on the grid and stack layout controls as it was before you removed all the attributes. Also notice that the labels are aligned to each entry control appropriately. <h3>Place Styles at the Application Level</h3> Instead of limiting the defined styles to affect only one page, let's move these styles out of the <ContentPage.Resources> section and move them to the application level so all pages will be styled the same. Open the MainPage.xaml file and cut all Style elements from the <ContentPage.Resources> element. Don't remove the <ContentPage.Resources> element from the page yet. Open the App.xaml file and paste the <Style> elements you copied after the </ResourceDictionary.MergedDictionaries> closing element and before the </ResourceDictionary> closing element. <h3>Try It Out</h3> Most often when you change <Style> elements in the App.xaml file, you must restart the application for the changes to take effect. Restart the application and all the spacing should still be applied on your main page. <h3>What’s a Resource Dictionary?</h3> In the previous exercise, you placed styles within a <ResourceDictionary> element. A ResourceDictionary is a set of resources that can be used in a .NET MAUI application. You may store styles, colors, string and number constants, and data templates within a ResourceDictionary. ResourceDictionary elements can be defined in the App.xaml file as you just saw, or you can create a ResourceDictionary within a separate XAML file, which you‘ll do later in this article. <h3>Closest Style Wins</h3> Just like CSS in HTML, the closest style to the control it’s targeting will take precedence. For example, in the App.xaml file, you defined all Label controls to set their VerticalOptions property to "Center". However, open the MainPage.xaml file and add the Style within the <ContentPage.Resources> element from the next snippet. This Style element overrides the global style for all labels on this page because it’s closer to those controls. <codesnippet> < Style » TargetType = "Label" > </codesnippet> <codesnippet> »» < Setter » Property = " VerticalOptions " </codesnippet> <codesnippet> »»»»»»»»»» Value = " End " »/> </codesnippet> <codesnippet> </ Style > </codesnippet> <h3>Try It Out</h3> Run the application and notice that all labels on this page are now positioned toward the bottom of each entry control. After you have observed this change, remove the <ContentPage.Resources> element from the MainPage.xaml so it goes back to using the global styles. <h3>Keyed Styles</h3> All of the styles you created in the App.xaml file are called implicit styles because they implicitly affect all controls set with the TargetType property. Another kind of style is called a Keyed Style. A keyed style is where you set the x:Key="UniqueName" on the starting Style tag. Open the App.xaml file and change the <Style TargetType="Grid"> to add an x:Key attribute, as shown below. <codesnippet> < Style » TargetType = "Grid" </codesnippet> <codesnippet> »»»»»»» x:Key = "Grid.Page" > </codesnippet> Once you add the x:Key attribute, this style no longer affects all Grid controls. Instead, you need to explicitly reference this key name to apply it to a Grid control. <h3>Try It Out</h3> To see that this style no longer affects a Grid, stop and restart the application to get the global styles to take effect. When the page is displayed, you should notice that the margins are missing on the Grid control. <h3>Apply a Keyed Style</h3> To apply the Grid.Page keyed style to a Grid control, add the Style property on the Grid you want to apply the style to and reference the name of the key by using the StaticResource markup extension as shown below. <codesnippet> < Grid » RowDefinitions = "Auto,Auto,Auto,»..." </codesnippet> <codesnippet> »»»»»» ColumnDefinitions = "Auto,*" </codesnippet> <codesnippet> »»»»»» Style = "{StaticResource»Grid.Page}" > </codesnippet> Within the double quotes for the Style property, you’re using curly braces and a StaticResource markup extension. Think of a markup extension as a .NET class that performs some service for you. In this case, the StaticResource extension searches for a resource defined with the x:Key attribute equal to the value "Grid.Page". When the StaticResource extension locates the resource, it applies any Setter values to the control it’s attached to. <h3>Try It Out</h3> Restart the application and you should see that the spacing is once again being applied to the Grid control on your page. <h3>Styling the Shell</h3> To make the title bar area stand out from the rest of the page, add a style to change the background color and the title color. Open the App.xaml file and add the following keyed style where you placed the other styles in this file. <codesnippet> < Style » TargetType = "Element" </codesnippet> <codesnippet> »»»»»»» x:Key = "ShellStyle" > </codesnippet> <codesnippet> »» < Setter » Property = "Shell.BackgroundColor" </codesnippet> <codesnippet> »»»»»»»»»» Value = "Blue" »/> </codesnippet> <codesnippet> »» < Setter » Property = "Shell.TitleColor" </codesnippet> <codesnippet> »»»»»»»»»» Value = "White" »/> </codesnippet> <codesnippet> </ Style > </codesnippet> Open the AppShell.xaml file and in the <Shell> starting tag add the following Style attribute to apply the keyed style you just created named ShellStyle. <codesnippet> Style="{StaticResource»ShellStyle}"</codesnippet> <h3>Try It Out</h3> Restart the application and you should see that the title bar area is now white text on a blue background. <h3>Place Styles in a Resource Dictionary File</h3> Within your Visual Studio project, drill down into the Resources\Styles folder and you should see two files; Colors.xaml and Styles.xaml. It’s in these two files where the default look is contained for the standard .NET MAUI controls. The Colors.xaml file contains several color resources. The Styles.xaml files uses the colors from the Colors.xaml file to define the look of the .NET MAUI controls as well as setting various properties such as Padding, Heights, Widths, and Fonts of the controls. Open the App.xaml file and within the <ResourceDictionary> element where you placed your styles, there’s a <ResourceDictionary.MergedDictionaries> element in which you’ll find two ResourceDictionary elements with the Source property set to the Colors.xaml and Styles.xaml files respectively. As a normal practice, you’ll most likely place your styles after these two files because you’ll want to override the default styles. Previously, you added styles directly in the App.xaml file. You’re now going to create your own Resource Dictionary file within the Resources\Styles folder and reference that file by adding your own ResourceDictionary in the <ResourceDictionary.MergedDictionaries> element. Right mouse-click on the Resources\Styles folder and select Add > New Item… > .NET MAUI > .NET MAUI ResourceDictionary (XAML) from the menu and set the name to AppStyles.xaml. Within the <ResourceDictionary> element in this new file, place the XAML shown in Listing 2. Open the App.xaml file and just after the ResourceDictionary element that has the Source property set to Resources/Styles/Styles.xaml, add a reference to your new AppStyles.xaml file, as shown in the following XAML. <codesnippet> < ResourceDictionary </codesnippet> <codesnippet> »»» Source = " Resources/Styles/AppStyles.xaml " »/> </codesnippet> Because you added all the styles from the App.xaml file into your own resource dictionary file, you may now remove all the styles from the App.xaml file. <h3>Try It Out</h3> Restart the application to ensure that your new AppStyles.xaml file is compiled and your page looks just like it did before. <h3>Override a Style from the Styles.xaml File</h3> To further illustrate that your AppStyles.xaml file overrides the default styles created by Microsoft in the Styles.xaml file, let's change the text and background colors of the Button control. Open the Resources\Styles\AppStyles.xaml file and add the following Style element under the Global Styles comment. <codesnippet> < Style » TargetType = "Button" > </codesnippet> <codesnippet> »» < Setter » Property = "TextColor" </codesnippet> <codesnippet> »»»»»»»»»» Value = "White" »/> </codesnippet> <codesnippet> »» < Setter » Property = "BackgroundColor" </codesnippet> <codesnippet> »»»»»»»»»» Value = "Black" »/> </codesnippet> <codesnippet> </ Style > </codesnippet> <h3>Try It Out</h3> Restart the application and you should see that the two buttons on your page have white text on a black background. Once you’ve verified that this works, remove the Button style you just added so it goes back to the default colors. <h3>String Resources</h3> In a ResourceDictionary, you can create other types of resources besides styles. For example, you have repeated the string value "Adventure Works" twice in your application: once in the MainPage.xaml and once in the AppShell.xaml file. Instead of hard coding this string value in multiple places, open the Resources\Styles\AppStyles.xaml file and before all other styles, add the following keyed resource. <codesnippet>  </codesnippet> <codesnippet>  </codesnippet> <codesnippet>  </codesnippet> <codesnippet> < x:String » x:Key = "ApplicationTitle" > </codesnippet> <codesnippet>»»Adventure»Works</codesnippet> <codesnippet> </ x:String > </codesnippet> Now that you have a keyed string resource, reference it from wherever in the application it is needed. Open the AppShell.xaml file and modify the Title property to reference this keyed resource using the StaticResource markup extension as shown in the following code: <codesnippet>Title="{StaticResource»ApplicationTitle}"</codesnippet> Open the MainPage.xaml file and modify the Title property to reference this keyed resource using the StaticResource markup extension as shown in the following code: <codesnippet>Title="{StaticResource»ApplicationTitle}"</codesnippet> <h3>Try It Out</h3> Run the application to ensure the title appears as you expect on the window shell and your page. <h3>Numeric Resources</h3> In the AppStyles.xaml file, there are four Value properties in the Grid.Page keyed style set to the number ten (10). Instead of repeating the number ten that many times, create a double resource set to the number ten, as shown in the following XAML: <codesnippet> < x:Double » x:Key = "DefaultSpacingForGrid" > </codesnippet> <codesnippet>»»10</codesnippet> <codesnippet> </ x:Double > </codesnippet> Modify the Grid.Page keyed style to use this new double resource by using the StaticResource markup extension in the Value attribute on each Setter as shown in the following XAML: <codesnippet> < Style » TargetType = "Grid" </codesnippet> <codesnippet> »»»»»»» x:Key = "Grid.Page" > </codesnippet> <codesnippet> »» < Setter » Property = "ColumnSpacing" </codesnippet> <codesnippet> »»»»» Value = " {StaticResource» </codesnippet> <codesnippet> »»»»»»»»»»»»»DefaultSpacingForGrid} " »/> </codesnippet> <codesnippet> »» < Setter » Property = "RowSpacing" </codesnippet> <codesnippet> »»»»» Value = " {StaticResource </codesnippet> <codesnippet> »»»»»»»»»»»»»DefaultSpacingForGrid} " »/> </codesnippet> <codesnippet> »» < Setter » Property = "Margin" </codesnippet> <codesnippet> »»»»» Value = " {StaticResource </codesnippet> <codesnippet> »»»»»»»»»»»»»DefaultSpacingForGrid} " »/> </codesnippet> <codesnippet> »» < Setter » Property = "Padding" </codesnippet> <codesnippet> »»»»» Value = " {StaticResource </codesnippet> <codesnippet> »»»»»»»»»»»»»DefaultSpacingForGrid} " »/> </codesnippet> <codesnippet> </ Style > </codesnippet> <h3>Try It Out</h3> Restart the application and you should see that the spacing on the Grid is the same as it was before. <h3>Create Styles in a .NET MAUI Class Library</h3> To create a set of styles that you can reuse across multiple .NET MAUI applications, place your styles into a .NET MAUI Class Library project. A class library project is a DLL (assembly) that can be referenced from any .NET MAUI application. Let's add one to the solution by right mouse-clicking on the solution and selecting Add > New Project… from the menu. Search for .NET MAUI Class Library and select that template. Set the Project name field to Common.Library.MAUI and click the Next button. Choose the same .NET version you used to create your .NET MAUI application. Once the application is created, delete the Class1.cs file as this isn’t needed in this assembly. I like keeping the same folder structure for my .NET MAUI Class Library projects as for the main application, so right mouse-click on the new project and select Add > New Folder. Set the name of this new folder to Resources. Right mouse-click on the Resources folder and select Add > New Folder. Set the name of this new folder to Styles. Right mouse-click on the Styles folder and select Add > New Item… from the menu. Click on the .NET MAUI tab and select the template .NET MAUI ResourceDictionary (XAML). Set the Name field to CommonStyles.xaml. After adding this new ResourceDictionary, add the XAML shown in REF _Ref163284371 \h \* MERGEFORMAT Listing 3. This is the same XAML you have in the AdventureWorks.MAUI project, but you’re going to delete that XAML in just a minute. Go back to the AdventureWorks.MAUI project and right mouse-click on the Dependencies folder. Choose Add Project Reference… from the menu and add a reference to the Common.Library.MAUI project you just created. Open the Resources\Styles\AppStyles.xaml file in the AdventureWorks.MAUI project and remove everything from this file except the <x:String x:Key=ApplicationTitle"> element. Open the App.xaml file and add an XML namespace to reference the ResourceDictionary namespace you created in the Common.Library.MAUI project, as shown in the following code. Due to space limitations of this article, I had to break this across multiple lines. Please make sure when adding to your project that the following is all on one line. <codesnippet>xmlns:common="clr-namespace:</codesnippet> <codesnippet>»»Common.Library.MAUI.Resources.Styles;</codesnippet> <codesnippet>»»»»assembly=Common.Library.MAUI"</codesnippet> The CommonStyles.xaml file you created earlier has a partial class defined in the CommonStyles.xaml.cs file. This class, CommonStyles, is defined within the Common.Library.Resources.Styles namespace. The resources in the CommonStyles.xaml file are compiled into resources that you may now reference from the "common" XML namespace alias you added to App.xaml. Just before the <ResourceDictionary Source="Resources\Styles\AppStyles.xaml" /> element, add the following element. <codesnippet> < common:CommonStyles »/> </codesnippet> The styles from the CommonStyles.xaml file are now available for you to use throughout the AdventureWorks.MAUI application. <h3>Try It Out</h3> Run the application and you should see that the main page still looks the same. <h2>Create Several Pages</h2> So far, you’ve worked only with a single page, MainPage.xaml. In most applications, you’re going to have many different pages. You’re obviously going to need some way to navigate from one page to another. .NET MAUI has a nice navigation system built-in, but before you can learn about that, you need to create some pages, so let's do that now. <h3>Create a User Detail Page</h3> I prefer to put all my pages underneath a folder named Views. Right mouse-click on the project and add a new folder named Views. Right mouse-click on the Views folder and select Add > New Item > .NET MAUI > .NET MAUI ContentPage (XAML)… from the context-sensitive menu. Set the Name of the page to UserDetailView. Once the page has been added, change the Title attribute on the ContentPage to "User Information". Delete the <VerticalStackLayout> element and all XAML within it on this new page. Open the MainPage.xaml file, cut the complete <Grid> element from this page and paste it into the ContentPage element on the UserDetailView.xaml file. <h3>Update the Main Page</h3> Open the MainPage.xaml and where the <Grid> control was that you cut out, add the <Label> element you see in the following XAML snippet. The MainPage is only going to be used to show the application title in this article series. Other uses for the main page might be as a dashboard with large buttons to navigate to the pages most commonly used, or as description of the application. <codesnippet> < Label » Text = "{StaticResource»ApplicationTitle}" </codesnippet> <codesnippet> »»»»»»» FontSize = "Large" </codesnippet> <codesnippet> »»»»»»» VerticalOptions = "Center" </codesnippet> <codesnippet> »»»»»»» HorizontalOptions = "Center" »/> </codesnippet> Open the MainPage.xaml.cs file and cut the SaveButton_Clicked() event procedure and paste it into the UserDetailView.xaml.cs file. <h3>Create Several More Pages</h3> You’re now going to create a few more content pages that you can navigate to in your application. On each page, you’re going to be adding a Label control with text to identify each page. Right mouse-click on the Views folder and add a new .NET MAUI ContentPage (XAML) named LoginView. Change the Title attribute to "Login". Replace the entire <VerticalStackLayout> element with the following XAML: <codesnippet> < Label » Text = "Login" </codesnippet> <codesnippet> »»»»»»» FontSize = "Large" </codesnippet> <codesnippet> »»»»»»» VerticalOptions = "Center" </codesnippet> <codesnippet> »»»»»»» HorizontalOptions = "Center" »/> </codesnippet> Right mouse-click on the Views folder and add a new .NET MAUI ContentPage (XAML) named ProductDetailView. Change the Title attribute to "Product Information". Replace the entire <VerticalStackLayout> element with the following XAML: <codesnippet> < Label » Text = "Product»Information" </codesnippet> <codesnippet> »»»»»»» FontSize = "Large" </codesnippet> <codesnippet> »»»»»»» VerticalOptions = "Center" </codesnippet> <codesnippet> »»»»»»» HorizontalOptions = "Center" »/> </codesnippet> Right mouse-click on the Views folder and add a new .NET MAUI ContentPage (XAML) named CustomerDetailView. Change the Title attribute to "Customer Information". Replace the entire <VerticalStackLayout> element with the following XAML: <codesnippet> < Label » Text = "Customer»Information" </codesnippet> <codesnippet> »»»»»»» FontSize = "Large" </codesnippet> <codesnippet> »»»»»»» VerticalOptions = "Center" </codesnippet> <codesnippet> »»»»»»» HorizontalOptions = "Center" »/> </codesnippet> Right mouse-click on the Views folder and add a new .NET MAUI ContentPage (XAML) named ColorListView. Change the Title attribute to "Color List". Replace the entire <VerticalStackLayout> element with the following XAML: <codesnippet> < Label » Text = "Color»List" </codesnippet> <codesnippet> »»»»»»» FontSize = "Large" </codesnippet> <codesnippet> »»»»»»» VerticalOptions = "Center" </codesnippet> <codesnippet> »»»»»»» HorizontalOptions = "Center" »/> </codesnippet> Right mouse-click on the Views folder and add a new .NET MAUI ContentPage (XAML) named PhoneTypesListView. Change the Title attribute to "Phone Types List". Replace the entire <VerticalStackLayout> element with the following XAML. <codesnippet> < Label » Text = "Phone»Types»List" </codesnippet> <codesnippet> »»»»»»» FontSize = "Large" </codesnippet> <codesnippet> »»»»»»» VerticalOptions = "Center" </codesnippet> <codesnippet> »»»»»»» HorizontalOptions = "Center" »/> </codesnippet> <h2>Navigation in .NET MAUI Applications</h2> Now that you have several pages created, it’s time to learn to navigate among the different pages. The Shell control in .NET MAUI uses a URI-based navigation scheme to route between different pages in your application. There are a few different types of navigation schemes that you may employ in your application. You may use a FlyoutItem, which is a tab bar for your application and is accessible through an icon, or by swiping from the side of the screen. Another navigation scheme is a TabBar, which is a set of tabs displayed either at the top or bottom of the screen depending upon which OS your application is running. Regardless of which navigation scheme you choose, both ShellContent and Tab objects are used. A ShellContent object references a single page in your application to which you want to navigate. A Tab object is a wrapper around one or more ShellContent objects. If you’re running on Windows, a Tab object with more than one ShellContent object creates a drop-down set of tabs of the enclosed ShellContent objects. If you’re running on a mobile device, the Tab object appears as bottom tabs with the ShellContent objects within that Tab shown as top tabs when the bottom tab is selected. <h3>The ShellContent Object</h3> The ShellContent object has many properties, but there are a few that you’ll set most often. The Title property is used to set the word(s) you want to display on the tab. The Icon property is the icon to display along with the text. You also have the IsChecked, IsEnabled, and IsVisible properties to set the currently highlighted tab, whether or not the current tab is enabled, or whether or not it’s visible, respectively. The Route property is an optional string to uniquely identify the tab/route. If you set the Route property, this property is used to navigate to that specific route. The ContentTemplate property is set to a reference of the actual page to display within the application shell. The syntax you use in the ContentTemplate property is a DataTemplate markup extension followed by the name of the page. For example, ContentTemplate="{DataTemplate views:UserDetailView}" navigates to the UserDetailView page you created. <h3>Using TabBar Navigation</h3> Let's create a TabBar navigation system for the pages you’ve added to your .NET MAUI application. Because you added all of the pages to the Views folder, they’re located within the AdventureWorks.MAUI.Views namespace. Thus, if you want to use a page from the Views namespace in a ShellContent object, you need to add a reference to that namespace. Open the AppShell.xaml file and add a new XML namespace, as shown in the following code snippet. Please note that I had to break the line just after the colon so it fits within the printed version of this publication. The entire code should be on a single line when you add it to the <Shell> element. <codesnippet>xmlns:views="clr-namespace:</codesnippet> <codesnippet>»»AdventureWorks.MAUI.Views"</codesnippet> The <Shell> element currently in the AppShell.xaml file is a single ShellContent object pointing to the MainPage. Delete that ShellContent object from within the <Shell> element and add the following XAML to display tabs to navigate to the home, the UserDetailView, the ProductDetailView, and the CustomerDetailView page: <codesnippet> < TabBar > </codesnippet> <codesnippet>»»<ShellContent»Title="Home"</codesnippet> <codesnippet> »»»» ContentTemplate = "{DataTemplate </codesnippet> <codesnippet> »»»»»»local:MainPage}" »/> </codesnippet> <codesnippet>»»<ShellContent»Title="Users"</codesnippet> <codesnippet> »»»» ContentTemplate = "{DataTemplate </codesnippet> <codesnippet> »»»»»»views:UserDetailView}" »/> </codesnippet> <codesnippet>»»<ShellContent»Title="Products"</codesnippet> <codesnippet> »»»» ContentTemplate = "{DataTemplate </codesnippet> <codesnippet> »»»»»»views:ProductDetailView}" »/> </codesnippet> <codesnippet>»»<ShellContent»Title="Customers"</codesnippet> <codesnippet> »»»» ContentTemplate = "{DataTemplate </codesnippet> <codesnippet> »»»»»»views:CustomerDetailView}" »/> </codesnippet> <codesnippet> </ TabBar > </codesnippet> <h3>Try It Out on Windows</h3> Run the application on Windows to display the window shell with the tabs shown in Figure 1. Click on each of the tab items to navigate to the corresponding pages. Finally, click on the Home tab to navigate back to the Main page. <figure id="1" src="image1.png"> Figure 1: Running the application on Windows displays tab items at the top of the window.</figure> <h3>Try It Out on the Android Emulator</h3> Change Visual Studio to run the application on the Android Emulator. The tabs should now be displayed at the bottom of the page, as shown in Figure 2. Click on each of the various tabs at the bottom of the page to navigate to the corresponding pages. Click on the Home menu to navigate back to the Main page. <figure id="2" src="image2.png"> Figure 2: ShellContent objects appear as a set of bottom tabs on an Android device.</figure> <h3>Display Subordinate Tabs</h3> You can create a tab that doesn’t directly navigate to a page, but instead displays a set of tabs either in a drop-down on Windows, or as a set of top tabs on an Android device. Open the AppShell.xaml file and immediately after the Customers ShellContent object, add the following XAML: <codesnippet> < Tab » Title = "Maintenance" > </codesnippet> <codesnippet>»»<ShellContent»Title="Colors"</codesnippet> <codesnippet> »»»» ContentTemplate = "{DataTemplate </codesnippet> <codesnippet> »»»»»»views:ColorListView}" »/> </codesnippet> <codesnippet>»»<ShellContent»Title="Phone»Types"</codesnippet> <codesnippet> »»»» ContentTemplate = "{DataTemplate </codesnippet> <codesnippet> »»»»»»views:PhoneTypesListView}" »/> </codesnippet> <codesnippet> </ Tab > </codesnippet> <codesnippet> < ShellContent » Title = "Login" </codesnippet> <codesnippet> »» ContentTemplate = "{DataTemplate </codesnippet> <codesnippet> »»»»views:LoginView}" »/> </codesnippet> <h3>Try It Out on Windows</h3> Restart the application on the Windows Machine, click on the down arrow next to the word Maintenance and you should see a drop-down list of tabs, as shown in Figure 3. <figure id="3" src="image3.png"> Figure 3: Display a set of drop-down tab items on Windows machines.</figure> <h3>Try It Out on the Android Emulator</h3> Stop the application and change Visual Studio to use the Android Emulator. Run the application and you should now see a More... tab displayed, as shown in Figure 4. When there are more than four tabs, this More... tab is displayed to allow you to get to the next set of tabs. <figure id="4" src="image4.png"> Figure 4: A More tab item is displayed when there are more tabs than fit within the displayable area on a mobile device.</figure> Click on the More... tab to see the Maintenance and Login tabs appear, as shown in Figure 5. <figure id="5" src="image5.png"> Figure 5: The next set of tabs are displayed after clicking on the More tab.</figure> Click on Maintenance and you should see Colors and Phone Types menus appear at the top of the screen, as shown in Figure 6. <figure id="6" src="image6.png"> Figure 6: ShellContent objects wrapped within a Tab object are displayed on the top bar on mobile devices.</figure> <h3>Programmatically Navigate from Page to Page</h3> Right mouse-click on the Views folder and add a new content page named UserListView. Set the Title attribute to "User List". Replace the <VerticalStackLayout> with the following XAML: <codesnippet> < VerticalStackLayout » VerticalOptions = "Center" </codesnippet> <codesnippet> »»»»»»»»»»»»»»»»»»»»» HorizontalOptions = "Center" </codesnippet> <codesnippet> »»»»»»»»»»»»»»»»»»»»» Spacing = "10" > </codesnippet> <codesnippet>»»<Label»Text="User»List"</codesnippet> <codesnippet> »»»»»»»»» FontSize = "Header" </codesnippet> <codesnippet> »»»»»»»»» HorizontalOptions = "Center" »/> </codesnippet> <codesnippet>»»<Button»Text="Navigate»to»Detail"</codesnippet> <codesnippet> »»»»»»»»»» Clicked = "NavigateToDetail_Clicked" »/> </codesnippet> <codesnippet> </ VerticalStackLayout > </codesnippet> Create the Clicked event procedure by positioning your cursor anywhere within the double quotes of the Clicked attribute. Press the F12 key and the NavigateToDetail_Clicked() event procedure stub is created for you. Modify the procedure declaration to include the async keyword and add a single line of code within the procedure, as shown in the following code snippet: <codesnippet> private » async » void » </codesnippet> <codesnippet> »» NavigateToDetail_Clicked ( object »sender, </codesnippet> <codesnippet> »»»»EventArgs»e ) »{</codesnippet> <codesnippet> await »Shell.Current </codesnippet> <codesnippet> »»»».GoToAsync( nameof (Views.UserDetailView)); </codesnippet> <codesnippet>}</codesnippet> In the above code, you access the application shell object through the Shell property of the ContentPage class to navigate to another page. Pass the name of the route to the GoToAsync() method and the Shell loads that page and displays it. Always use the C# nameof() function to resolve the route name, as it avoids any typos that could produce a runtime error. If you add the Route attribute to a Shell object as a string, you may pass this string to the GoToAsync() method as well. Modify the Shell to call this new page instead of the user detail page you created earlier. Open the AppShell.xaml file and modify the <ShellContent> element that used to call the UserDetailView page and replace it with a call to the UserListView page, as shown in the following XAML: <codesnippet> < ShellContent » Title = "Users" </codesnippet> <codesnippet> »» ContentTemplate = "{DataTemplate </codesnippet> <codesnippet> »»»»views:UserListView}" »/> </codesnippet> <h3>Register the Route</h3> All of the ShellContent objects in the AppShell.xaml file create a global route table that .NET MAUI uses to navigate to each page. Because you removed the UserDetailView ShellContent object, it’s now no longer a part of this global route table. If you tried to run the application right now and clicked on the Navigate to Detail button, you’d receive a runtime error that the route does not exist. Instead of using XAML to create the route table, you may add as many other routes as you need using C#. Open the AppShell.xaml.cs file and in the constructor register the route to the UserDetailView page using the following code: <codesnippet> public » AppShell () »{</codesnippet> <codesnippet>»»InitializeComponent();</codesnippet> <codesnippet> »»//»Register»route s </codesnippet> <codesnippet>»»Routing.RegisterRoute(</codesnippet> <codesnippet>»»»nameof(Views.UserDetailView),</codesnippet> <codesnippet>»»»typeof(Views.UserDetailView));</codesnippet> <codesnippet>}</codesnippet> The above code adds the name of the UserDetailView page, and the C# type of UserDetailView to the global route table. Now the routing engine knows which page to display when you request the route name of UserDetailView. <h3>Try It Out</h3> Restart the application and click on the Users menu. Click on the Navigate to Detail button and you should see the User Information page appear. <h2>Create Reusable UI</h2> One of the basic tenets of programming is that you should only write code once, then reuse it as many times as you want. This applies when designing your UI as well. On the user detail view page, the first three rows would be nice to have on all of the pages, so each looks consistent. The first row is a short title to uniquely identify the page. The second row is a short description to describe what this page is used for. The third row is a line to separate the header information from the unique details on the page. Of course, the title and short description should be able to be modified from each page on which these two labels are placed. To create a custom reusable view onto which you can place any controls and then have those controls appear on any other page, use a ContentView control. The ContentView control is a container onto which you place as many controls as you want. You then place the ContentView control onto the page(s) you wish to use that group of controls. <h3>Create a Header View</h3> Let's create a custom "header" view onto which you can place the two labels and the box view control you used on the user detail view page. Right mouse-click on the project and add a new folder named ViewsPartial. Right mouse-click on the ViewsPartial folder and select Add > New Item > .NET MAUI > .NET MAUI ContentView (XAML)… from the context-sensitive menu. Set the name of the ContentView to HeaderView. Add to the <ContentView> starting tag an x:Name attribute, as shown below, so you may reference the ContentView control named HeaderView by using the name "header". <codesnippet>x:Name="header"</codesnippet> Replace the <VerticalStackLayout> element of this new file with the XAML shown in Listing 4. <h3>The Basics of Data Binding</h3> There are a few pieces of this code that need a little explanation as you’re now using data binding. Data binding is a powerful tool that helps you eliminate C# code to control how data is shared between different objects. In the code in REF _Ref164078564 \h \* MERGEFORMAT Listing 4, two Label controls have been placed onto this ContentView control and their Text property has been set to a markup extension called Binding. This Binding class has a Path property to which you set the name of a property on your ContentView control. You’re going to create two C# properties in the code-behind of this HeaderView control named ViewTitle and ViewDescription. There is also a FallbackValue property on the Binding class to which you specify a default value if the property being bound to is null or empty. For the Binding class to know where the property is located, a BindingContext must be set either on the Label controls or on one its parent controls. If you look at the Grid control (which is the parent of the Label controls) you see that the BindingContext property is set on this control. This BindingContext property is set the markup extension x:Reference, which references the x:Name attribute that has been set on the ContentView control. By referencing the ContentView control using the name, it identifies the HeaderView class is the object that has the properties to reference. <h3>Create Bindable Properties</h3> You now need to create the ViewTitle and ViewDescription properties on the HeaderView class. You can't just create normal C# properties with simple getters and setters. A BindableProperty object is used to create the backing fields for both the properties. By using a BindableProperty object, the UI is automatically notified when a property value changes. Open the ViewsPartial\HeaderView.xaml.cs file and add two bindable properties just below the constructor, as shown in Listing 5. <h3>Add Header to the User Detail View</h3> Now that you have your reusable header view, it’s time to add it to the different pages. Open the Views\UserDetailView.xaml file and add the following XML namespace within the <ContentPage>. <codesnippet>xmlns:partial="clr-namespace:AdventureWorks</codesnippet> <codesnippet>»».MAUI.ViewsPartial"</codesnippet> Delete the first two Label controls and the BoxView control within the Grid and replace those controls with the following XAML. You’re adding a reference to the HeaderView control located in the namespace aliased by partial. Because the ViewTitle and ViewDescription are public properties, you can set these properties on this control. Be sure that the quoted string for ViewDescription is only on a single line when you type this code into Visual Studio. <codesnippet> < partial:HeaderView » Grid.Row = "0" </codesnippet> <codesnippet> »» Grid.ColumnSpan = "2" </codesnippet> <codesnippet> »» ViewTitle = "User»Information" </codesnippet> <codesnippet> »» ViewDescription = "Use»this»screen»to» </codesnippet> <codesnippet> »»»»»modify»user»information." »/> </codesnippet> You deleted three rows from the Grid control on this page and only replaced one row, so remove two "Auto" values from the RowDefinitions property on the Grid. You now also need to renumber the remaining rows in the <Grid> by reducing each by two (2). Go ahead and renumber all the rows now. <h3>Try It Out</h3> Run the application and click on Users > Navigate to Detail to view this page with the new reusable header. Notice that the ViewTitle and ViewDescription properties are set to the values you used in the XAML you just typed in. <h3>Add a Header to the Login View</h3> Open the Views\LoginView.xaml file and add the following XML namespace as an attribute on the <ContentPage> element: <codesnippet>xmlns:partial="clr-namespace:AdventureWorks</codesnippet> <codesnippet>»».MAUI.ViewsPartial"</codesnippet> Delete the <Label> element that is currently in this ContentPage and add the XAML shown in Listing 6 where the <Label> was. Notice that the ViewTitle and ViewDescription properties are set to different values than those you used on the user detail view page. Also notice the use of the IsPassword property on the second Entry control. Setting this property ensures that no one can see the password as you are typing into this control. <h3>Try It Out</h3> Run the application and click on the Login menu to view this page. You should see the reusable header above the other controls on this page. <h3>Add a Header to the Product Detail View</h3> Open the Views\ProductDetailView.xaml file and add the following XML namespace as an attribute on the <ContentPage> element. <codesnippet>xmlns:partial="clr-namespace:AdventureWorks</codesnippet> <codesnippet>»».MAUI.ViewsPartial"</codesnippet> Delete the <Label> element that is currently in this ContentPage and add the XAML shown in Listing 7 where the <Label> was. <h3>Try It Out</h3> Run the application and click on the Products menu to view this page with the reusable header and the various controls. Don't worry if some of the controls are cropped off at the bottom of the window. You’ll fix this later. <h2>Add a Border on All Pages</h2> A Border control allows you to draw any size border around a control, or a set of controls. Use the StrokeThickness property to set the size in device-independent pixels. The default size is one pixel. The Stroke property sets the color for the border outline. The default color is light gray. Open the MainPage.xaml file and replace the <Label> element with the following XAML to draw a border around the label on the main page. <codesnippet> < Border » StrokeThickness = "2" </codesnippet> <codesnippet> »»»»»»»» HorizontalOptions = "Center" </codesnippet> <codesnippet> »»»»»»»» VerticalOptions = "Center" </codesnippet> <codesnippet> »»»»»»»» Padding = "10" > </codesnippet> <codesnippet>»»<Label»Text="{StaticResource»ApplicationTitle}"</codesnippet> <codesnippet> »»»»»»»»» FontSize = "Large" »/> </codesnippet> <codesnippet> </ Border > </codesnippet> <h3>Try It Out</h3> Run the application and see the border around the application title on the main page. <h3>Create a Keyed Border Style</h3> I like to wrap a border around each of my pages to make it stand out a little from the edges of the window on which it’s hosted. Wrap a Border control around all grids on each page by creating a keyed style to define the standard look for the border on each page. Open the Resources\Styles\CommonStyles.xaml file in the Common.Library.MAUI project and add the keyed style named Border.Page as shown in the XAML below: <codesnippet> < Style » TargetType = "Border" </codesnippet> <codesnippet> »»»»»»» x:Key = "Border.Page" > </codesnippet> <codesnippet> »» < Setter » Property = "Stroke" </codesnippet> <codesnippet> »»»»»»»»»» Value = "Gray" »/> </codesnippet> <codesnippet> »» < Setter » Property = "StrokeThickness" </codesnippet> <codesnippet> »»»»»»»»»» Value = "1" »/> </codesnippet> <codesnippet> »» < Setter » Property = "Margin" </codesnippet> <codesnippet> »»»»»»»»»» Value = "10" »/> </codesnippet> <codesnippet> »» < Setter » Property = "HorizontalOptions" </codesnippet> <codesnippet> »»»»»»»»»» Value = "Fill" »/> </codesnippet> <codesnippet> »» < Setter » Property = "VerticalOptions" </codesnippet> <codesnippet> »»»»»»»»»» Value = "Fill" »/> </codesnippet> <codesnippet> </ Style > </codesnippet> Let's now apply this keyed border style on a Border control that you wrap around each Grid control on each of your pages. Open the Views\LoginView.xaml file and wrap a <Border> element around the Grid control. Don't forget to add a closing </Border> tag just after the closing </Grid> tag. Add the Style attribute to the border and reference the Border.Page keyed style. <codesnippet> < Border » Style = "{StaticResource»Border.Page}" > </codesnippet> <codesnippet>»»<Grid»...></codesnippet> <codesnippet>»»»»//»REST»OF»THE»XAML»HERE</codesnippet> <codesnippet>»»</Grid></codesnippet> <codesnippet> </ Border > </codesnippet> Open the Views\ProductDetail.xaml file and wrap a <Border> around the Grid control using the keyed style Border.Page. <codesnippet> < Border » Style = "{StaticResource»Border.Page}" > </codesnippet> <codesnippet>»»<Grid»...></codesnippet> <codesnippet>»»»»//»REST»OF»THE»XAML»HERE</codesnippet> <codesnippet>»»</Grid></codesnippet> <codesnippet> </ Border > </codesnippet> Open the Views\UserDetailView.xaml file and wrap a <Border> around the Grid control using the keyed style Border.Page. <codesnippet> < Border » Style = "{StaticResource»Border.Page}" > </codesnippet> <codesnippet>»»<Grid»...></codesnippet> <codesnippet>»»»»//»REST»OF»THE»XAML»HERE</codesnippet> <codesnippet>»»</Grid></codesnippet> <codesnippet> </ Border > </codesnippet> <h3>Try It Out</h3> Run the application and click on each menu item of the changed files to view the border around each screen. <h2>Add a ScrollView to all Pages</h2> With the application running, click on the Products menu and reduce the main window to show how the controls on the bottom of the page are cropped. Because you never know what the screen size is going to be that the user is running on, it’s a good idea to wrap your controls on a page within a scrollable area. This is accomplished by using a ScrollView control. Open the Views\ProductDetailView.xaml file and wrap a <ScrollView> element around the <Grid> element as shown in the following XAML: <codesnippet> < Border » ... > </codesnippet> <codesnippet> »» < ScrollView > </codesnippet> <codesnippet>»»»»<Grid»...></codesnippet> <codesnippet>»»»»</Grid></codesnippet> <codesnippet> »» </ ScrollView > </codesnippet> <codesnippet> </ Border > </codesnippet> Wrap the same <ScrollView> element around the <Grid> element shown in the previous XAML to both the Views\UserDetailView.xaml file and the Views\LoginView.xaml file. <h3>Try It Out</h3> Run the application, click on the Products menu, and reduce the main window size to show that it now displays a scroll bar. Click on the Users menu > Navigate to Detail button and see the scroll bar appear on the User Detail page. <h2>Summary</h2> In this article, you used styles to make all pages in your application look consistent. Styles may be placed at many different locations. Which location you choose determines how reusable those styles are. Several pages were created, and you learned how to use the built-in navigation to move from one page to another. Using a ContentView control when you want to create reusable UI for several (or all) pages in your application. Use data binding to change property values on the ContentView control. Coming up in the next article, you’ll start using the many different input controls and learn which ones should be used for specific input data types. In addition, you’re going to learn much more about data binding. You’ll see how data binding can be used to bind one control to another, and to bind properties in a class to controls on your forms. </body> <sidebars> <sidebar title="Getting the Sample Code"> You can download the sample code for this article by visiting www.CODEMag.com under the issue and article, or by visiting www.pdsa.com/downloads. Select "Articles" from the Category drop-down. Then select "Exploring .NET MAUI: Styles, Navigation, and Reusable UI" from the Item drop-down. </sidebar> </sidebars> <tables /> <codelistings> <codelisting id="1" header="Listing 1: Add a set of Style elements to apply attributes to the same types of controls."> <code> <?xml»version= "1.0" »encoding= "utf-8" »?> </code> <code> < ContentPage » ... > » </code> <code /> <code> < ContentPage.Resources > »»»» </code> <code> »» < Style » TargetType = "Grid" > </code> <code> »»»» < Setter » Property = "ColumnSpacing" </code> <code> »»»»»»»»»»»» Value = "10" »/> </code> <code> »»»» < Setter » Property = "RowSpacing" </code> <code> »»»»»»»»»»»» Value = "10" »/> </code> <code> »»»» < Setter » Property = "Margin" </code> <code> »»»»»»»»»»»» Value = "10" »/> </code> <code> »»»» < Setter » Property = "Padding" </code> <code> »»»»»»»»»»»» Value = "10" »/> </code> <code> »» </ Style > </code> <code>»»<Style»TargetType="Label"></code> <code> »»»» < Setter » Property = " VerticalOptions " </code> <code> »»»»»»»»»»»» Value = "Center" »/> </code> <code> »» </ Style > </code> <code>»»<Style»TargetType="HorizontalStackLayout"></code> <code> »»»» < Setter » Property = "Spacing" </code> <code> »»»»»»»»»»»» Value = "5" »/> </code> <code> »» </ Style > </code> <code> </ ContentPage.Resources > </code> <code /> <code> < Grid » ... > </code> <code /> <code>//»REST»OF»THE»XAML</code> </codelisting> <codelisting id="2" header="Listing 2: Create a resource dictionary file into which you create your custom styles."> <code>  </code> <code>  </code> <code>  </code> <code> < Style » TargetType = "Grid" </code> <code> »»»»»»»» x:Key = "Grid.Page" > </code> <code> »» < Setter » Property = "ColumnSpacing" </code> <code> »»»»»»»»»» Value = "10" »/> </code> <code> »» < Setter » Property = "RowSpacing" </code> <code> »»»»»»»»»» Value = "10" »/> </code> <code> »» < Setter » Property = "Margin" </code> <code> »»»»»»»»»» Value = "10" »/> </code> <code> »» < Setter » Property = "Padding" </code> <code> »»»»»»»»»» Value = "10" »/> </code> <code> </ Style > </code> <code> < Style » TargetType = "Element" </code> <code> »»»»»»» x:Key = "ShellStyles" > </code> <code> »» < Setter » Property = "Shell.BackgroundColor" </code> <code> »»»»»»»»»» Value = "Blue" »/> </code> <code> »» < Setter » Property = "Shell.TitleColor" </code> <code> »»»»»»»»»» Value = "White" »/> </code> <code> </ Style > </code> <code /> <code>  </code> <code>  </code> <code> »»</code> <code> < Style » TargetType = "Label" > </code> <code> »» < Setter » Property = " VerticalOptions " </code> <code> »»»»»»»»»» Value = "Center" »/> </code> <code> </ Style > </code> <code> < Style » TargetType = "HorizontalStackLayout" > </code> <code> »» < Setter » Property = "Spacing" </code> <code> »»»»»»»»»» Value = "5" »/> </code> <code> </ Style > </code> </codelisting> <codelisting id="3" header="Listing 3: Move resources and styles into the common MAUI library resource dictionary."> <code>  </code> <code>  </code> <code>  </code> <code> < x:Double » x:Key = "DefaultSpacingForGrid" > </code> <code>»»10</code> <code> </ x:Double > </code> <code /> <code>  </code> <code>  </code> <code>  </code> <code> < Style » TargetType = "Grid" </code> <code> »»»»»»» x:Key = "Grid.Page" > </code> <code> »» < Setter » Property = "ColumnSpacing" </code> <code> »»»» Value = "{StaticResource </code> <code> »»»»»»DefaultSpacingForGrid}" »/> </code> <code> »» < Setter » Property = "RowSpacing" </code> <code> »»»» Value = "{StaticResource </code> <code> »»»»»»DefaultSpacingForGrid}" »/> </code> <code> »» < Setter » Property = "Margin" </code> <code> »»»» Value = "{StaticResource </code> <code> »»»»»»DefaultSpacingForGrid}" »/> </code> <code> »» < Setter » Property = "Padding" </code> <code> »»»» Value = "{StaticResource </code> <code> »»»»»»DefaultSpacingForGrid}" »/> </code> <code> </ Style > </code> <code> < Style » TargetType = "Element" </code> <code> »»»»»»» x:Key = "ShellStyles" > </code> <code> »» < Setter » Property = "Shell.BackgroundColor" </code> <code> »»»»»»»»»» Value = "Blue" »/> </code> <code> »» < Setter » Property = "Shell.TitleColor" </code> <code> »»»»»»»»»» Value = "White" »/> </code> <code> </ Style > </code> <code /> <code>  </code> <code>  </code> <code>  </code> <code> < Style » TargetType = "Label" > </code> <code> »» < Setter » Property = " VerticalOptions " </code> <code> »»»»»»»»»» Value = "Center" »/> </code> <code> </ Style > </code> <code> < Style » TargetType = "HorizontalStackLayout" > </code> <code> »» < Setter » Property = "Spacing" </code> <code> »»»»»»»»»» Value = "5" »/> </code> <code> </ Style > </code> </codelisting> <codelisting id="4" header="Listing 4: Create a reusable header view that can be placed onto many pages."> <code> < Grid » BindingContext = "{x:Reference»header}" </code> <code> »»»»»» RowDefinitions = "Auto,Auto,Auto" > </code> <code>»»<Label»Grid.Row="0"</code> <code> »»»»»»»»» Text = "{Binding»Path=ViewTitle, </code> <code> »»»»»»»»»»»FallbackValue='View»Title'}" </code> <code> »»»»»»»»» HorizontalOptions = "Center" </code> <code> »»»»»»»»»» FontSize = "Title" »/> </code> <code>»»<Label»Grid.Row="1"</code> <code> » »»»»»»»» Grid.ColumnSpan = "2" </code> <code> »»»»»»»»» Text = "{Binding»Path=ViewDescription, </code> <code> »»»»»»»»»»»»FallbackValue='View»Description'}" </code> <code> »»»»»»»»» HorizontalOptions = "Center" </code> <code> »»»»»»»»» FontSize = "Body" »/> </code> <code>»»<BoxView»Grid.Row="2"</code> <code> »»»»»»»»»»» HeightRequest = "1" </code> <code> »»»»»»»»»»» Color = "Black" »/> </code> <code>»</Grid></code> </codelisting> <codelisting id="5" header="Listing 5: Connect UI label text with data set into the bindable properties."> <code> public»string»ViewTitle»{</code> <code> »» get»{»</code> <code>»»»»return»(string)GetValue(ViewTitleProperty);»</code> <code>»»}</code> <code>»»set»{</code> <code>»»»»SetValue(ViewTitleProperty,»value);»</code> <code>»»}</code> <code>}</code> <code /> <code> public»static»readonly»BindableProperty</code> <code>»»ViewTitleProperty»=</code> <code>»»»»BindableProperty.Create("ViewTitle",</code> <code>»»»»»»typeof(string),»typeof(HeaderView),»</code> <code>»»»»»»string.Empty);</code> <code /> <code> public»string»ViewDescription»{</code> <code>»»get»{»</code> <code>»»»»return»(string)GetValue(</code> <code>»»»»»»ViewDescriptionProperty);»</code> <code>»»}</code> <code>»»set»{»</code> <code>»»»»SetValue(ViewDescriptionProperty,»value);</code> <code>»»}</code> <code>}</code> <code /> <code> public»static»readonly»BindableProperty</code> <code>»»ViewDescriptionProperty»=</code> <code>»»»»BindableProperty.Create("ViewDescription",</code> <code>»»»»»»typeof(string),»typeof(HeaderView),</code> <code>»»»»»»string.Empty);</code> </codelisting> <codelisting id="6" header="Listing 6: Use the header view partial page on all pages for a consistent look and feel."> <code> < Grid » RowDefinitions = "Auto,Auto,Auto,Auto" </code> <code> »»»»»» ColumnDefinitions = "Auto,*" </code> <code> »»»»»» Style = "{StaticResource»Grid.Page}" > </code> <code /> <code>»»<partial:HeaderView»Grid.Row="0"</code> <code> »»»»»» Grid.ColumnSpan = "2" </code> <code> »»»»»» ViewTitle = "Login" </code> <code> »»»»»» ViewDescription = "Use»this»screen»to» </code> <code> »»»»»»»»login»to»this»application." »»/> </code> <code /> <code>»»<Label»Grid.Row="1"</code> <code> »»»»»»»»»» Text = "Login»ID" »/> </code> <code>»»<Entry»Grid.Row="1"</code> <code> »»»»»»»»»» Grid.Column = "1" </code> <code> »»»»»»»»»» Text = "" »/> </code> <code>»»<Label»Grid.Row="2"</code> <code> »»»»»»»»»» Text = "Password" »/> </code> <code>»»<Entry»Grid.Row="2"</code> <code> »»»»»»»»»» Grid.Column = "1" </code> <code> »»»»»»»»»» IsPassword = "True" »/> </code> <code>»»<HorizontalStackLayout»Grid.Row="3"</code> <code> »»»»»»»»»»»»»»»»»»»»»»»»»» Grid.Column = "1" > </code> <code>»»»»<Button»Text="Login"»/></code> <code>»»»»<Button»Text="Cancel"»/></code> <code>»»</HorizontalStackLayout></code> <code> </ Grid > </code> <code /> </codelisting> <codelisting id="7" header="Listing 7 Create the product detail view with many label and entry controls."> <code> < Grid » RowDefinitions = "Auto,Auto,Auto,Auto, </code> <code> »»Auto,Auto,Auto,Auto,Auto,Auto,Auto, </code> <code> »»Auto,Auto,Auto" » </code> <code> »»»»»» ColumnDefinitions = "Auto,*" </code> <code> »»»»»» Style = "{StaticResource»Grid.Page}" > </code> <code /> <code>»»»»<partial:HeaderView»Grid.Row="0"</code> <code> »»»»»» Grid.ColumnSpan = "2" </code> <code> »»»»»» ViewTitle = "Product»Information" </code> <code> »»»»»» ViewDescription = "Use»this»screen»to» </code> <code> »»»»»»»»»modify»product»information." »»/> </code> <code /> <code>»»»»<Label»Text="Product»Name"</code> <code> »»»»»»»»»»»» Grid.Row = "1" »/> </code> <code>»»»»<Entry»Grid.Column="1"</code> <code> »»»»»»»»»»»» Grid.Row = "1" »/> </code> <code>»»»»<Label»Text="Product»Number"</code> <code> »»»»»»»»»»»» Grid.Row = "2" »/> </code> <code>»»»»<Entry»Grid.Row="2"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<Label»Text="Color"</code> <code> »»»»»»»»»»»» Grid.Row = "3" »/> </code> <code>»»»»<Entry»Grid.Row="3"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<Label»Text="Cost"</code> <code> »»»»»»»»»»»» Grid.Row = "4" »/> </code> <code>»»»»<Entry»Grid.Row="4"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<Label»Text="Price"</code> <code> »»»»»»»»»»»» Grid.Row = "5" »/> </code> <code>»»»»<Entry»Grid.Row="5"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<Label»Text="Size"</code> <code> »»»»»»»»»»»» Grid.Row = "6" »/> </code> <code>»»»»<Entry»Grid.Row="6"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<Label»Text="Weight"</code> <code> »»»»»»»»»»»» Grid.Row = "7" »/> </code> <code>»»»»<Entry»Grid.Row="7"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<Label»Text="Category"</code> <code> »»»»»»»»»»»» Grid.Row = "8" »/> </code> <code>»»»»<Entry»Grid.Row="8"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<Label»Text="Model"</code> <code> »»»»»»»»»»»» Grid.Row = "9" »/> </code> <code>»»»»<Entry»Grid.Row="9"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<Label»Text="Selling»Start»Date"</code> <code> »»»»»»»»»»»» Grid.Row = "10" »/> </code> <code>»»»»<Entry»Grid.Row="10"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<Label»Text="Selling»End»Date"</code> <code> »»»»»»»»»»»» Grid.Row = "11" »/> </code> <code>»»»»<Entry»Grid.Row="11"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<Label»Text="Discontinued»Date"</code> <code> »»»»»»»»»»»» Grid.Row = "12" »/> </code> <code>»»»»<Entry»Grid.Row="12"</code> <code> »»»»»»»»»»»» Grid.Column = "1" »/> </code> <code>»»»»<HorizontalStackLayout»Grid.Row="13"</code> <code> »»»»»»»»»»»»»»»»»»»»»»»»»»» Grid.Column = "1" > </code> <code>»»»»»»<Button»Text="Save"»/></code> <code>»»»»»»<Button»Text="Cancel"»/></code> <code>»»»»</HorizontalStackLayout></code> <code> </ Grid > </code> </codelisting> </codelistings> <Errors> <Error>Sidebar found, but no caption specified. Sidebar cannot be added.</Error> <Error>Sidebar found, but no caption specified. Sidebar cannot be added.</Error> <Error>Sidebar found, but no caption specified. Sidebar cannot be added.</Error> </Errors> </document>

Add New Technology/Category
Category Name: *	(Example: .NET)
Category Group: (optional)	(Example: .NET, Visual Studio, Web Development)