• http://wildermuth.com
• http://silverlight-tour.com
• http://agilitrain.com

Listen | Return to Yet Another Podcast

Call in comments:  1-347-YAP-CAST

Go to first Tutorial

In this tutorial we will build a meaningful, and nontrivial Windows phone 7 application. This will give us the opportunity to explore layout controls, interactive controls, Visual Studio and a good bit more.

[Updated 8/30/2010]

Let’s start by taking a look at the application were going to build.

The application opens with a form, and that form is populated by data binding.

Let’s walk through the creation of this first demo program step by step.

Visual Studio, Expression Blend, XCode and Interface Builder

It is tempting to draw a parallel in which Visual Studio maps to XCode and Expression Blend maps to Interface Builder.  This isn’t wrong so much as incomplete, because you can create your entire interface in Visual Studio (and many folks do) but for more advanced UI development, Blend is the tool of choice.  We could start off by creating the form itself in Blend (and some would argue we should) but we’ll keep things simple by doing all our work for now in Visual Studio, introducing Blend in a following tutorial.

Solutions, Projects and Files, Oh My

To begin, open Visual Studio, click on New Project and in the left pane (Templates) choose Visual C# and then Silverlight For Windows Phone 7. In the right hand side, choose the MVVM Light Toolkit. Give Visual Studio 2010 a few minutes to settle down and you’ll find that Visual Studio 2010 and the MVVM Light Toolkit have cooperated to create a project with numerous files and folders.  You can see these in Solution Explorer window, which is typically on the upper left hand side of your development environment and which you can open either from the menu (View->Solution Explorer) or with the hot keys that are shown on the menu.

Because all such windows can be opened from a menu, I will eschew walking you through each, and will only point out those menu choices which may be otherwise confusing.

For now, we’ll ignore the Properties and Reference items (though feel free to explore on your own, just take a compass and plenty of rope and you’ll be fine).

The key files we care about right now are MainPage.xaml and, under the ViewModel folder MainViewModel.cs.  The former, MainPage.xaml has an associated code behind file which you can expose with the very familiar turn down.

Double click on MainViewModel.cs to populate the edit windows. Your initial view will be a split pane with the design view on one side and the code view on the other.  The code view, in this case, will be populated with a good bit of Xaml.  We’ll close the Xaml window for now to focus on the Design view.

A Very Quick Tour of Visual Studio

To close the Code View make sure the Design View it is on the left (you can switch it with the double arrow button between the panes) and then click the double-arrowhead to close the code view. Finally, make sure that the Properties window is  visible on the right (F4) and the toolbox is pinned open on the left ( Control-Alt-X).  In the illustration below, I’ve labeled 7 areas. Let’s go over them one by one:

Area 1 is the toolbox. Note that at the upper right hand corner (circled) are three symbols. The first allows you to

Area 2 is the Application String and Area 3 is the Page Title string; we’ll return to these shortly.

Area 4 is the ContentPanel  and we’ll be doing most of our design work here.

Area 5 is the Solution Explorer, which is above the Properties window by convention (you can of course move any window to any position)

The properties window is divided into area 6, where the name of the selected object is set and where you can switch the properties window from Properties view to Events view (more on events later in this tutorial).  Area 7 is where the properties are set (you can see some of the Text properties exposed in this illustration).

Note the arrows emanating from the design panel.  The upper two are used to switch between Code and Design when one of the windows is hidden.  The lower three split the window vertically or horizontally, and reveal (or hide) the right hand (or lower) window respectively.

Above all of this is the menu and of course the most important menu entry is Help, which offers a variety of ways to receive help. To see one of its most powerful features at work, place the cursor anywhere in the RowDefinition keyword (approximately line 47) and press F1.  The first time you press F1 you’ll be asked if you want to use local or internet help. If you have an internet connection, by all means ask for online help. A browser window will open with help on the RowDefinition keyword. Sweet.

As of this writing the on-line help file has tabs for each supported language. We’ll use the C# tab (which will set the C# tab for the entire page and which is sticky and thus persists to the next time you open the window).

Each entry follows the pattern of identifying the class, the namespace and assembly (we’ll cover both as we go). Syntax is demonstrated by language, and the Remarks section provides detailed information and links to related topics.

The examples section follows the Remarks section and provides copyable code to get you started.

After the Examples come the Inheritance Hierarchy, showing where your class fits in, and notes on Thread Safety, Platform, Versions and, finally a See Also section for related topics.

You also have much of this information locally in Silverlight.chm – a Windows Help file that was loaded when you installed Silverlight.

Creating The Form

Let’s return to the project and begin to create the form. For now we’re going to do all the work in the design view, though you’ll see later that everything done in Design view instantly updates the Xaml view, and vice versa.

Layout Controls

It is common to distinguish those controls used for layout from those used for interacting with the user, though the distinction is, in truth arbitrary.  In any case, there are quite a few layout controls, though the two we care most about are the Grid and the StackPanel.

The Grid is the most powerful and (nearly) ubiquitous layout control – something of a UITableView on steroids. Click in the Content Panel (area 4 above) and the edges of the Grid that was placed there for you will light up.   Move your cursor in the margin and lines will appear. Click and horizontal lines become rows, vertical lines become columns.  You’ll want to create two columns (the left taking about 1/3 of the grid) and 8 rows of approximately equal size.

Click in the Grid and notice that the properties window has a ColumnDefinitions property and a RowDefinitions Property.  Here you can make the spacing more exact.  You can do so with precise sizes (e.g., 25px) or with percentages, or with relative sizing (e.g., 2* and 3* will create two columns with the first taking 2/5 of the available space.).  I chose 1* (which you can shorten to *) and 2* for the columns, and seven rows of 1*.

You can of course open these instead of creating the rows and columns first in the designer.

Setting the Application Name and the Page Title

Click on the Application Title or the Page Title (areas 2 and 3 above)

We’ll use the left column for the prompts. Drag a TextBlock (used for displaying text) into the first row (row offset 0), first column and place it more or less in the center. Then switch over to the properties window and set the following properties:

