Click here to Skip to main content
15,860,859 members
Articles / Desktop Programming / XAML
Article

Understanding WPF via ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.87/5 (47 votes)
22 May 2008CPOL6 min read 159.6K   2.5K   78   33
Shows how certain WPF concepts can be easily understood via ASP.NET.

Introduction

Like many people, I struggled to get to grips with WPF because it seemed so "alien" when programming a desktop based application. It seemed so different, and I just couldn't apply knowledge that I already had - and then one day, it hit me. I'd been approaching this from the wrong angle, completely. By applying thinking from ASP.NET, I could relate what I knew to WPF. Obviously, WPF offered so much more, but it gave me a head-start.

We aren't going to go too deep into WPF. I'm going to show the same application written in ASP.NET and WPF, and we'll take a look at how the different parts of the code relate. We'll also take a look at some of the ways that WPF is fundamentally different, even though, superficially, it looks the same.

This article is not aimed at examining the differences between programming stateless and stateful applications. We aren't going to concern ourselves with worrying about issues such as round-trips and maintaining state.

Overview

Before we go any further, let's take a look at the application we're going to create. It's a simple application that reads data from an XML file and displays it in a list. There's nothing complicated going on in it, and we are going to accomplish all the "clever" stuff. The data that we are going to bind to looks like this:

XML
<?xml version="1.0" encoding="utf-8" ?>
<People>
    <Person Name="Josh" Handle="RockStar" IQ="10000" />
    <Person Name="Sacha" Handle="The Bloginator" IQ="10000" />
    <Person Name="Karl" Handle="The MoleMan" IQ="10000" />
    <Person Name="Pete" Handle="Pretender to the throne" IQ="10" />
</People>

The ASP.NET application looks like this:

Picture1.jpg

The WPF application looks like this:

picture2.jpg

The ASP.NET application

The code for the ASP.NET application is shown here:

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" 
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>Sample App</title>
    <style type="text/css" media="all">
      td 
      { 
        font-family : Tahoma; 
        font-size : 10px; 
      }
      .iqStyle
      {
        font-family : Verdana;
        font-size : 14px;
        font-style : italic;
      }
    </style>
  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataSourceID="XmlDataSource1" ShowHeader="False">
          <Columns>
            <asp:BoundField DataField="Name" />
            <asp:BoundField DataField="Handle" />
            <asp:BoundField DataField="IQ" ItemStyle-CssClass="iqStyle" />
          </Columns>
        </asp:GridView>
      </div>
      <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Sample.xml" 
        XPath="/People/Person"></asp:XmlDataSource>
    </form>
  </body>
</html>

As you can see, there's not a lot to it. Basically, we create an XmlDataSource and bind it to a GridView. There are a couple of styles that we've added manually to control formatting, but there is no clever code going on here. The binding is all taken care of here for us.

The WPF application

Now, let's take a look at the code for the WPF version:

XML
<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2006" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
  x:Class="WpfSampleApp.Window1"
  x:Name="Window"
  Title="Sample App"
  Width="380" Height="240">
  <Window.Resources>
    <XmlDataProvider x:Key="PeopleSource" d:IsDataSource="True" Source="Sample.xml"/>
    <Style TargetType="ListBox">
      <Setter Property="Control.FontFamily" Value="Tahoma" />
      <Setter Property="Control.FontSize" Value="10" />
    </Style>
    <Style x:Key="FontStyle">
      <Setter Property="Control.FontFamily" Value="Verdana" />
      <Setter Property="Control.FontStyle" Value="Italic" />
      <Setter Property="Control.FontSize" Value="12"/>
    </Style>
    <DataTemplate x:Key="PersonTemplate">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <TextBlock Width="40" Grid.Column="0" 
         Text="{Binding Mode=OneWay, XPath = @Name}" />
      <TextBlock Width="130" Grid.Column="1" 
         Text="{Binding Mode=OneWay, XPath=@Handle}" />
      <TextBlock Width="Auto" Grid.Column="2" 
        Text="{Binding Mode=OneWay, XPath = @IQ}" 
        Style="{StaticResource FontStyle}" />
    </Grid>
    </DataTemplate>
  </Window.Resources>
  <Grid x:Name="LayoutRoot">
    <ListBox Padding="3" HorizontalAlignment="Left" Width="Auto" 
      ItemTemplate="{DynamicResource PersonTemplate}" 
      ItemsSource="{Binding Mode=Default, Source={StaticResource PeopleSource}, 
      XPath=/People/Person}" VerticalAlignment="Top" Height="Auto"/>
  </Grid>
