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]
The ferry to Belfast was uneventful, and Belfast itself is a beautiful, scarred city, caught between decades of violence and flickering hope for the future.
Dateline Hetton, near Skipton.
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.
I am extremely pleased to say that thanks to the very hard work of Guy Smith-Ferrier, and the generosity of Microsoft UK, Microsoft Ireland, Microsoft User Group Support Services and Microsoft US, and the work and welcome of numerous user groups in the UK and Ireland, I am able to announce that I’ll be talking at the following events in mid-April.
[ Map ]
(Presentation details below)
| Date | Group | City | Talk |
| 12 April | The .NET Developer Network | Bristol | #2 |
| 13, 14 April | Microsoft Tech Days Twitter: #TechDays |
London | |
| 13 April | Silverlight User Group / London .NET User Group. | London | #2 |
| 14 April | The Next Generation User Group | Cambridge | #3 |
| 15 April | Black Marble User Group | Leeds | #3 |
| 16 April | NEBytes | Newcastle Upon Tyne | #3 |
| 19 April | Scottish Developers User Group | Dundee | #1 |
| 20 April | Scottish Developers User Group | Edinburgh | #2 |
| 21 April | Dublin User Group | Dublin | TBD |
| 22 April | Northern Ireland Microsoft UG | Belfast | TBD |
| 23 April | Cork User Group | Cork | TBD |
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
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:
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.
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.
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.
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.
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.
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.
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
It is very rare for me to respond to comments in follow-on blog post, in fact I don’t think I’ve ever done so before. However the response to my previous blog entry about Dot Net Rocks show number 476 was so overwhelming, and so many good points were made, that I couldn’t resist having another go at some of these issues.
N.B.: I’ve taken the liberty™ of paraphrasing user comments. The original comments can be seen here.
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.
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.
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.”
“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
(click on the image to see other Mini-tutorials)
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:
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:
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 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.
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.
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.
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.
![clip_image002[4]](http://silverlight.net/blogs/jesseliberty/clip_image0024_221E0910.jpg "clip_image002[4]")
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.
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)
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.
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).
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.
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.
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.
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.
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.
| Novice | Previous: Data Entry | Next Data |
| Advanced | Previous: Two Levels | Next: Data |