• Name=NamePrompt  (In area 6 above)
• Common::Text=Full Name
• Layout::Width=auto
• Layout::Height=30
• Layout::HorizontalAlignment=Right
• Layout::VerticalAlignment=Center
• Margin=5
• Layout::Padding=0
• Layout::MinWidth=30
• Layout::MinHeight=30
• Layout::MaxWidth=0
• Layout::MaxHeight=0
• Layout::Grid.Column=0
• Layout::Grid.Columnspan=1
• Layout::Grid.Row=0
• Layout::Grid.Rowspn=1

Adding the Remaining Prompts

Drag six more prompts onto the form, setting them identically, except for the Text and the Row.  The rows will be 1,2,3,4,5 and 7 and the Text will be

• Street Address
• City, State, Zip
• Phone
• Fax
• Email
• Notes

You can leave all the rest alone except that under Text you’ll want to click the Bold button and you’ll want to set the prompt names (or use the default as the only reason to have meaningful names is when you need to address the objects programmatically, which we won’t do with these labels) and don’t forget to set the Grid.Row appropriately.

The row you skipped will be used for the Male & Female RadioButtons without a prompt.

Adding the Input Controls

Next, you’ll want to add the input controls. Add TextBox objects to rows 0,1,3,4,5 and 7 . Set the following properties:

• Name=Name (or StreetAddress, etc.)
• Common::Text=Full Name (or street address, etc.)
• Layout::Width=300
• Layout::Height=70
• Layout::HorizontalAlignment=Left
• Layout::VerticalAlignment=Center
• Margin=5
• Layout::Padding=0
• Layout::MinWidth=30
• Layout::MinHeight=30
• Layout::MaxWidth=0
• Layout::MaxHeight=0
• Layout::Grid.Column=0
• Layout::Grid.Columnspan=1
• Layout::Grid.Row=0
• Layout::Grid.Rowspn=1

Using the Stack Panel

You skipped over the input control for row 2 (the third from the top) because you want to place three text boxes in that row (for city, state and zip, respectively).  If you just set all three to the same row and column they will appear on top of one another. What you want is to “stack” them, but in this case not one on top of the other, rather one next to the other.

Drag a StackPanel onto the form and set its properties as follows:

using System;

namespace Your_First_Application.Model
{
    public class Customer
    {

        public string First { get; set; }
        public string Last { get; set;  }
        public string Address { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Zip { get; set; }
        public string HomePhone { get; set; }
        public string WorkPhone { get; set; }
        public string Fax { get; set; }
        public string WorkEmail { get; set; }
        public string HomeEmail { get; set; }
        public bool IsMale { get; set; }
        public string Notes { get; set; }
        public int CreditRating { get; set;  }
        public DateTime FirstContact { get; set; }
        public DateTime LastContact { get; set; }

    }
}

public string First { get; set; }

private string _secretvariable
public string First
{
   get { return _secretVariable; }
   set { _secretVariable = value; }
}

First = "Mary";        // call the setter
//....
string fn = First;     // call the getter

public static Customer GetCustomer()
{
    var newCust = new Customer(
        "Martha",
        "Washington",
        "1640 Pennsylvania Avenue",
        "New York",
        "NY",
        "11214",
        "617-555-4663",
        "781-555-9675",
        "212-555-5353",
        "jesseliberty@jesseliberty.com",
        "none",
        false,
        "VIP - Treat nicely",
        700,
        new DateTime(1955,07,10),
        new DateTime(2010,06,06));
    return newCust;
}

public Customer(
    string first,
    string last,
    string address,
    string city,
    string state,
    string zip,
    string homePhone,
    string workPhone,
    string fax,
    string workEmail,
    string homeEmail,
    bool isMale,
    string notes,
    Int16 creditRating,
        DateTime firstContact,
        DateTime lastContact )
{
    First = first;
    Last = last;
    Address = address;
    City = city;
    State = state;
    Zip = zip;
    HomePhone = homePhone;
    WorkPhone = workPhone;
    Fax = fax;
    HomeEmail = homeEmail;
    WorkEmail = workEmail;
    IsMale = isMale;
    Notes = notes;
    CreditRating = creditRating;
    FirstContact = firstContact;
    LastContact = lastContact;

}

using GalaSoft.MvvmLight;
using Your_First_Application.Model;

namespace Your_First_Application.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        public string ApplicationTitle
        {
            get { return "Your First Application"; }
        }

        public string PageName
        {
            get { return "Customer"; }
        }

        private readonly Customer cust = Customer.GetCustomer();

        public string Name { get { return cust.First + " " + cust.Last; } }
        public string Street { get { return cust.Address; } }
        public string City { get { return cust.City; } }
        public string State { get { return cust.State; } }
        public string Zip { get { return cust.Zip; } }
        public string Phone { get { return cust.WorkPhone; } }
        public string Fax { get { return cust.Fax; } }
        public string Email { get { return cust.WorkEmail; } }
        public bool IsMale { get { return cust.IsMale == true; } }
        public bool IsFemale { get { return !IsMale; } }
        public string Notes { get { return cust.Notes; } }
    }
}

DataContext="{Binding Main, Source={StaticResource Locator}}">

