Q. What do those xmlns namespace directives at the root of an XAML page mean?

 

This is the first of three articles; This Article:

  • Introduction
  • Refactoring the Project folder and XAML namespace directives

 

Subsequent articles in this series cover:

 

Introduction

 

In the article on Xamarin.Forms Xaml Samples, ”Part 5. From Data Bindings to MVVM”, towards the end it presents an app ”Implementing a Navigation Menu” that displays a menu of sample Content pages.  The menu lists a Title and Description for each page as well as the page types which get instantiated upon menu selection.  The project,, as available on GitHub, has numerous XAMLContent pages, their C# Codebehind pages, some corresponding PageView classes as well as some miscellaneous function classes (called directly from the XAMLcode), all in one humongous project root folder. This article discusses refactoring the project folder by moving the files in the root into  logical subfolders and corresponding sub-namespaces. Included in this is a discussion of the namespace directives in the root on an XAMLpage.

 

Folders

<Project Root>\Views

<Project Root>\ViewModels

<Project Root>\Common

  • Views XamlSamples.Views namespace: All XAMLpages and their codebehind pages, except MainPage
  • ViewModels, XamlSamples.ViewModels namespace: All ViewModel pages except PageViewModel.cs
  • Common,, XamlSamples.Utilities: namspace: Several functional classes -  AppConstants, DoubleToIntConverter, NamedColor

 

Referencing of  in-app resources(i.e. use of local: ) in XAMLcode is also covered as part of this article.

 

Links:

 

What does the root tag of an XAML page mean?

In this activity, the said project is refactored by moving the files into conceptual folders and extending the namespace of the files there in so as to reflect the folder hierarchy. This has an impact upon the XAMLpages’ root tags references to those resources so lets examine the root tag attributes.

A  typical XAMLpage is structured as follows:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage root page tag>
       …
       XAML UI Tags
       …
</ContentPage>

The root tag (or root element) at the top of an XAMLpage contains a set of attribute declarations.

In the XAML attributes, references are made to classes and properties. If the properties are contained with in the page’s class, that is within the class’s codebehind, then no qualification is required. (Note, no nested classes within the class are permitted.) . XAMLnamespaces can be mapped in the root tag of an XAML file for other resources.

Lets dissect the  root tags for an Xamrin.Forms page and a UWP page:

<ContentPage 
             x:Class="XamlSamples.Views.ClockPage" 
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
             xmlns:local="clr-namespace:XamlSamples
             xmlns:viewmodels="clr-namespace:XamlSamples.ViewModels;assembly=XamlSamples         


             Title="Clock Page">

An Xamarin.Forms ContentPage 

<Page
             x:Class="AbersAGC2018.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="using:AbersAGC2018"

A UWP XAML page

The xmlns is short for xml-xaml namespace

The attributes in the tags are name spaces or URLs
The first attribute in both is the class to which the page belongs. If there is a codebehind page then it will have a partial class implementation of the code behind the page with that path.

  • The second attribute is the Default namespace and defines elements that can be declared without qualification (a prefix).
  • The third attribute in both refers to XAM standards Note that both URLs are the same except for a slightly different date so they are both conforming to XAML specifications. XAML elements on the pages must be constructed so as to  conform to the XAML syntax.
  • The local tag is usually used to reference the root namespace of the app. A local prefix is declared for this namespace although the prefix text used is actually arbitrary. Classes in the root namespace of then can referred to in page elements using the local: prefix.
  • The fifth attribute in the XF root tag refers to the XamlSamples.ViewModels namespace in the XamlSamples assembly. The page can then refer to classes in that namespace using the viewmodels: prefix.This is an example of a custom attribute. .
  • The final attribute in the XF root tag  is an optional Title property. Note that if you try to define a Title property in the page’s codebehind you get an error whether you specify here or not, as it is a property of every XAML Form class.

 

Classes can also be referenced with a using directive in XAMLcode much the same as in C# code.See the Utilities section below.

 

Ps: Note that here is an attempt to unify XAML called Xamarin Standard that can be used across targets such as Xamarin and UWP where an XAML page can be used without modification in all contexts.

 

Further Reading wrt XAML Namespaces:

XAML namespaces

XAML namespaces and namespace mapping

 

Refactoring the Project Folder

image

 

The Refactored project folder

 

For each ContentPage’s codebehind page, the namespace is changed from:

namespace XamlSamples

to:

namespace XamlSamples.Views

 

Similarly, in the ViewModels folder change the namespace for the classes to XamlSamples.ViewModels

 

For the ContentPage’s Xaml Page, Views was inserted into the class path. eg:

x:Class="XamlSamples.Views.ClockPage"

 

 

Where a ViewModel is referred to in an Xaml page ViewModels is inserted into the reference path and the local prefix was changed to viewmodels. eg:

             xmlns:viewmodels="clr-namespace:XamlSamples.ViewModels;assembly=XamlSamples"
…

…
        <Label.BindingContext>
            <viewmodels:ClockViewModel />
        </Label.BindingContext>


 

Utilities

An XAML page may refer to resources in utility classes for constants and functions. The namespace for a utility class or classes is declared in a using directive with a custom prefix (Common in this case) eg:

xmlns:common="using:XamlSamples.Common"

This can be referred to in a number of ways:

a) For a static constant (in a static class):

TextColor="{x:Static common:AppConstants.BackgroundColor}"

The relevant utility class code is:

namespace XamlSamples.Common
{
    static class AppConstants
    {
        public static readonly Color BackgroundColor = Color.Aqua;

 

b) To reference a method in a class

Same Xaml common using directive as above.

<common:DoubleToIntConverter x:Key="intConverter" />

Which is then to referred to as follows:

<Label Text="{Binding Color.R,
                                       Converter={StaticResource intConverter},
                                       ConverterParameter=255,
                                       StringFormat='R={0:X2}'}" />

The Common code is :

namespace XamlSamples.Common
{
    class DoubleToIntConverter : IValueConverter
    {
        public object Convert(object value, Type targetType,
                              object parameter, CultureInfo culture)
        {
        …….        
        }
        …….        
        …….
}

 

Next: (Part 2) Inserting MetaInformation to a class and generically returning it.