WPF Tutorials

New location

Tue, 11 Mar 2008 20:47:39 GMT

This blog will come to an end... and continue at http://silverlightdotnet.wordpress.com
On my new blog, I will focus on the Silverlight 2.0 beta that was released last week. The first tutorial is already posted, so be sure to check it out.

Hope to see you there!!!

interaction between HTML and Silverlight

Sun, 02 Dec 2007 15:44:03 GMT

As promised in my previous post, this is a tutorial for the second demo ( Xaml and javascript ) of the Silverlight workshop.

The demo creates a label for different garments. You can fill in a form in HTML and insert the information in the Silverlight component.

You can download the tutorial and the entire source code:

Silverlight workshop for PlugMedia

Fri, 30 Nov 2007 07:22:26 GMT

Yesterday, we did a Silverlight workshop for PlugMedia. As promised at the end of the session, you can download the presentation ( dutch ) and all the demo's.

Because I want to write from start to finish tutorials on this blog, I will try to work out some of the demo's as a tutorial in the next weeks.

demo's ( 13 MB )

Teched Developer 2007: Day 5

Fri, 09 Nov 2007 10:48:04 GMT

09u: Microsoft Visual Basic: Tips and Tricks for the Microsoft Visual Studio 2008 IDE by Jay Schmelzer

Visual Basic is still my favorite .Net language, so I'm happy to see some improvements for it in the Visual Studio 2008. This are the most important ones:

Just as any .Net language in the .Net 3.5 framework, you are able to use multi-targeting. This means that you can create a project for the 2.0 version and can update it later to 3.5
There is direct intellisense for Visual Basic now. When you start typing, the intellisense window appears immediately.
When creating a property, you just type the word property, press the TAB twice and the entire structure for the property appears. If you press enter, the green borders in the structure disappear.
You are able to fill in all the properties of an object directly, even if you only have an empty constructor. This is the code you use for it: new Class with {.PropertyName = "Value", .PropertyName2 = "Value2"}
If you use a class of which the namespace isn't imported, you get a warning and can import it just the way you do it in C#.
You can use XML literals, and there is also full LINQ support. See my post about LINQ earlier this week.
It is possible to declare a variable without a datatype. Visual Basic will automatically use the ( in his option ) best datatype for it.
If you see the intellisense window and press the Ctrl key, the window will become transparent. This also works for C#.
You can change your debug windows using the DebuggerDisplay attribute.
There is a lot of support for WCF.

This is the end... my friend

Teched 2007 is over for me. It gave me inspiration for some tutorials I like to do in the near future:

Create a silverlight application that consumes a web service
Create a WPF application that uses the 3D graphics
Create a WPF application that uses data binding in combination with LINQ
Create an interface in Fireworks and export it to XAML

Teched Developer 2007: Day 4

Thu, 08 Nov 2007 17:28:02 GMT

09u: Using ClickOnce and XBAP to deploy Windows Forms and WPF applications by Guy Smith - Ferrier

ClickOnce is a nice way to deploy your applications to a lot of users. With a simple click you can put your entire application on a webserver. Users can install the application with one or two clicks. But, the best thing about ClickOnce is that you can update your applications to all your users by simply re-publish the application on the webserver. Users can decide if they will install the update and can even undo the update.

The session showed the different possibilities of ClickOnce for several targets: winforms, WPF and Xbap. There were a lot of limitations when deploying with ClickOnce. The most important was that you only could use Internet Explorer, but this is fixed in the version 3.5 of the .Net framework.

The session also showed that you can't use ClickOnce with partial trust applications because the results in an error when the XAML element <Window> must be parsed. To work around with this, you can use XBap ( Xaml Browser Applications ).

Finally, the session showed the limitations of ClickOnce. For example, you can't write to the registry and you can't choose a default folder for the installation when using ClickOnce.

10u45: Building connected device solutions by Oliver Bloch and Frank Prengel

This year only, 3 billion of connected devices were sold and sells are still getting higher year by year. Microsoft offers Windows Embedded to develop software for these devices. All the info about Windows Embedded can be found on http://www.microsoft.com/windows/embedded/default.mspx.

The devices mostly work with services, and since the release of the .NET 3.0 framework, you can also use a compact version WCF on these devices.

A couple of years ago, I developed some software that runs on a Pocket pc and I got a little bit frustrated about the limited possibilities of the technology. Today, the technology has improved a lot, but still... I prefer developing with the full .Net framework.