<phone:PhoneApplicationPage x:Class="Your_First_Application.MainPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait"
                            mc:Ignorable="d"
                            d:DesignWidth="480"
                            d:DesignHeight="768"
                            shell:SystemTray.IsVisible="True"
                            DataContext="{Binding Main, Source={StaticResource Locator}}">

   <!--LayoutRoot contains the root grid where all other page content is placed-->
   <Grid x:Name="LayoutRoot"
         Background="Transparent">
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <!--TitlePanel contains the name of the application and page title-->
      <StackPanel x:Name="TitlePanel"
                  Grid.Row="0"
                  Margin="24,24,0,12">
         <TextBlock x:Name="ApplicationTitle"
                    Text="{Binding ApplicationTitle}"
                    Style="{StaticResource PhoneTextNormalStyle}" />
         <TextBlock x:Name="PageTitle"
                    Text="{Binding PageName}"
                    Margin="-3,-8,0,0"
                    Style="{StaticResource PhoneTextTitle1Style}" />
      </StackPanel>

      <!--ContentPanel - place additional content here-->
      <Grid x:Name="ContentGrid"
            Grid.Row="1"
            Height="617"
            VerticalAlignment="Bottom">
         <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="2*" />
         </Grid.ColumnDefinitions>
         <TextBlock Height="30"
                    HorizontalAlignment="Right"
                    Margin="5"
                    Name="NamePrompt"
                    Text="Full Name"
                    VerticalAlignment="Center"
                    FontWeight="Bold"
                    Grid.Row="0" />
         <TextBlock FontWeight="Bold"
                    Height="30"
                    HorizontalAlignment="Right"
                    Name="streetPrompt"
                    Text="Street Address"
                    VerticalAlignment="Center"
                    Margin="5"
                    Grid.Row="1" />
         <TextBlock FontWeight="Bold"
                    Height="30"
                    HorizontalAlignment="Right"
                    Name="cityStateZipPrompt"
                    Text="City, State, Zip"
                    VerticalAlignment="Center"
                    Margin="5"
                    Grid.Row="2" />
         <TextBlock Height="30"
                    HorizontalAlignment="Right"
                    Margin="5"
                    Name="PhonePrompt"
                    Text="Phone"
                    VerticalAlignment="Center"
                    FontWeight="Bold"
                    Grid.Row="3" />
         <TextBlock FontWeight="Bold"
                    Height="30"
                    HorizontalAlignment="Right"
                    Name="FaxPrompt"
                    Text="Fax"
                    VerticalAlignment="Center"
                    Margin="5"
                    Grid.Row="4" />
         <TextBlock FontWeight="Bold"
                    Height="30"
                    HorizontalAlignment="Right"
                    Name="EmailPrompt"
                    Text="Email"
                    VerticalAlignment="Center"
                    Margin="5"
                    Grid.Row="5" />

         <TextBlock FontWeight="Bold"
                    Height="30"
                    HorizontalAlignment="Right"
                    Name="NotesPrompt"
                    Text="Notes"
                    VerticalAlignment="Center"
                    Margin="5"
                    Grid.Row="7" />

         <TextBox Name="FullName"
                  Width="303"
                  Height="70"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Bottom"
                  Margin="5,0,0,5"
                  Grid.Column="1"
                  Text="{Binding Name}" />
         <TextBox Name="Street"
                  Width="303"
                  Height="70"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Bottom"
                  Margin="5,0,0,5"
                  Grid.Row="1"
                  Grid.Column="1"
                  Text="{Binding Street}" />
         <StackPanel Orientation="Horizontal"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     Margin="0"
                     Grid.Row="2"
                     Grid.Column="1">
            <TextBox Name="City"
                     Width="150"
                     Height="70"
                     HorizontalAlignment="Left"
                     VerticalAlignment="Bottom"
                     Margin="0,0,0,5"
                     Text="{Binding City}" />
            <TextBox Name="State"
                     Width="74"
                     Height="70"
                     Margin="0,0,0,5"
                     Text="{Binding State}" />
            <TextBox Name="Zip"
                     Width="93"
                     Height="70"
                     Margin="0,0,0,5"
                     Text="{Binding Zip}" />
         </StackPanel>
         <TextBox Height="70"
                  HorizontalAlignment="Left"
                  Margin="5,0,0,5"
                  Name="Phone"
                  VerticalAlignment="Bottom"
                  Width="303"
                  Grid.Column="1"
                  Grid.Row="3"
                  Text="{Binding Phone}" />
         <TextBox Height="70"
                  HorizontalAlignment="Left"
                  Margin="5,0,0,5"
                  Name="Fax"
                  VerticalAlignment="Bottom"
                  Width="303"
                  Grid.Column="1"
                  Grid.Row="4"
                  Text="{Binding Fax}" />
         <TextBox Height="70"
                  HorizontalAlignment="Left"
                  Margin="5,0,0,5"
                  Name="Email"
                  VerticalAlignment="Bottom"
                  Width="303"
                  Grid.Column="1"
                  Grid.Row="5"
                  Text="{Binding Email}" />
         <StackPanel Orientation="Horizontal"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     Margin="5"
                     Grid.Row="6"
                     Grid.Column="1">
            <RadioButton Name="Male"
                         Content="Male"
                         GroupName="Sex"
                         IsChecked="{Binding IsMale}"
                         FontSize="20" />
            <RadioButton Name="Female"
                         Content="Female"
                         GroupName="Sex"
                         IsChecked="{Binding IsFemale}"
                         FontSize="20" />
         </StackPanel>
         <TextBox Height="72"
                  HorizontalAlignment="Left"
                  Margin="5,0,0,5"
                  Name="Notes"
                  VerticalAlignment="Bottom"
                  Width="290"
                  Grid.Column="1"
                  Grid.Row="7"
                  Text="{Binding Notes}" />
      </Grid>
   </Grid>
</phone:PhoneApplicationPage>

public class MainViewModel : ViewModelBase
{
    public string ApplicationTitle
    {
        get { return "Your First Application"; }
    }

    public string PageName
    {
        get { return "Customer"; }
    }

    private   Customer cust = Customer.GetCustomer();
    public   Customer Cust { get { return cust; } }

    public string Name { get { return cust.First + " " + cust.Last; } }
    public bool IsMale { get { return cust.IsMale == true; } }
    public bool IsFemale { get { return !IsMale; } }
}

public MainPage()
{
    InitializeComponent();
    var vm = new MainViewModel();
    DataContext = vm.Cust;
    FullName.DataContext = vm;
    Male.DataContext = Female.DataContext = vm;
}

The “troubles” are recent enough that virtually  everyone there lived through them, yet quiet enough now that there is a brisk business in taking tourists on the famous “Black Cab Tours.”  Throughout the area you find houses with huge murals painted on, memorializing the fighters (and at times those caught in the cross-fire) as if the old wounds are only barely closed.

