Microsoft XAML Based Apps

Source

(c) 2012 kevin languedoc (klanguedoc)

Microsoft XAML is an XML based declarative programming language. Its full name is Xml Application Markup Language (XAML). The language is the basis for two important Microsoft application development technologies: Silverlight and Windows Presentation Foundation.

XAML continues to evolve and is one of the primary technologies to use when developing Windows 8 Metro apps. As was previously cited, there are two main implementation of the XAML and I will demonstrate these different implementations along with some background of WPF and Silverlight. On the Windows Presentation Foundation side, a developer can use it to create desktop applications (this also includes laptops, tablets, kiosks, etc.) or the developer can use WPF in a web site just like Silverlight. I provide a table that highlifgts the differences between the two when WPF is used for a web application.

Source

Windows Presentation Foundation

WPF was introduced with .Net 3.0 as a replacement, or least as a step towards industry standards of using Declarative Programming Languages like XML. In essence you are using XML to define a new programming language. Up until then, if a desktop application was required, you needed to use the GDI subsystem and build Windows Forms based apps. In contrast, WPF uses DirectX and XAML to render the user interface controls.

WPF applications can be developed as a Windows desktop application or hosted as a web site or embedded in a web site. For starters let’s look at a “Hello Word” WPF desktop app in Visual Studio.

If you haven’t installed Visual Studio 2010 Express or Visual Studio 2012 Express, go ahead and download either one of these versions from the Microsoft MSDN web site. They are free and quite powerful. i am using VS 2012 but the functionality is the same even if the visual layout of the IDE is slightly different as the two screenshots below demonstrates.

Visual Studio 2010 IDE
Visual Studio 2010 IDE | Source
Visual Studio 2012 IDE
Visual Studio 2012 IDE | Source

WPF - Desktop App
The first example will demonstrate a WPF app as a desktop application which can run on any device that is running Windows 7 and later, while Windows XP can run these apps if the required .Net framework is installed as well as the latest version of DirectX and Microsoft XML.

This walkthrough example assume you are using Visual Studio 2012, but as the screenshots demonstrate, the process is identical in VS2010 with the only exception being the layout of the Toolbox and Properties view.

Once VS2012 is open, select the “New Project” link from the Start Page, or from the File menu.

Then select the WPF Application template under the Visual C# / Windows or Visual Basic / Windows nodes in the New Project utility.

  • Fill in the Name, Location and solutionName fields.
  • Opt to enable “Create directory for solution” and click “OK” to create the project.

Once the project is created from the template, you are presented with minimalistic application that includes a windowed application in a visual designer ( 2) and a XAML editor (3). You can choose to layout the UI using components from the toolbox ( 1) and set the properties for these components in the Properties view ( 5 ). You can also browse the different objects in the project from the Solution view ( 4 ). While you can set many of the properties through the Properties, you can also set them directly through the XAML editor which includes Intellisense. This is what most developers do.

For our example, I will add Label and a Button to the Canvas. For the button, I name it “Say Hello” from the Properties view and for the Label, I named it “sayHelloLbl”, I set the border thickness to 10 (under Appearance in the Properties) and Border color to “AliceBlue” (Under Brush category in the Properties). the Alignment of the content was set to “Center” again in the Layout category in the Properties view. For the window canvas add the background property as in the following code listing and set the value to “BlueViolet”.

For the font size, I could have set it through the Properties view but opted instead to set it through the XAML editor. to create a style, you need to define where you will need to apply this style. Since I am setting the style for a component of the windowed application, this is where i will define the style as a Window.Resources (see code below). To initiate Intellisense type an angled bracket then type “W” which will to the first “W” in the list of objects. Select “Window” and press enter. Then add a period and a new list of properties and methods will appear. Select the “Resources” object and type a closing angled bracket as in the code below. Intellisense will automatically provide the ending corresponding element for you. Within the body of the XAML element type a new angled bracket and type “S” for style. Hit the “Enter” button to add the “Style” element. Next add an identifier to the style element using the x:Key property which i will call “helloLabel” and the TargetType property, which is “Label”. Add a closing angle bracket which will automatically add the closing element. within the style element add the “Setter” element using the same procedure as before and set the “Property” property to “FontSize” and add the Value property and set its value to “18”. To associated the style to our label, add the style property to the label, as in the code below, and set the value to {StaticResource helloLabel} as in the x:Key property in the window.Resources above.