13u30: Top 10 mistakes developers make - Tales of an over-worked IT Pro by David Aiken

This is the overview of the 10 points of attention for the developer. Most of them are connected with each other:

Make sure that your application not only works on your machine, but works on every machine.
Take care about security settings. Most developers set the User Account Control of Windows Vista out and work under the Administrator account. This can cause troubles when the application is transported to a machine with other security settings.
Create an installer. In this way, you can proper install and uninstall your application without leaving a serious amount of trash in the registry.
Keep dependencies in mind. For example, if your application needs port 8050, check if that this port is open or not.
Make sure that updates or patches can be installed with asking the end user to reinstall the application.
If you upgrade or patch your application, don't only test the code that has changed, also check your entire application again, so that fixing one error don't create other errors.
If a run-time error should occur after deploying your application, you must be able to check out what went wrong without visual studio is installed on the end user his machine. Use the windows event log or another admin tool for this.
Set a clear informational or error message in your log, so your immediately understand what the problem is.
Don't only control if your application catches all the runtime errors, also check if the generated output still is correct after a runtime error occurs.
Test your application not only in a single user environment, but also in a multi-user environment.

15u45: Build your own IDE with the Visual Studio shell by James Lau

With the release of Visual Studio 2008, it is possible to build your own custom IDE using the Visual Studio Shell. You can make this custom IDE in 3 steps:

Create your shell: just start your Visual Studio and create a new project with the template ( other projects --> extensibility --> VS Shell Project ). This requires that you have installed the Visual Studio SDK. When you have created this project you will also see a starter kit that you can use to get familiar with building your own IDE
Add your extensions: add your own packages, templates en docs that you have created
Create your setup program and your custom IDE is ready to ship. Deploying your IDE requires the VS Shell runtime redist.

When you are ready with your IDE, you can free distribute it. But there are some requirements. For example:

You must add your own help file
In the splash screen, you must add the text "Powered by Visual Studio". This text appears standard, and you can't remove it.

More information can be found in the VSX developer center on http://msdn.com/vsx

17u30: Hardcore production debugging of .NET Applications by Ingo Rammer

Assume that you have already deployed your application and everything works fine on your computer. But one or more end users keep complaining about runtime errors and you can't find no useful information in your log files. How could you solve this problem without installing Visual Studio on the end user his machine?