The Belfast UG was terrific, very enthusiastic and very happy to have the presentation.

From there I crossed drove to Cork (5 hours) as the internal flights were not yet dependable. A terrific drive, which I broke up by driving through some smaller  towns.  It is true, the more south you go, the thicker the stout gets. Cork is the home of Murphy’s Stout, Dublin the home of Guinness.  It is better here, there is just no doubt.

The Cork UG was wonderful, they see themselves as a bit out of the way and so are very pleased to have folks from Microsoft come – and they show their pleasure openly and kindly.  The next day was my one opportunity to see the beautiful west coast of Ireland, but it was a drizzly day and my body insisted on sleeping late, so I settled for a surprisingly pleasant walk in Dublin.

My only regret in this trip is that due to the problems with flying I was unable to talk with the Dublin UG; to make up for which I hope to be back soon!

All in all it was a terrific opportunity to talk with hundreds of working Silverlight Programmers throughout the UK & Ireland, and a trip I won’t soon forget.

Two weeks, four countries, 9 presentations, two flights, one ferry and  1,650 miles driven. Brilliant.

The presentation in Cambridge was great fun, preceded by a quick walking tour with Rachel Hawley (who, it turns out, I’ve known thrice without understanding she was all the same person!  She was involved in hiring me to write a (mostly) political column in 2006/2007 for Simple Talk, then again in helping me with CodeRush and finally with arranging the Cambridge part of my trip, not least acting as tour-guide.

After a very warm reception at the Cambridge presentation, filled with highly motivated and skilled developers, I drove up to Leeds, where Black Marble played the role of host and benefactor, offering an incredible welcome. They have a remarkable company that I can’t imagine anyone not wanting to work for, and their presentations, offered free as a contribution to the community, attract a large crowd of world-class developers.  The presentation was followed by one of the best dinners I’ve ever had at a truly magnificent inn and today, before departing, yet another Full English breakfast, this one punctuated by the addition of Black Pudding.  (You’ll have to look it up, if you are American and you find out what it is, you may stop reading this diary altogether).

Now it is off to Newcastle Upon Tyne, with, I hope a side trip to Hogwarts.

[ Map ]

(Presentation details below)

Presentations

#1 Introduction to Application Development With Silverlight 4

This presentation is targeted at .NET programmers new to Silverlight or who wish a review of the fundamentals of building an application in Silverlight 4. Topics will include

• Drag and Drop development
• Xaml and Code
• Layout and Controls
• Data, Data-binding, Validation and Async-validation
• Templates and The Visual State Manager (Time allowing)

#2 Silverlight 4,  MVVM and Test-Driven Development

• MVVM and Silverlight to build test-driven programs
• Understanding Refactoring and Dependency Injection
• A Walk through of a non-trivial application

#3 Building A Highly Extensible, Decoupled Silverlight Open Source Application with MEF and RIA Services using Lean, Test Driven Development, An International Team of Volunteer Programmers,  and lots of Advil.

This talk will use the Silverlight HyperVideo Platform open-source project on CodePlex as a case study in building highly extensible Silverlight applications. Among the topics we will focus on are:

• New features in Silverlight 4 and how they made life easier
• The Managed Extensibility Framework (MEF) added to Silverlight 4
• WCF RIA Services for connection to a back-end db
• Handling inter-module communication when the requirements are that modules cannot assume which other modules will be created, there can be no dependencies on order-of creation and unanticipated modules must be able to communicate with existing modules.
• Using Markers, Injected Markers and polling to trigger events while viewing a video.
• A Quick introduction to Lean, TDD and Kanban

This is the first of a series of blog posts directed at folks who are new to Silverlight and/or want to brush up on the fundamentals.  It will consist of mini-tutorials on topics I think need more coverage, and links to existing mini-tutorials, tutorials and videos. We begin… at the beginning.

What is Silverlight, Why Do I care?

This is the traditional place to start, but in all probability if you are here, you know the answer. In brief: Silverlight is Microsoft’s Rich Internet Application enabling technology. The goal is to create applications that are delivered by the browser but which offer the user experience of a desktop application.  There is no question that using a RIA technology offers the ability to create a quality of experience that cannot be matched by more traditional approaches.

Where Do I Get It?

Everything you need to start writing Silverlight applications is available on our Get Started page.

If you don’t already have Visual Studio, consider starting with Visual Web Developer (VWD). You can download both VWD and Silverlight together using the Web Platform Installer

Otherwise,  you may want to take a look at the more powerful  Visual Studio 2008 or the new beta of Visual Studio 2010.  Once you get serious with Silverlight you’ll really want  Expression Blend.  

Navigating the Get Started Page

On Get Started you’ll find an array of options. The first option tells you how to get Visual Studio or VWD, and options 2, 3 and 5 while incredibly useful, are not required for your initial foray into Silverlight… so just grab option 4.

Quick Tour?

In the next section on the Get Started page, you’ll find a quick tour of Silverlight.  

This is a great way to get going. On the other hand, if you are going to follow this series, you may want to watch just #1 (Getting Started video) and hold off on the rest as I’m  going to integrate all of that material (including Tim’s terrific 8 part blog series) as we go.

The Tools

Tim’s excellent first video in his series will definitely get you started on the right foot using the tools. 

I’ve never fully understood why developers don’t spend more time learning the details of Visual Studio; it is, after all, our fundamental tool, the environment in which we live all day. Time spent on getting all you can out of Visual Studio will pay dividends for a long time.

Diving In

With that, you are ready to dive into Silverlight. Arguably, the best way to get a handle on what Silverlight is, is to write a program that uses it to accomplish something reasonably useful. A good starter video on building an application (a bit old, but still correct) is this gentle intro to creating a Silverlight application with Visual Studio, using the Canvas to lay out controls.  Then read Part 2 in Tim’s series on layout.

Next in this series: Three Approaches: Designer, Xaml or Dynamic

N.B.: I’ve taken the liberty™ of paraphrasing user comments.  The original comments can be seen here.

Too Much To Keep Up With?

Nate Jackson wrote that he felt, even as a seasoned developer, that the pace at which technology is coming out of Microsoft is too fast for him to reasonably keep up with or even use to provide context for future projects.

My response is that I don’t disagree that with so many new technologies it’s terribly difficult to keep up. Rather, my position is that I’d rather live in a world where there are constantly improving technologies and run the risk of feeling that I’m falling behind then live in either of the alternative worlds: the one where we forgo rapid technology improvement, or the one in which we prematurely deprecate technology that developers are still using.

Rapid Deprecation?

Guerchele objected that if we continued to advance the technology without deprecating,  we wii inevitably end up with too many technologies. He rejected my idea of a “gizmo” because it does not enforce adoption of the latest technology for new projects

While I embrace the evolution of development technology, the solution cannot be to “forbid” the use of platforms we released only a few years ago. While it is in my own experience that applications that would’ve taken me months or even years to finish with the technology available five years ago can today be completed in months while providing a more robust and better UI, I have to also recognize that other developers do not necessarily feel the need to move from the technology with which they’re most comfortable.

And it may well be that for them the opportunity cost of forgoing the potential in the new technology is outweighed by the benefit of not having to take the time to make that move,  given that they’re already fully productive in a technology they know.

No, actually  that’s a lie. If the truth were known, my actual opinion is that the anticipated cost of adopting a new technology is over-estimated by those who feel this way (and under-estimated, I suppose by people like me!); and the real world gains of moving to a new technology like Silverlight are in fact far higher than might be anticipated. But I really do understand that many developers disagree with me.

Full Projects Please

rickj1 wrote that our training and material has suffered from a lack of a “full-featured step-by-step end to end real world tutorial.” I fully agree, which is why I find the touring project very satisfying, though I think it’s extremely important to put each component into context and also to point out a generalized set of uses that transcend any individual project.

Note to rickj1, every part of project touring will be fully annotated and all the source code will be available as we move forward.

Others have commented, and once again I agree, that my tutorials and videos would be improved by providing more motivation for each technique; that is,  “don’t just show me how to do something, tell me when I might want to do it.”

A Few Words From Josh

“Nitwit! Blubber! Oddment! Tweak!” – A.D.

Josh Holmes, RIA evangelist for Microsoft, who was on the original panel, made the following points in a private correspondence(which he has permitted me to copy here):

You’re right, we can’t support the extraordinary train of technologies including everything from Access 3 to.NET 4.0….My biggest frustration with the show was that we never really defined “Complexity” and who things were complex for. I think I tried to make the point at least once that things were getting simpler to create for professional programmers but harder and harder for non-programmers (the so-called hobbyist). Even with the Getting Started posts and the like, you have to be a technologist to write an application these days with Microsoft technologies. This is one of many reasons that we are losing share to technologies such as PHP.

While I agree that we are not fully serving the needs of the so-called hobbyist — and parenthetically if we mean by that people who program but for whom programming is not their day job, then I think we need a different term; Programming Artisan comes to mind — I’m not sure there is anything like universal agreement that things are getting simpler for professional programmers.

There’s no doubt that with the latest technology, once mastered, we can do things more quickly, better, more simply than we could just a few years ago, however you have to factor into that equation the cost of learning the new technology, and the perceived “complexity” of myriad overlapping choices.

As to the hobbyist, or even the technologist attempting to transfer to .Net,there is no doubt that the learning curve has grown, if not steeper, then at least longer. That said, we all remember how much of the plumbing we used to write, and  few of us want to back.

Josh continues,  The second part of complexity that we never covered is that the software that we build is far too complex for our users. We have all of the opportunity to do something amazing but there are few firms that do. Silverlight and WPF are enabling technologies but unless the devs and designers really push it to its limits, my grandma still can’t use her applications…

It is certainly true that we are a long way from software that is as easy to use as a toaster, but that has been true for a very long time. I would argue that it was worse in the so-called “good old days” before things got so “complex.”  In fact, I would argue, we are slowly learning how to make software that is more intuitive, easier-to-use out-of-the-box, and that appeals to a broader audience. While we absolutely have a long way to go, I don’t think we should lose sight of the enormous strides that have been made towards more intuitive interfaces in products both from within Microsoft and from numerous other software vendors.

The bottom line for me is that the overall experience of being a programmer requires that you know more than was needed when I started, but that’s because we’re being asked to build much better products. And given that, I’d far rather have today’s tools than the tools I had in the 1980s.

Please note, this post was produced through dictation; my apologies for any absurdities. It turns out that carpal tunnel syndrome is a whole lot less fun than you might expect.

-jesse

Turing Page [Novice: 4]  FAQ  Table of Contents

In Novice Page 3 we were about to create a form.  Here is  the form we’ll create:

Layout Is Easiest In Expression Blend

To create this form, I’ll begin by opening Expression Blend 3 and creating a new Silverlight Application,

If you’ve not reconfigured Blend it will open with numerous panels, some tabbed, some open as shown here:

A Quick Tour of Expression Blend

On the far left is the toolbar a small piece of which is shown here. Notice that some of the controls have a tiny white triangle next to them. Clicking on the triangle opens up related tools.

In the second image I’ve clicked on the triangle next to button and opened a panel with controls related to button.

Next to the toolbox are a number of tabbed panels including  Projects, Assets, States and Parts, below which is the Objects and Timeline Panel 

Note that the files in the Blend project are identical to the files in a Visual Studio project and you can and will have these files open in both applications at the same time.

In the center of the screen is the Design Surface otherwise known as the Art board. 

Also note the tiny control in the upper left corner of the Art-board that lets you switch between a grid and a canvas. Also note that surrounding the grid area (white) is a border (blue). You can use the border area to create rows and columns very quickly, as you’ll see in just a moment.

Expression Blend allows you to work in a WYSIWYG environment, but it also produces Xaml that corresponds to everything you do on the design surface. You can switch to split mode to see both the design and the Xaml.

In fact, every visible object in Silverlight is a CLR object that can be created in three ways:

1. In Code (as you’ll see much later in the book)

2. In Xaml (the markup language that we’ll be talking about quite a bit in this chapter)

3. By Drag and Drop into the design surface.

The design surface and the Xaml are two reflections of the exact same information. Dragging a control onto the design surface generates Xaml, and modifying the Xaml will be reflected on the Design surface.

The far upper right has three tabs:  the properties window where you set the properties of any object on the design surface,  Resources and  Data.

Xaml

XAML is the markup language for Silverlight. Think of it as HTML on steroids.

Xaml is an XML markup language (and thus is highly toolable; that is, it works very well with tools like Expression Blend and Visual Studio).

Xaml is highly expressive and can be used to describe not only layout (where to place controls) and standard forms-based controls (buttons, etc.) as well as graphics (ellipses, rectangles, etc.) but can also be used to declare transformations and animations of those objects, and much more.

Creating a Form for Data Input

Our goal is to create a simple form for data input, in which users will enter information about their favorite book.

We’ll build the form using the methodology of successive approximation also known by the technical term Get it working and keep it working. To tackle this, we’ll divide the work into three stages: laying out the controls, wiring up the events, and then, in subsequent chapters, connecting the data to data objects.

Layout Panels

There are quite a number of layout panels available, though the most common are

· Panel – the abstract base class for other, more specialized panels

· Canvas – Used for absolute positioning

· Stack Panel – For stacking objects on top of or next to one another

· Tab Panel – for tabbed layouts

· Docking Panel – for docking objects to the top, bottom or sides of your panel

· Grid – Probably the most frequently used panel. The grid allows you to create rows and columns and fill each “cell” with other controls.

Visual Studio and Expression Blend create a Grid panel for you by default. A grid is very much like an HTML Table, but a bit more powerful.

Creating Rows And Columns

Let’s start in the art board in Expression. To ensure that we have a grid, first hover over the small button at the top left corner. It will tell you if you are in Grid or Canvas mode; you want Grid.

You can now designate where you want your rows and columns. While hovering over the border a yellow line is drawn to show where your row will be created.

If you click, the line turns blue and the row is written to the Xaml.

The small open-lock symbol indicates that the rows are using relative spacing rather than absolute.

Looking At The Xaml Produced

To see the markup produced by drawing these lines, click on the “split” option on the small bar to the right of the art-board

Split mode can be a big help in relating the Xaml to the design.

(click on image to see larger version)

Creating The Rows and Putting In The Prompts

Looking at the image of the form at the top of this entry, you can see that you’ll need 11 rows. Go ahead and click on the left margin about 10 or 11 times, creating somewhat evenly spaced rows. Then move to the border on top, and click to create a pair of columns. 

As you add controls you can adjust the relative heights of each row (or the width of each column) to fit.

Start filling in the cells by adding the prompts for each row. Begin on the second row and reserve the first row for the title.

Adding Prompts

Click on TextBlock in the toolbox

Then drag with the mouse down to create a TextBlock in the left cell of the second row. Don’t worry about size or placement, you’ll fix that in the properties window.

With that in place, click next to it and then turn to the Properties window.  Name the TextBlock FullNamePrompt and set the alignments, margins and font size as shown here:

Once this is set, copy the control in the Objects and Timeline panel and then paste half a dozen copies,

The advantage of making these copies, and then editing each in the properties window is that you preserve the Alignments and Margins, font and font size; you then only have to set the name, text and row for each.

(A better solution is to use a style, which we’ll get to later in this series, and which you can read about now here or see a video about styles here).

Adding the Input Controls

When you’ve set all your prompts on the left side, it is time to add the input controls on the right.  The first five entry rows are TextBoxes,

[Note that entry is done with a TextBox and the prompts are TextBlocks – the two words are very similar but the controls are quite different]

Drag the first TextBox into place, and set its alignment to right and bottom), set the left margin to 5 and the other three to zero, and finally, set its with to 150 and its height to 25.