</Window>

I used Expression Blend to put this together (hint - if you're serious about WPF, then you really need to get a copy of Blend; it makes your life so much easier). It uses an XmlDataSource to bind to a ListBox, which we're going to format to display the data from the XML file. Again, notice that I haven't had to write a single line of C# - it's all done in the XAML.

Styles

As mentioned before, we created a couple of styles in the ASP.NET application. Similarly, we created a couple of styles in the WPF application, which do roughly the same thing. In this section, we're going to take a look at the two types of styles we created.

Type selectors

In CSS, a type selector allows you to match a style to every instance of this type in the document tree. So, we're going to change the font of every TD element to 10px Tahoma.

WPF allows you to do the same by creating a style that is applied to a particular TargetType. In our example, we change the font of every ListBox in the window to size 10 Tahoma.

Careful readers will notice that I didn't say that the size of the font in the ListBox is 10 pixels. Here's one of the first changes to get your head round in WPF, namely the fact that WPF is resolution independent. This means that we no longer think of things in terms of pixels - so, a 1 inch button on a 96DPI monitor will be a 1 inch button on a 140DPI monitor.

Named styles

In the ASP.NET application, we created a named style that changed the font to 12px Italic Verdana. Again, WPF allows us to set a named style that changes the font to size 12 Italic Verdana. In order to apply the style in ASP.NET, we used ItemStyle-CssClass="iqStyle". Applying the style in WPF is similarly easy; here we use Style="{StaticResource FontStyle}". The {...} section utilises binding to actually apply the values - the StaticResource provides references to previously loaded resources, so is useful here for inline styles. WPF does allow you to create the equivalent of external stylesheets. Josh Smith has provided excellent tutorials on using external resources. (My favourite is this one).

Data binding

In both applications, we are using XPath to retrieve the values from the XML. In both cases, we created a DataSource which linked to the XML file, and then said how we wanted to display it.

In ASP.NET, we declared that we wanted to use a set of BoundFields to display each portion of the data.

The WPF we have used here is more powerful because we have separated out how we would like our items to be displayed from the container that will actually display it. This means that we can use the same template in different containers - thus maintaining consistency, and removing duplication. In the WPF code, the template is the portion in the DataTemplate section. This states that we want to display one row of data per item, with three columns. Each item is displayed in a TextBlock, which is a general purpose text class, and is bound to a particular element using one way data binding.

In our sample, the actual consumer of this DataTemplate is the ListBox. The ItemsSource tells the runtime that we want to bind the data in the datasource to our listbox. As mentioned, the Grid in the DataTemplate represents one row of data. The ItemTemplate simply tells the application which template to apply on each row and, to a certain extent, could be thought of as being analogous to the RowDataBound method on the GridView. So, for each row of data, we're going to create a grid represented in the PersonTemplate.

Conclusion

I hope that this article has whetted your appetite enough for you to want to start playing around with WPF. If you have experience in ASP.NET, then certain elements in WPF become a lot easier to understand. The team behind WPF has obviously learned a lot of lessons from ASP.NET, and has put this to good use. By thinking of WPF elements in terms of how applications are developed in ASP.NET, a lot of the concepts will suddenly fall into place. Obviously, I've glossed over a lot of the details about how to use WPF, and I'm not claiming that WPF should be used for web development, but it shows how that particular mindset can give you a head-start.

Possibly, the biggest initial hurdle you will face is getting familiar with how WPF utilises binding, which goes way beyond just binding to items in a database. Once you start to appreciate how it allows you to bind to just about anything in the application, you realise how much you can accomplish without having to write any C# (or VB.NET).

Suggested reading

I'm not going to link to articles, but can I suggest that you read the WPF articles by Josh Smith, Karl Shiflett, and Sacha Barber? They have produced some fantastic tutorials, aimed at all levels.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
CEO
United Kingdom United Kingdom
A developer for over 30 years, I've been lucky enough to write articles and applications for Code Project as well as the Intel Ultimate Coder - Going Perceptual challenge. I live in the North East of England with 2 wonderful daughters and a wonderful wife.

I am not the Stig, but I do wish I had Lotus Tuned Suspension.

Comments and Discussions

 
QuestionMy vote of 5 Pin
abbaspirmoradi6-Oct-13 2:06
professionalabbaspirmoradi6-Oct-13 2:06 
GeneralNice article for Beginners Pin
RuchiH15-Jul-13 1:11
RuchiH15-Jul-13 1:11 
GeneralMy vote of 3 Pin
pawansk1-Jul-12 21:41
pawansk1-Jul-12 21:41 
QuestionExcellent Article! Pin
Vitaly Tomilov10-Oct-10 23:13
Vitaly Tomilov10-Oct-10 23:13 
GeneralThis is how WPF made sense to me too! Pin
Charles T II11-Jun-09 7:24
Charles T II11-Jun-09 7:24 
GeneralRe: This is how WPF made sense to me too! Pin
Pete O'Hanlon11-Jun-09 9:42
subeditorPete O'Hanlon11-Jun-09 9:42 
GeneralExcellent Pin
Richard MacCutchan11-Feb-09 23:55
mveRichard MacCutchan11-Feb-09 23:55 
GeneralRe: Excellent Pin
Pete O'Hanlon12-Feb-09 9:12
subeditorPete O'Hanlon12-Feb-09 9:12 
Generalsuperb Pin
shahed hasan17-Sep-08 23:01
shahed hasan17-Sep-08 23:01 
GeneralRe: superb Pin
Pete O'Hanlon17-Sep-08 23:39
subeditorPete O'Hanlon17-Sep-08 23:39 
GeneralExcellent Pin
Mohammad Dayyan24-Aug-08 11:56
Mohammad Dayyan24-Aug-08 11:56 
GeneralRe: Excellent Pin
Pete O'Hanlon24-Aug-08 22:59
subeditorPete O'Hanlon24-Aug-08 22:59 
GeneralCool Pin
Syed Mehroz Alam27-May-08 8:17
Syed Mehroz Alam27-May-08 8:17 
GeneralRe: Cool Pin
Pete O'Hanlon27-May-08 9:02
subeditorPete O'Hanlon27-May-08 9:02 
GeneralGreat Job Pete! Pin
User 27100925-May-08 8:07
User 27100925-May-08 8:07 
GeneralRe: Great Job Pete! Pin
Pete O'Hanlon25-May-08 8:29
subeditorPete O'Hanlon25-May-08 8:29 
GeneralRe: Great Job Pete! Pin
User 27100925-May-08 8:41
User 27100925-May-08 8:41 
GeneralRe: Great Job Pete! Pin
Pete O'Hanlon25-May-08 8:54
subeditorPete O'Hanlon25-May-08 8:54 
GeneralRe: Great Job Pete! Pin
User 27100925-May-08 8:57
User 27100925-May-08 8:57 
GeneralGreat! Pin
Balamurali Balaji25-May-08 4:47
Balamurali Balaji25-May-08 4:47 
GeneralRe: Great! Pin
Pete O'Hanlon25-May-08 8:26
subeditorPete O'Hanlon25-May-08 8:26 
General[Message Removed] Pin
Mojtaba Vali24-May-08 18:27
Mojtaba Vali24-May-08 18:27 
GeneralRe: good article Pin
Pete O'Hanlon25-May-08 8:25
subeditorPete O'Hanlon25-May-08 8:25 
GeneralBy jove I think you've got it Pin
Sacha Barber22-May-08 8:15
Sacha Barber22-May-08 8:15 
GeneralRe: By jove I think you've got it Pin
Pete O'Hanlon22-May-08 8:25
subeditorPete O'Hanlon22-May-08 8:25 
Thanks for that Sacha. I've got a few WPF articles in the pipeline, and I hope that I can live up to the high standard of WPF articles here on CP. (I also have a surprise article on writing a Visual Studio eXtension coming out in the next month or so).


Deja View - the feeling that you've seen this post before.

My blog | My articles



General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.