XAML Views and Binding

Chapter 3 introduced many controls to use inside a Windows Store App view. Let’s see how to use them in XAML markup. First, a view is a subclass of the Page class, which means that the root element of an XAML view is a Page element that can contain a layout controls with UI elements:

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

A Page (or the application in general) can contain more elements, and many of them might have the same property values. In this case, you can group common properties in a resource style to be reused in many contexts. For example, with this markup you can set the font size to 48 pixels and the background to red for all buttons in a Page:

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="FontSize" Value="48" />
        <Setter Property="Background" Value="Red" />
    </Style>
</Page.Resources>

The Page.Resources section defines all resources of the current page. Through its Setter properties, the Style element defines all the property values applied with the style. The required TargetType property selects the possible UI elements target of the style in the example Button elements. If you don’t specify the optional x:Name property, the style will be applied to all elements that match the TargetType property, which is very useful for a homogenous application look and feel. If you want to create a style for specified elements that match the style’s TargetType, you can set the property x:Name and use the XAML binding syntax to bind it to the elements. The previous example then becomes the following:

<Page.Resources>
    <Style x:Name="MyButtonStyle" TargetType="Button">
        <Setter Property="FontSize" Value="48" />
        <Setter Property="Background" Value="Red" />
    </Style>
</Page.Resources>

And the Button target of the style can be declared as follows:

<Button Content="Click Me" Style="{StaticResource MyButtonStyle}" />

One of the most important features introduced by the XAML syntax is declarative binding. By using starting and ending braces, you can indicate to the compiler that the content is not simply a string; it is an expression to evaluate during the parsing process. In the previous example, the Style property is binding to the MyButtonStyle resource. But the power of the binding expression can be appreciated when is used to bind UI controls with application model class properties or other UI control properties. For example, to show a Slider current value in a TextBlock, you can use the following XAML:

<Slider Name="MySlider" Minimum="0" Maximum="100" Width="500" />
<TextBlock Text="{Binding ElementName=MySlider, Path=Value}" />

The binding is bidirectional by default, but you can specify a property called Mode that can have one of these three values:

• OneTime: The binding is applied only once
• OneWay: For unidirectional binding
• TwoWay: For bidirectional binding (default)

When you bind a UI control with a data class property, the ElementName is not used because the Source instance of the class will be set typically through the DataContext property of the UI element or its parent, or the Source property of the binding. Look at this code:

C#
public class User
{
    public string Name { get; set; }
    public string Surname { get; set; }
}
 
VB
Public Class User
    Public Property Name As String
    Public Property Surname As String
End Class

If you have a domain class that represents a generic user of the application, you can set an instance of this class to the DataContext page, which will make it available to the page controls for the binding. You can create an instance of this class from the XAML, but the instance is usually created by a method of a business class. If you want to have a UserManager business class, you can write the following code:

C#
User myUser = userManager.GetUser();
this.DataContext = myUser;
 
VB
Dim myUser as User = userManager.GetUser()
Me.DataContext = myUser

The XAML binding expression of a form that permits user field management can be written as follow:

<TextBlock Text="Name: " />
<TextBox Text="{Binding Path=Name}" />
<TextBlock Text="Surname: " />
<TextBox Text="{Binding Path=Surname}" />

If the only binding property to set is Path, you can omit it; in the example, you can write {Binding Name} and {Binding Surname}.

XAML has many other features, and the binding expressions have many other options (we will explain them when they are used).

VB and C# Windows Store App Template

Now look at the project template for XAML and C# (on the left) and VB (on the right) in Figure 4-1.

A Windows Store App page has one XAML file and a correspondent code file with a .cs or .vb extension. Figure 4-1 shows MainPage.xaml and the corresponding MainPage.xaml.cs and MainPage.xaml.vb files. A special file is App.xaml (with the .cs and .vb files), which is used to manage the application life cycle. In the Windows 8.1 version, there is no need to keep the StandardStyle file because default styles are now part of the framework.

The Asset folder contains the required images used for the application: Logo.png, SmallLogo.png, SplashScreen.png, and StoreLogo.png.

HTML 5 and JavaScript

If you are a web developer, the good news is that you can reuse your skills for developing Windows Store Apps. After the great success of HTML 5 and CSS 3, Microsoft looks at the future: supporting the current draft of this standard (the final release is attending for 2014) in its browser, Internet Explorer (IE) and in its platform to meet the needs of the web developers with the many options offered by the new specifics.