Next make four copies, and adjust their name and row for the next four data entry fields.

Date Picker

The sixth entry row, DateOfEntry) will get a DatePicker. To create one, click on the Chevron, which opens the advanced controls, and click on DatePicker,

This control has a lot of flexibility in its display; much of which can be set in the properties window,

For now, though, we’ll go with the defaults as shown.

Radio Buttons, Check Boxes and Stack Panels

The input for Level is three Radio Buttons. You can find a complete write up of using Radio Buttons here, but the key things to know are that you want all the Radio Buttons to share the same GroupName (so that they are mutually exclusive), you want one to have IsChecked clicked and, most important, you’ll want to put all the radio buttons into a stack panel. The stack panel will have its alignment set to stretch with no margins and its orientation set to horizontal.

Similarly the versions input is a pair of check boxes, and they too sit in a stack panel.

ListBox and ListBoxItems

Finally, the Tags are chosen from a ListBox (for now). To add the ListBox open the Chevron and drag the ListBox into place, and for now you can hardwire the choices by clicking on the Items collection and adding ListBoxItems.

(Click on the image to see a larger version)

Save everything. Keep Blend open, but also open this same project in Visual Studio

Take a look at the markup  in MainPage.xaml, you should find that the structure and syntax of Xaml is pretty easy to pick up when you compare the Xaml to the WYSIWYG design. 

