XAML for Windows Embedded

XAML for Windows Embedded (XWE) is new name in Compact 2013 for what was previously called Silverlight for Windows embedded (SWE). XAML which means eXtensible Application Markup Language, is an XML based markup language that is used to specify the components, layout and function of the application’s user interface. Like .NET Windows Forms, this specification includes various controls including their attributes, methods and events. XAML code can also include data binding of control attributes to data specified in the XAML code or to other data sources. Unlike the original versions of Silverlight which used managed code, the code behind XWE applications is native code which means it can access the operating system features directly and make use of hardware acceleration. Hence XWE applications will be more efficient than if the code behind was managed code. Note that Windows 8 and Windows Phone 8 now provide the native code behind alternative with XAML applications.

XWE engenders a distinct separation between the user interface design and code to implement its functionality (code behind). The tools to do both, although closely linked, are separate tools. The designer will use Microsoft Blend to develop a rich layout for the application whereas the application developer will take this and generate a native code project for Visual Studio[1]. The developer and designer will work in unison starting with a specification of the application features. The designer will then separately develop the full UI laying out controls with visual effects, events and animations. The developer working in parallel will implement the code behind for the events and data bindings, possibly using test modules to test the code. Finally the two streams will be integrated to generate the final application.

Blend for Visual Studio 2012, which is Blend Version 5.0, is installed with Visual Studio 2012 and is a requirement for XWE development. When Platform Builder for Compact 2013 is installed two templates are added to Blend, one for C# and one for VB. The XWE Blend application is a managed code application and so the language chosen is what is used in that project (only) for such things as the event handlers. The application can be run and debugged in Blend but this will normally only focus upon the correctness of the UI functionality. When the native code application is generated, whilst the event handlers are translated, the code within them is discarded. The UI layout and attributes as well as its visual effects and animations are translated into native code though, which is the primary object of the design phase of the application development.

Development of the XAML UI in Blend is performed in a visual manner as with managed code Windows Forms applications. Controls are selected for a toolbox and placed on the canvas (form) and their properties are set. Blend being all about design, has a rich set of tools for setting the appearance of the UI controls which in Windows Forms would require significant coding. Event handlers are added to controls through the property pages and can be implemented in managed code for testing purposes. The XAML application can be built and debugged from within Blend. You can run the XAM test application in a browser (Silverlight was originally just a browser technology) or as a standalone application.

Note1: Unlike Windows Forms, Blend does not, by default, automatically generate names for controls. You need to make sure that you enter them in the property pages for the UI, particularly before adding event handlers. You can though set preferences so that controls are automatically named.

Note 2: It is possible for the XWE native code to host Win32 controls.

XAML supports basic geometric shapes, brushes, geometric transformations, animations and Storyboards, visual state, controls and templates, styles and resources. An XAML document is XML-based formatted and is used to serialize user interfaces into a Visual Tree. Each Visual tree is hierarchically organized into:

• Root element
• Namespaces
• Layout Root
• Content

In Listing 1.1 the XAML code for a simple UI that has the UserControl as the root element, two namespaces that it relies upon, the XAML class name for the control and its attributes, the Grid is the layout root and there are three controls within it. Note the event handlers for the two Button controls.

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="WindowsEmbeddedXamlApplication.MainPage"
	Width="640" Height="480">
	<Grid x:Name="LayoutRoot" Background="White">
		<Button x:Name="TimeButton" Content="Time"  Click="TimeButton_Click"/>
		<TextBox x:Name="TextBox1" Height="91" " Width="344"/>
		<Button x:Name="ExitButton" Content="Exit"  Click="ExitButton_Click"/>
	Grid>
UserControl>

Listing 13.1 - An XAML document for creating a simple UI

Figure 13.3: The User Interface specified in Listing 1.1