The answer is the Debugging tools for windows. These tools allows you to debug your application ( doesn't have to be a managed code application ) when already installed at the end users machine.

Ingo Rammer took notes in his session to show how these tools works. You can download the notes at http://www.thinktecture.com/conferences. He also has a nice blog at http://blogs.thinktecture.com/ingo/ which is worth a visit.

Teched Developer 2007: Day 3

Wed, 07 Nov 2007 17:19:55 GMT

09u: LINQ to XML: Using the language integrated query ( LINQ ) framework with XML data by Mike Taulgy

Accessing data from a XML document used to be a lot of work in .NET 2.0. In the 3.5 version there is a new API called LINQ ( Language Integrated Query ). This makes it easy for the developer to select data from a XML document and also to modify this data.

There were a lot of demo's in the session, and for me it was the first time that I saw LINQ. The first thing that I noticed was that LINQ really makes your code more readable and also a lot shorter.

In VB 9.0, there are some cool features for LINQ. VB 9.0 support XML literals, which means that you can type pure XML code inside your VB applications.

10u45: Windows Presentation Foundation ( WPF ) Data binding in depth by Bart De Smet

Data binding was introduced in the .Net framework a long time ago, but it was never so powerful as in WPF. This session showed a nice overview of all the different possibilities with data binding in XAML and in C#.

The fist demo's showed some simple element binding ( bind the value of a slider to the rotation angle of a media element ) in pure XAML. This can also be easily done with Expression Blend, but when you do this in XAML or C#, you get a better overview about what data binding really is.

The next demo's were about updating the source and target with different updatetriggers and validate the content when the input is updated.

After that, we saw some very cool in-depth stuff about data binding of which I didn't it was available:

You can not only use the IValueConverter interface, but there also exists a IMultiValueConverter interface.

It is possible to set the priority of multiple data bindings with the ICollectionView interface.

You can filter a collection with the ICollectionInterface

The session finished with some real world demo's of data binding. One of the demo's used the ObjectDataProvider element. I used this element before in my tutorial on binding to a method.

13u30: LINQ to entities - Use LINQ to access ADO.Net Entity Data Models by Mike Taulty

This was my second session about LINQ. This time LINQ wasn't used to access XML data, but to access data from a database using ADO.Net.

A new version of ADO.Net was announced for the first half of 2008. Access the ADO.Net entity will not be available in Visual Studio 2008 or in the 3.5 framework. If you can't wait to play with ADO.Net entities ( it has some very nice features a creating classes for your database model ) you can download the beta 2 from http://www.microsoft.com/downloads/details.aspx?FamilyId=F1ADC5D1-A42E-40A6-A68C-A42EE11186F7&displaylang=en

15u45: The .Net Language Integrated Query Framework by Luca Bolognese

This was my 3th session about LINQ today and to first one that convinced me about the practical usage of LINQ. The session started with the statement that you can not thread data like you thread objects in your code. LINQ should change this.

There were small, but clear demo's about the several topics of LINQ.

Linq to objects
Linq to dataset
Linq to SQl
Linq to entities ( discussed in previous session )
Linq to XML ( discussed in previous session )

The most amazing one to me was Linq to SQL. Is you add a Linq to SQL ( dbml file ) file to your project, you can drag tables from your server explorer into this file. Visual Studio automatically creates a class for each table which you can access in your entire project. With LINQ you can fill a collection with instances of the class with a small amount of code.

17u30: Building a complete web application using ASP.Net "Orcas" and Microsoft Visual Studio 2008 by Omar Khan

Five big topics were covered in this session. Most of them were also covered in the first session on Monday: "What's new in Visual Studio 2008":

Multi-targeting: it is also possible for a web application to upgrade it from 2.0 to 3.0 or 3.5 by setting one property of the project. In this way, you can use Visual Studio 2008 and still work on your 2.0 projects.

A new HTML and CSS designer: this is a big improvement in Visual Studio 2008. There is a separate panel for CSS and the HTML designer is based on the one used in Expression Web.

Usage of LINQ: a lot of LINQ today, and it is also possible to use LINQ in ASP.Net application ( if they target the framework 3.5 of course ).

ASP.Net "Orcas" also contains some new controls to represent data. A new listview for example.

The last topic was also mentioned on Monday: the full intellisense and debugging support for javascript

Teched Developer 2007: Day 2

Tue, 06 Nov 2007 17:31:45 GMT

09u: Cool looking 3D visualizations with Windows Presentation Foundation ( WPF ) by Dennis Vroegop

First session of the second day and it was a nice one! There were no amazing effects and 3D models, but a good and clear presentation on how 3D works in WPF. For 3D in WPF, 3 things are needed:

a Camera
some light
a 3D object or model

Each of these aspects was explained in detail, and was showed with a live demo in XAML. We started with drawing an "ugly" cube and make it look better, playing with the camera, the lights and different transformations.

For me personal, it may be a good start to write a tutorial about 3D in WPF.

10u45: Design Rich Client Experiences with Expression Blend and Windows Presentation Foundation ( WPF ) by Dick Lantim

This session was a good one for people who has just started with Expression Blend and WPF. There were four parts in the session:

What is WPF
How to create a WPF application
What is Expression Blend and Studio.
An overview of Expression Blend

There was also an announcement: Expression Studio Blend 2.0 will be released in the second quarter of 2008. This is also the time that the first preview of Blend 3.0 with more support for Silverlight 1.1 will be released.

The overview of Expression Blend were several demo's that showed how to draw on a stage, the possibilities of the different containers, working with transformations and animations,...

The last part of the demo showed how to edit the style or even the template of a control. Still one of my most favorite parts of WPF.

13u30: Design to Blend: How to express your creative self with Windows Presentation Foundation ( WPF ) and Silverlight by Dale Jones

This session started with the story that XAML makes designers and developers work together because they "talk" the same language.

But how can a designer create his XAML content? There is Expression Design, which allow the designer to create vector graphics but the first version is pretty limited.

There is also a plugin for Illustrator CS2 and CS3 that can export an Illustrator file to XAML, but when the designer uses meshes or other more "complex" features, this exports fail to work properly.

At this session, I learnt a new way to get nice XAML code form a professional design tool. The answer is Fireworks CS3. There is al plugin that can export Fireworks content to XAML. The plugin can be downloaded at http://www.adobe.com/devnet/fireworks/articles/fw_xaml_panel.html. I haven't tested it myself, but the demo in the session looked pretty cool. A personal test of the plugin will follow very soon.

15u15: Windows Presentation Foundation ( WPF ): Beyond styles and templates by Josh Wagoner

Just like my previous session, the speaker works for Identity Mine. This company has already done a lot of WPF applications. So be sure to check out their website.

This was a very technical session with a lot of C# code using RoutedEvents, RoutedCommands, Attached properties,...

Using these things makes it possible for the developer to create a fully functional working control with a very basic design. When the control is finished, the designer can use Expression Blend or another tool to add all the XAML code he wants and make the control look great.

If you like to study the code and take a deep dive into WPF styles and templates, you can download the source code form here: http://labs.blendables.com

17u00: What's new in Windows Presentation Foundation ( WPF ) 3.5 by Ian Griffiths

The last session of the day offered an overview of the new features in WPF 3.5. The most important features are in the following:

3D: it is much easier to use a 2D control in a 3D viewport
XBAP: it is possible to run a XBAP application in firefox
Data binding: there are a lot of improvements for data binding in WPF 3.5. It is possible to use LINQ with data binding, the debugging features has improved and the validation rules became a lot easier.
Add-ins: it is possible to use add-ins in WPF 3.5, but this is a general feature of the 3.5 framework and not only for WPF.
Text and documents: now you can use controls in a richtextbox and also jump to pages where you made announcements.
Finally there are also a lot of performance improvements. These updates will also work for 3.0 applications once you have the 3.5 framework installed.

Teched Developer 2007: Day 1

Tue, 06 Nov 2007 07:07:05 GMT

I know this is a blog for tutorials on WPF and Silverlight, but this week I'm at Microsoft Teched Developers in Barcelona and I like to share a short summary about the different sessions. Some of these sessions will be about WPF and Silverlight, so maybe I get some great ideas for new tutorials by the end of the week.

14:00 Keynote by S. Somaseger

The most important announcement in the keynote was that the new Visual Studio 2008 will re released before the end of the month. The rest of the keynote was a short overview of the new Visual Studio ( especially about the possibilities of LINQ ) and a couple of other announcements:

There is a public beta available for Popfly
There is a public CTP available for the Microsoft Sync Framework

15u30: A tour of Visual Studio 2008 and the .NET 3.5 framework by Daniel Moth

This sessions gave in good overview of a couple of features in the new framework and Visual Studio. First of all, it was made clear that .NET 3.5 is nothing more than .NET 2.0 + .NET 3.0 + all the updates for these frameworks.

This enables multitargeting: you can create a .NET 2.0 application and upgrade it to a .NET 3.5 application. This works a two directions.

Next, we saw some features of the new Visual Studio. I must admit that some of them look very attractive. For example:

If you create a web application, there is full intellisense and debugging possibilities for javascript. It's just like you write VB or C# code.
There is also more support for creating CSS through different panels. Visual Studio doesn't write all the CSS inline anymore, but creates nice separated blocks.
XBAP applications can also run in Firefox now.
The WPF designer has improved a lot since the last release of the WPF November CTP Extension for Visual Studio 2005.

A list of all the improvements of Visual Studio 2008 and the .NET 3.5 framework can be found an Daniel Moth his blog: http://www.danielmoth.com/blog.

17u45: Building great web experiences with Silverlight 1.0 by Jesse Liberty

Finally, the first session about Silverlight. Because it was about the 1.0 version, everything had to be done with javascript. I prefer the 1.1 version with C#, but that is still in alpha.

First, there was a general overview of with Silverlight actually is ( a plugin for the browser that works cross browser and cross platform ) and an overview of the different files in the Silverlight 1.0 template for Visual Studio.

After this overview, there was a demo about how you can create shapes in XAML, add some transformations to then ( rotation, scale, skew,... ) and animate then with a storyboard.

The session ended with a demo on how to interact between HTML and Silverlight and a Q & A.

Everything that was discussed in this session can also be found on http://silverlight.net . This site also contains some nice Silverlight 1.0 samples.

19u Welcome reception

I ended my first day at Teched with a visit to the Microsoft bookstore. I bought an ( in my opinion ) interesting book about Silverlight 1.0. It is published by Wrox ( http://www.wrox.com , ISBN: 978-0-470-22840-1 ) and contains an easy to read overview about Silverlight 1.0 with javascript, Expression Blend and pure XAML.

The book also gets your feet wet on Silverlight 1.1 in combination with ASP.NET and ASP.NET Ajax.

My own Silverlight textbox

Fri, 02 Nov 2007 10:46:39 GMT

Normally, there is no input control like a textbox available in Silverlight. You could use a HTML textbox and pass the value to Silverlight, but it would be cooler to create your own textbox and edit the style just like in WPF.

This is possible. A couple of days ago, I saw a presentation of Silverlight where some controls were developed by a Belgian company called Netika.

They showed a little trick to have keyboard input: trigger the KeyDown events and place them in a textblock. I started to create a tutorial for this and you can download the result below. The textbox is pretty basic, but of course you can make it look better using Expression Blend 2.0 September Preview and add some nice colors to it.

You can download the tutorial and the entire source code:

The PDF tutorial ( 399 KB )

The source code ( 26 KB )

Control animations from code behind

Sun, 14 Oct 2007 12:44:25 GMT

In this tutorial, I've created an animation ( storyboard ) with Expression Blend, and I will adjust some properties of the animation in C#.

This tutorial is basic and pretty short. But the concept that you can adjust you xaml code in VB or C# looks pretty cool.

You can download the tutorial and the entire source code:

Yes, this is still a listbox

Mon, 01 Oct 2007 13:56:24 GMT

One of the coolest things in WPF is still editing styles and templates of different controls.

Most people have no problems to edit the template of a button, textblock,... but the problems start when they edit a more "complex" control like a listbox.

In this tutorial I edit the template of a listbox and his listboxitems. It builds further on the tutorial of the ObservableCollection and I reuse some code of this tutorial. This time it is written in C#.

You can download the tutorial and the entire source code:

Silverlight invaders

Fri, 14 Sep 2007 14:35:18 GMT

I just finished my first Silverlight project. It is a simple game, just a little bit like space invaders. We got a good guy and a lot of bad guy who has to be shot.

The tutorial is especially about creating usercontrols with Expression Blend, creating storyboards and call these storyboards from code behind. The best way to make this tutorial in my option is to open the completed project, and copy/paste some of the c# code.

The pdf is pretty detailed in the beginning,but the last steps are described more vague because the same steps always remain.

The credits for this tutorial also goes to my colleague who helped a lot with this project.

You can download the tutorial and the entire source code:

DataTemplate, value converter and ObservableCollection

Mon, 10 Sep 2007 11:17:33 GMT

A couple of days ago, I was working on program that can process the results of students. I wanted to create a listboxitem for every student that contains a textblock for the name and a textbox to insert or update the result.

After asking advise on different forums and a lot of trying and failing, I finally found a way to get this done.

I use a ObservableCollection for data binding to my listbox. Use a datatemplate to put different controls in the itemtemplate, and a value converter to indicate if the student is passed or not.

My conclusion: an ObservableCollection is very powerful!

You can download the tutorial and the entire source code:

Binding to a method

Tue, 28 Aug 2007 13:45:34 GMT

In this tutorial, I've wrote a simple class with one function called Sum. The function demands two numbers and returns the sum of the two numbers. On my form I have two textboxes to insert the numbers, and one textbox that shows the result. Nothing really special, isn't it?

Well, I use databinding in XAML to call and execute the function Sum. So, I don't need any code behind ( except the code for the function ). This is a simple example, but the same technique can be used to fill a combobox or listbox with an array, collection, hashtable,...

You can download the tutorial and the entire source code:

Create a Vista-style login button

Sat, 04 Aug 2007 14:17:07 GMT

In this tutorial I created a button that contains the picture of a certain user and has the name of the user below. You can compare it with the login screen of Windows Vista.

The purpose of the tutorial is to break the template of a control and rebuild it just the way you want.

The only tool I use in this tutorial is Expression Blend. You can download a PDF document that describes the different steps or you can also download the video that shows how the button is created.

Getting started: what do you need?

Fri, 03 Aug 2007 12:20:42 GMT

The following requirements should do the job to create WPF applications:

Windows Vista or Windows XP SP2
The .Net 3.0 framework ( ships with Vista, so you must only install it when working with Windows Xp )

download .Net 3.0 framework

Visual Studio 2005 + the WPF extensions or Visual Studio 2008 Beta

Expression Blend

Expression Blend 60-day trial

Introduction

Fri, 03 Aug 2007 11:30:15 GMT

Since Microsoft launched the .Net 3.0 framework and the Expression Studio, developers are able to create "Rich User Interfaces". So, there are no more excuses to make a crappy - gray looking - interface.

In this blog I try to post small tutorials on how to get stuff done with Expression Blend and Visual Studio. These tutorials will be based on problems that I experienced when creating WPF windows applications and will always start with [File --> New Project].

Hope you enjoy!