Pretty Xaml

I find it much easier to read the Xaml if each property is on a line by itself. To accomplish that, open Tools->Options and click on the arrow next to Text Editor. Then open up Xaml and Formatting and click on General to set the rule that formatting should be done when you paste from clipboard or complete a tag and click on Spacing to set the rule that each attribute should be on a line of its own; as shown in the following composite image:

The Xaml that is produced becomes easier to handle, though it takes up a lot more room, as shown in the following small excerpt:

   1: <TextBox x:Name="Topic"

   2:          Height="25"

   3:          HorizontalAlignment="Left"

   4:          Margin="5,0,0,0"

   5:          VerticalAlignment="Bottom"

   6:          Width="150"

   7:          Grid.Column="1"

   8:          Grid.Row="7"

   9:          TextWrapping="Wrap" />

  10: <ListBox x:Name="Tags"

  11:          HorizontalAlignment="Left"

  12:          Margin="8,0,0,0"

  13:          Width="125"

  14:          Grid.Column="1"

  15:          Grid.Row="9"

  16:          BorderThickness="1,5">

  17:     <ListBoxItem  x:Name="Silverlight"

  18:                   VerticalAlignment="Bottom"

  19:                   FontFamily="Georgia"

  20:                   Content="Silverlight" />

  21:     <ListBoxItem x:Name="Expression"

  22:                  Content="Expression" />

  23:     <ListBoxItem x:Name="VisualStudio"

  24:                  Content="Visual Studio"

  25:                  IsSelected="True" />

  26:     <ListBoxItem x:Name="Blogs"

  27:                  Content="Blogs" />

  28: </ListBox>

  29: <StackPanel x:Name="ButtonsStack"

  30:             Margin="0"

  31:             Grid.Column="1"

  32:             Grid.Row="8"

  33:             Orientation="Horizontal">

  34:     <RadioButton x:Name="Level100"

  35:                  Margin="5,0,0,0"

  36:                  VerticalAlignment="Bottom"

  37:                  Content="100"

  38:                  GroupName="Levels"

  39:                  HorizontalAlignment="Left" />

  40:     <RadioButton x:Name="Level300"

  41:                  Height="17"

  42:                  Margin="5,0,0,0"

  43:                  Width="40"

  44:                  Content="300"

  45:                  d:LayoutOverrides="Height"

  46:                  HorizontalAlignment="Left"

  47:                  VerticalAlignment="Bottom"

  48:                  IsChecked="True"

  49:                  GroupName="Levels" />

  50:     <RadioButton x:Name="Level400"

  51:                  Height="17"

  52:                  HorizontalAlignment="Left"

  53:                  Margin="5,0,0,0"

  54:                  VerticalAlignment="Bottom"

  55:                  Width="40"

  56:                  Content="400"

  57:                  d:LayoutOverrides="Height"

  58:                  GroupName="Levels" />

  59: </StackPanel>