XWE supports animation through the IXRTransform and IXRStoryBoard classes. The IXRTransform class provides basic 2D transformations such as translate, rotate, scale, skew and matrix transformations. The IXRStoryBoard object is used to describe animations of multiple objects in a visual tree. Storyboards are used in the UI to provide feedback to the user and to provide transition effects between application screens.

Once the Blend XWE application is complete, it is ported into Visual Studio 2012 for implementation of the native code behind and to build and test the final application. Whilst this scan be done manually, the tool in Visual Studio, “XAML for Windows Embedded Platform Builder Subproject Wizard” which is actioned via the Tools menu, performs all of the heavy lifting. Chapter 16 works through an example of this. The outcome is a C++ native code source project that can be built with and used by a target Compact 2013 OS. An example of the generated C++ source code file is shown in Listing 1.2 . Note that any iterations with the designer, may just require copying the revised XAML code into the native code application, provided the changes are minor.

#include "stdafx.h"
#include "WindowsEmbeddedXamlApplication.h"
#include "MainPage.h"
#include "App.h"
#include "resource.h"
HRESULT MainPage::OnLoaded(__in IXRDependencyObject* pRoot)
{
    UNREFERENCED_PARAMETER(pRoot);
    HRESULT hr = InitializeComponent();
    if (FAILED(hr))
    {
        goto Error;
    }
    
    if (m_pTimeButton)
    {
        m_pTimeButton->AddClickEventHandler(CreateDelegate(this,
                                        &MainPage::TimeButton_Click));
    }
    if (m_pExitButton)
    {
        m_pExitButton->AddClickEventHandler(CreateDelegate(this,
                                         &MainPage::ExitButton_Click));
    }
Error:
    return hr;
} // OnLoaded
HRESULT MainPage::TimeButton_Click (IXRDependencyObject* pSender, XRMouseButtonEventArgs* pArgs)
{
    HRESULT hr = E_NOTIMPL;
    if ((NULL == pSender) || (NULL == pArgs))
    {
        hr = E_INVALIDARG;
    }
    return hr;
}
HRESULT MainPage::ExitButton_Click (IXRDependencyObject* pSender, XRMouseButtonEventArgs* pArgs)
{
    HRESULT hr = E_NOTIMPL;
    if ((NULL == pSender) || (NULL == pArgs))
    {
        hr = E_INVALIDARG;
    }
	return hr;
}
HRESULT MainPage::InitializeComponent()
{
    HRESULT hr = E_FAIL;
    FindName(L"LayoutRoot", &m_pLayoutRoot);
    FindName(L"TimeButton", &m_pTimeButton);
    FindName(L"TextBox1", &m_pTextBox1);
    FindName(L"ExitButton", &m_pExitButton);
    if (m_pLayoutRoot &&
        m_pTimeButton &&
        m_pTextBox1 &&
        m_pExitButton
       )
    {
        hr = S_OK;
    }
    return hr;
}

Listing 13.2 – Native source code generated from Blend application

As show in Figure 13.4, when an XWE application runs on a Compact 2013 device, it calls the XAML runtime binary to implement UI features, which in turn the graphics engine though the GDI (Graphics Device Interface) and the hardware graphics acceleration. The application also calls operating system features as required to implement the application logic.

Figure 13.4: XAML Runtime

To run XAML applications on a Compact 2013 devices in needs to the XAML for Windows Embedded runtime Catalog component. There is also an XAML Message Box component, a sample XAML shell for the OS as well as a number of different XAML themes. Customization of these XAML shell components will be available in the near future. XAML is essentially to way to develop rich UIs for Compact 2013. Changes to XAML for Compact 2013 include removal of the IE 7 XAML browser.

Note: Compact 2013 Control panel applets are all XAML based.

[1] The XAML code generated is just an XML file and therefore a text file and so in the native code project it is possible to modify the UI, or even to manually create the XAML code. XAML files can be added directly to a native code application as resources.

NEXT: Subproject Application Development

Click here to provide feedback and input