ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Microsoft XAML Based Apps

Updated on December 29, 2012

(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.


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"
        Title="Hello World from VS2012 - WPF" Height="350" Width="525"
        Background="BlueViolet" HorizontalAlignment="Center">
        <Style x:Key="helloLabel" TargetType="Label">
            <Setter Property="FontSize" Value="18"/>            
        <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"/>


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()

        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=""
  • xmlns:d=""

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:

<frame src="MyXbap.xbap" >

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.

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:

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


    0 of 8192 characters used
    Post Comment

    No comments yet.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)