Your form is ready to go. Click Control-F5 to test it.

  I had a great PDC.  I arrived with a schedule filled with sessions I intended to go to, and (shhhhh!) I skipped them all (except, ScottGu’s keynote and Scott Hanselman’s BabySmash both of which were (predictably) great). 

The reason I skipped all the others (and there were a lot of excellent talks that I will now have to settle for seeing the recordings)  is that I had the singular opportunity to not only talk with, but truly engage with some amazing developers. 

Microsoft puts on 3 major shows a year, and PDC is the most “forward looking” of the three, which means, ultimately, that a lot of what you see at PDC you probably can’t put into production code today.  Given that and the “all in” cost of attending (admission, transportation, accommodations and missed work) it tends to attract some very serious geeks. And that can make for some very interesting conversations on any number of topics.

Terse, Complex or Dead Simple?

One topic that came up a lot was the universal sense of being overwhelmed by the sheer volume of new technology, and how each developer coped with learning all the new material. This lead to some fascinating discussions about how technology is taught, documented, and explained. It was very clear that there would never be consensus on the "best" method; there can be no one best way to teach because there  is no single learning style. That said, there did seem to be two schools of thought about examples. One group seemed to strongly favor real-world examples even at the cost of a little complexity;  the other to strongly favor incredibly simple examples even at the cost of being overtly artificial.

It is clear that I favor dead-simple examples, and I can trace that directly to learning to program what turned out to be a terrific ISAM package in C in the mid 1980s. The problem, though was in their documentation. Each of their examples was incredibly cool, but amazingly opaque. It was only after I stripped away all the indirection and programming elegance that I realized that there were just half a dozen relatively straight-forward function calls to manage. I ended up creating my own set of examples that were 1/10 the size of theirs and 10 times easier to grok. It was a lesson that is seared into my writing center.

Revisiting the Controls Toolkit Examples

The incredible folks in Shawn Burke’s group have released the Silverlight Control Toolkit and it comes with what I consider to be really terrific documentation, plus source code plus examples and so Bob’s Your Uncle and you’re done.  But while I really like what they’ve done, I’m going to take a shot at revisiting some of the samples to really tear it down to the simplest and most visible moving parts, and along the way I’ll also take a look at using the controls in both Blend and Visual Studio.  This will be an on-going effort, over a few weeks and depending on your comments and what else comes up, we’ll take some detours and delve into some of the nuances of how these controls can be used in unexpected ways.