Hypertext Markup Language (HTML) is a language that was born in the 1980s to supporting hypertext, the electronic text composed of linked pages available through the World Wide Web. Since the 1980s, the language has evolved and been standardized by the W3C (World Wide Web Consortium). It has two main objectives: a correct syntax for a correct semantic interpretation by the main browser and new features to adapt an old language to the new web requirements.

Windows Store Apps for JS support HTML 5. This means that you can use new tags in the markup code and implement some JS code for features in your apps.

Another very useful feature introduced with HTML 5 (and most used with Windows Store Apps), are the data-* attributes. You can use these attributes to store custom data in the page; for example, to store a validation message. Many JS frameworks, such as jQuery mobile and unobtrusive validation jQuery plugins, use this attribute. In the Windows Store, apps8 data-* are used to indicate the control used in the page and its parameter values. These values are used from the Windows Store App JS framework: WinJS.

C++

C++ programmers can develop Windows Store Apps without learning another language by using the knowledge garnered by years of experience. Unfortunately, Windows 8.1 architecture imposes some limitations on the classical C++ application development.

Here are some things you can do with C++:

• Write components for HTML5 and the JS UI
• Write the code-behind of the XAML UI
• Write the game engine for the DirectX UI

Games are very popular for users, and C++ with DirectX allows you to create high-performance 2D and 3D games, accessing the powerful hardware available on the PC and tablet as the Tegra processors. If you are interested in high-performance applications, C++ can be your best choice. The internal modules of Window 8.1 are also written in C++ and expose an external surface for the WinRT calls and for native calls.

XAML vs. HTML and CSS

Once again, based on the kind of application you are developing and what requirements you have, one language will be the best fit for you. Take, for example, the creation of a Windows Store App for a graphic-intensive game: of course, it is possible to use JS, but there might be a bit of performance degradation. As a matter of fact, controls such as Canvas or using Scalable Vector Graphics (SVG) don’t have the same performance as other technologies. For example, Canvas controls rebuild all pixels of the shapes to create motion, asking for resource to the runtime subsystem (remember that Windows Store Apps written in JS run by a process called wwahost, which provides a subset of IE features).

In this case, XAML for the UI and C++ plus the DirectX API have the best performance (DirectX is a set of APIs for game development). In this case, shapes rendering is more efficient.

C#, VB, C++, and JavaScript

A wise choice is to use a language you already know so you can reuse our skills during development. But sometimes you need to choose another way.

Indeed, considering what functional requirements are, it is possible to choose one language among the others. Let’s go back for a moment to the game application: if it is a 3D graphic-intensive game, C++ is the best choice because C++ is a low-level language that has low memory consumption). Native code differs from managed code because it lacks a Garbage Collector (GC) that is a component for handling memory inside programs (creating and freeing memory allocation). Besides, native code is directly compiled into machine code, whereas managed code is compiled into Microsoft Intermediate Language (MSIL). Of course, you can use C# to create a game application; just be aware of a minimal degradation of performance during execution.

A different case is porting. In this case, it is recommended to reuse the same technology or language and what is already created, and then adapt it to WinRT. If it is a WPF, Silverlight, or Windows Phone application, migration is simple. On the other hand, if it is a Windows Forms application, it might take more effort and time. If it is an ASP.NET application instead, it is recommended to use C# or VB; that’s why rewriting the whole back end in JS is not so simple. In the end, if it is a mobile application in HTML 5 and JS (or jQuery), it is better to use these technologies.

Another requirement might be the use of a programming pattern inside the code. C# and VB are object-oriented languages, and it is easier to also create a complex architecture using patterns such as Domain Driven Design or Test Driven Development. In this case, a database is often used to host data. As you will learn in Chapter 8, there are some differences that can help you decide on the best language or technology to use.

Few observations are linked to code obfuscation and the destination platform. Remember the following:

• JS is written in plain text.
• C#/VB is compiled in managed code (MSIL) and can be decompiled with tools such as .NET Reflector or ILspy.
• C++ is unmanaged code that generates machine code, and it is not easy to decompile (you will need a disassembler and few sleepless nights).

The destination platform could also be a decision point. .NET languages support “Any CPU” compilation, which means that the output assembly could run on x86 or x64 platforms (remember that the output assembly is in MSIL and needs a Common Language Runtime [CLR] to execute). It’s different for C++, in which the destination platform must be specified. Table 4-1 summarizes the key point differences.

Now you know that there are many reasons why one language is chosen over the others. What helps to make the decision is always the context (i.e., requirements, porting, game applications, and so on).