To push (write) “Hello World” in the label, we need to add some code to the button which will be in C#. This works the same way for VB.Net less the different syntax style. Double click on the button control will bring up the code behind file MainWindow.xaml.cs which is the controller file for the xaml file. Locate the “Button_Click_1” method which was added for you when you doubled clicked on the control. Add the following code this.sayHelloLbl.Content = “Hello World”; to the method’s body so that when the button is clicked the “Hello World” text is added to the Label control. Click F5 to compile and run the app.

Hello World XAML - Desktop in VS2012

<Window x:Class="WpfHelloWorld.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Hello World from VS2012 - WPF" Height="350" Width="525"
        Background="BlueViolet" HorizontalAlignment="Center">
    <Window.Resources>
        <Style x:Key="helloLabel" TargetType="Label">
            <Setter Property="FontSize" Value="18"/>            
        </Style>
        
    </Window.Resources>
    <Grid>
        
        <Label x:Name="sayHelloLbl" Content="" HorizontalAlignment="Left" 
               VerticalAlignment="Top" Width="382" Height="83" Margin="70,175,0,0"
               BorderThickness="10" BorderBrush="AliceBlue"
               Style="{StaticResource helloLabel}"/>
        <Button Content="Say Hello" HorizontalAlignment="Left" Margin="217,80,0,0" 
                VerticalAlignment="Top" Width="75" RenderTransformOrigin="-0.72,0.455" Click="Button_Click_1"/>

    </Grid>
</Window>

C# Code to implement Button - Desktop VS2012

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfHelloWorld
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.sayHelloLbl.Content = "Hello World";
        }
    }
}
The running app
The running app | Source

WPF - Web App

The Windows Presentation Foundation framework can be equally used to create web applications. Visual Studio has a template for this type of project as well, its called “WPF Browser Application”. The code is exactly the same as a desktop app, except for the namespaces at the beginning of the application. For browser applications two extra namespaces are added:


  • xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  • xmlns:d="http://schemas.microsoft.com/expression/blend/2008"


The other difference is in the packaging and publishing. When the application is compiled, a package is created with the extension xbap. The XBAP (XAML Browser Application) package contains the executable, the application manifest as well as the deployment manifest. This package must be deployed to the web server (IIS), either in the host application root or in its own application folder. Like Silverlight, WPF Browser Apps requires a web application host to use xbap file. You can embed the xbap file in a frameset using the source (src) property like:

<html>
<head>...</head>
<frameset>
<frame src="MyXbap.xbap" >
</frameset>
</html>

Otherwise you can also allow users to download and install WPF Web Apps on the host’s computer. Somewhere on your web application add a link to download the application using Microsoft’s ClickOnce technology which will handle the installation. However this scenario works best in a corporate setting using Internet Explorer. I have tested a sample xbap app in Chrome and Firefox. Both browsers downloaded the app and ran the application using Internet Explorer instead of the original browser.

Silverlight
Several blogs (both inside and outside Microsoft) have alluded to the fact that Silverlight is on its last iteration. This is only partly true. What is true is the fact that with Windows 8 RT (RT=Runtime), you cannot install plugins in Internet Explorer or any other browser and this includes Java, Flash and of course Silverlight. But Microsoft never said that they wouldn’t support the language or technology. With Windows 8, Silverlight is supported on the desktop and web. However Silverlight is not supported for Windows RT apps since these must be downloaded from the Microsoft App Store much like Apple’s App Store. That said, XAML is fully supported on Windows RT for Store Apps as standalone applications much like desktop applications.

Visual Studio 2012 offers several templates to help you build the following Silverlight applications:

Template
Description
Silverlight Application
This is the default Silverlight app. This template creates a Silverlight app project as well as a web hosting project with a link to the Silverlight application.
Silverlight Class Library
This template also a developer to create a custom class compiled as a dll. This type of template doesn't have an UI.
Silverlight Business Application
This template is layered to allow a developer to create a data centric business application. The application is structure with a menu, an about page, a home page and a login page
Silverlight Navigation Application
This template creates an application with a custom menu and some sample pages.
WCF RIA Services Class Library
This template creates a bare bones web services application that is integrated with a Silverlight application

More by this Author


Comments

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working