I set out today to begin work on the AutoComplete control, which has all sorts of interesting nooks and crannies, but I quickly discovered that I wanted to create my own data to explore this control (and others), and this is where ADD is either a curse or a blessing, because I spent quite a bit of time spelunking through the open file dialog, and the scroll viewer (not to mention deciding on the right kind of generic collection.  So, since it is the weekend, let’s actually start there and we’ll get to the AutoComplete control (part 1 of many) in the next entry.

Creating A Data Set of Words

What I wanted was a very large set of words (so that when we’re working with the auto-complete you can start typing (e.g., ) acc and get quite a few words that match (accent, accompany, accordand, accordingly, accosted, account, accounted, accumulate, accurate, accustomed)  That lets you continue to narrow, adding an o knocks out accent and accumulate, accurate and accustomed. adding an r gets you down to just two words: accordand and accordingly.  You see the point.

On the other hand, I did not want you to have to download a large file just to make this work, and besides, it is more interesting if you can put in your own set.  So! it doesn’t take much to write a program that reads a file from your disk (Silverlight doesn’t mind reading from your disk, it is writing to your disk where it is very careful).  We take the file and read in all the words and after a bit of hocus pocus create a collection of unique words (that is, we eliminate all the duplicates and all the punctuation).  Sort the collection and we have just what we need.

Here is how I chose to do it.

First, i needed a file, so I went to Project Gutenberg (a wonderful project well worth your time) where I was able to download a text version of Swan’s way by Marcel Proust (public domain).  That will serve nicely as a source of words (and some interesting words at that!)

Second, I created a very simple UI as this is really just a utility. The UI has a button to open the file dialog, a TextBlock to let me know what is happening, and then two large TextBlocks encased inside ScrollViewers to show me the words I’ve retrieved. The left ScrollViewer displays the words in the order they were retrieved, the right displays them in alphabetical order,

(Figure cropped)

Notice that I’ve only captured 4,298 unique words. That is because I told the code to stop retrieving words once it hit 100,000 characters – why sit around all day on a weekend and 4K words is plenty.

Here’s the code walkthrough; nothing terribly complicated, though with luck you’ll find something new or useful…

<UserControl x:Class="AutoFill1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="600">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="5*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Button x:Name="OpenFile" Content="Open File"
                 Height="30" Width="60" Margin="10"
                 HorizontalAlignment="Left" VerticalAlignment="Top"  />
        <TextBlock x:Name="Totals" Width="200" Height="30"
            Text="Waiting..."  Grid.Column="1" VerticalAlignment="Top"
            Margin="0,20,0,0"/>

        <ScrollViewer x:Name="WordDisplayViewer"  BorderBrush="Black"
          BorderThickness="1"  Grid.Row="1" Grid.Column="0" Margin="5"
          Background="Bisque" VerticalScrollBarVisibility="Auto"
          HorizontalScrollBarVisibility="Hidden" VerticalAlignment="Stretch"
          Width="190" >
            <TextBlock x:Name="WordDisplay" TextWrapping="Wrap" Text="Words" Width="160" />
        </ScrollViewer>
        <ScrollViewer BorderBrush="Black" BorderThickness="1" Grid.Row="1"
            Grid.Column="1" Margin="5" Width="190" Background="Wheat"
            VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden"
            VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
             <TextBlock x:Name="SortDisplay" TextWrapping="Wrap" Width="160"
               Text="SortDisplay" />
        </ScrollViewer>
    </Grid>
</UserControl>

The key to having a nice scrolling block of text is to have the width of the text box be less than the width of the scrollViewer – enough to allow for the scroll bars.

In Page.xaml.cs I declare two private members, a StringBuilder and a List<String> and in Page_Loaded I provide the button’s event handler, which opens the file dialog,

public partial class Page : UserControl
{
   private StringBuilder sb = new StringBuilder();
   private List<string> words = new List<string>();

   public Page()
   {
      InitializeComponent();
      Loaded += new RoutedEventHandler( Page_Loaded );
   }

   void Page_Loaded( object sender, RoutedEventArgs e )
   {
      OpenFile.Click += new RoutedEventHandler( OpenFile_Click );
   }

The job of the event handler is to present the file dialog and then if hte user picks a file to open that file as a file stream, read through each line and using the string builder create a nice long string of up to 100,000 characters. 

void OpenFile_Click( object sender, RoutedEventArgs e )
{
   OpenFileDialog openFileDialog1 = new OpenFileDialog();

   // Set filter options and filter index.
   openFileDialog1.Filter = "Text Files (.txt)|*.txt|All Files (*.*)|*.*";
   openFileDialog1.FilterIndex = 1;

   openFileDialog1.Multiselect = false;

   // Call the ShowDialog method to show the dialog box.
   bool? userClickedOK = openFileDialog1.ShowDialog();

   // Process input if the user clicked OK.
   if ( userClickedOK == true )
   {
      // Open the selected file to read.
      System.IO.Stream fileStream = openFileDialog1.File.OpenRead();

      using ( System.IO.StreamReader reader = new System.IO.StreamReader( fileStream ) )
      {
         string temp = string.Empty;
         try
         {
            do
            {
               temp = reader.ReadLine();
               sb.Append( temp );
            } while ( temp != null && sb.Length < 100000 ) ;
         }
         catch
         {
         }
      }
      fileStream.Close();

(Notice that this is not exactly industrial-strength code. )

In any case, once I have my string I break it into words by using the regular expression "\b" which separates the string into words which I put in an array of strings called AllWords.

(Regex Buddy at work – from their site)

In any case, once my string is broken into words, I then iterate through each word to see if I have it already (I want only one copy of each word) and if not, I check to see if it is "junk" (has punctuation, numerals, etc.).  If it passes muster, I add it to my list<string> and once done I display the results,

fileStream.Close();

string pattern = "\\b";

string[] allWords = 

System.Text.RegularExpressions.Regex.Split( 

                  sb.ToString(), pattern );

foreach ( string word in allWords )

{

   if ( words.Contains( word ) == false )

   {

      if ( word.Length > 0 &&  ! IsJunk( word ) )

      {

         words.Add( word );

      }     // end if not junk

   }        // end if unique

}           // end for each word in all words

Totals.Text = words.Count + " unique words added.";

Display();

}           // end if user clicked OK in dialog

             // end method

To be able to display and use the words, I’ve created two properties,

public List<string> Words

{

   get { return this.words; }

}

public List<string> SortedWords

{

   get 

   { 

      List<string> temp = this.words;

      temp.Sort();

      return temp;

   }

}

Here are the two missing helper methods:

private void Display()

{

   WordDisplay.Text = string.Empty;

   SortDisplay.Text = string.Empty;

   foreach ( string s in Words )

   {

      WordDisplay.Text += " " + s;

   }

   foreach ( string s2 in SortedWords )

   {

      SortDisplay.Text += " " + s2;

   }

}

private bool IsJunk( string theWord )

{

   foreach ( char c in theWord.ToCharArray() )

   {

      if ( char.IsPunctuation( c ) || char.IsDigit( c ) || char.IsSymbol( c ) || char.IsSeparator( c ) )

         return true;

   }

   return false;

}

The very next thing to do (now that this works) is to refactor into three classes: the original page, the code that opens the dialog box and the code that creates the data structure of words.  I’ll do that next time and use that data structure to illustrate how to use the autocomplete box.

I'm pleased to announce that the first of my monthly Sparkling Client podcasts has been posted. This month, we take a Tour of Silverlight Templates.

Resources

Additional resources to supplement this topic include

• Tutorial on Templates
• Styles Video, Templates I Video, Templates II Video