The .NET Framework 3.0 has officially been released!  You can download the .NET Framework 3.0 components here:

• .NET Framework 3.0 Runtime Components
• Windows SDK for Vista and the .NET Framework 3.0 
• Visual Studio 2005 Extensions for .NET Framework 3.0 (Windows Workflow Foundation)
• Visual Studio 2005 Extensions for .NET Framework 3.0 (WCF & WPF), November 2006 CTP

If you use Vista, they are installed by default.

Th  If you have a previous CTP installed, please be sure to review the uninstall instructions. 

With Windows Presentation Foundation coming closer to its release date with Vista almost being upon us, more and more people are taking a look at programming in WPF… Lately, people searching on Google for WPF-related information is soaring. How do you know that, you might ask? Well, in my logs, I notice a steep increase in people landing on my blog who searched for information on WPF. That’s a good thing!! ?

However, what I do notice, is that there is still some confusion on some topics.  In this article, I want to help clear out the difference between the different application types in WPF/Vista. Since this is a major change with previous application models, lots of people, including me when I first heard about it, seem confused.

So, let’s get to it!

WPF has 2 main applications models: standalone and browser. On the other hand, it also has 2 types of navigation: menu-driven, which is what we’re all used to in traditional Windows applications and link-driven, which is the default for web applications. The first thing to note is that in WPF, both types of navigation can be used in either of the application models. Neat, isn’t it?
That basically means that you can create a web application as if it were a windows application, containing a menu to navigate around. Or, create a standalone desktop application that feels like a web application, with all buttons replaced by links.
No longer are you bound to one application model with is “natural” navigation model!

Standalone applications

When you want to create a “traditional” Windows application, you should choose to create “Windows Application (WPF)”.

The Windows Form now became a Window, each of these is declared as Window1.xaml. Notice that the build action for a Window file is automatically set to Page. What this means, is that the markup is turned into a special type of resource that can be identified uniquely by a Uniform Resource Identifier (URI). This way, WPF can load the window using a URI, as is done set the starting point in your App.xaml.

<Application x:Class="WindowsApplication2.App"
    xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation "
    xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml "
    StartupUri="Window1.xaml"
    >

This way, your application knows which window it has to load up first. This window is loaded modeless, meaning that it has no problems with you clicking anywhere else in the application.

Page’d applications

Should you want to create an application that mimics the web experience but still run as a standalone application, you should start by adding a Page(WPF).

Just like in the Window, you can add controls and content to the page. However, when you change the startupuri in the App.xaml to your newly added page, some things will change.

A window can host itself, like a form did in traditional Windows Forms programming. A HTML/ASPX page requires a browser. Now, we created a “standalone” application with the starting point set to a page. Kinda weird, right?

Well, the Application class in WPF is smart enough to detect if your startupuri is set to a page. It will then create a window to host your application.

Now, where does this “hosting window” come from?
When the startupuri is set to a XAML page or HTML page, Application  creates an instance of NavigationWindow to host them. This class derives from Window but extends it to make it look like a mini-browser window, providing navigation buttons at the top.

When content changes or when you click a link to navigate to another page, the previous content is added to the history. The management of the history itself is managed too by the NavigationWindow.

XAML Browser applications

The final type of application is the XAML browser application. While the previous type of application basically is a web application, being hosted in its own mini-browser, you can’t really take advantage of all the features modern browser have today. If that’s what you need, you should create a XAML browser application or XBAP.

To create one, you should choose new “XAML Browser Application (WPF)”. After that, you can copy all the code you created for that WPF standalone application to one or more pages, and your application is ready for the web!

One more thing you can do with XBAPs is publish them on a web- or intranet server. This is done using ClickOnce, which creates the executable along with 2 manifest files. One of these 2 has the extension XBAP, and that’s were the user navigates too. It then “downloads” the application to the local computer.

Because of the security risk, XBAPs are not installed and run in a security sandbox: some operations like writing to the registry are not allowed. Basically, XBAPs can only do things that are allowed for apps launched from the Internet zone, a restricted set of operations.

Conclusion
As you can see, the ways an application is build are different from what you are used to in traditional programming. I hope this guide is clear enough to help you choose the correct type when building a WPF application for Vista.
 

Today, I was installing the VPC (Virtual PC image) that Microsoft provides for all early adopters on future technologies, including .net 3.0. I intend to use this VPC for my presentation later this month.

This image-file includes a whole lot of CTP/preview versions, as can be seen here.

However, when opening the file, I received the following notice: E:\VPC\TimeBombedBase\Base01.vhd cannot be found... Appearantly, this is the parent image, of which the CTP is a differencing disk.

On the setup instructions page, MS appearantly forgot to mention that this 4GB download also requires you to obtain the parent VPC image, a 1.1GB download...
This file can be found here: http://download.microsoft.com/download/5/4/9/5499b008-8ae7-46f0-89ae-aeeb18df67ae/VSCTPBase.exe 

Should you want to play around with .net 3.0/LINQ... and don't feel like installing all these on a VPC yourself, you can grab the download here: http://www.microsoft.com/downloads/details.aspx?FamilyID=82243606-d16d-445c-8949-9ee8c10cda2e&DisplayLang=en  

In a few weeks, I'll be doing a session on Windows Presentation Foundation, or WPF at Ordina, my company.

The info:
.NET Framework 3.0 heeft de RC1-status bereikt. Hoewel de naamgeving anders doet vermoeden is versie 3 geen upgrade van versie 2, maar meer een uitbreiding hierop. .NET Framework 3.0 bevat .NET Framework 2.0 plus vier nieuwe libraries.
De nieuwe toevoegingen aan .NET Framework 3.0 krijgen de namen Windows Communications Foundation , Windows Presentation Foundation , Windows Workflow Foundation en de Windows CardSpace Identity Library.

Free training alert!!!

Microsoft Learning  developed some free online training(Collection 5134 : Developing Rich Experiences with Microsoft® .NET Framework 3.0 and Visual Studio® 2005) that you can use for a limited time.
You will learn how to develop rich experiences using Windows Presentation Foundation, Windows Workflow Foundation, and Windows Communication Foundation.

This collection of 3 2-hour premium clinics teaches about the new capabilities provided by the .NET Framework 3.0. These clinics are for experienced Developers and Software Architects who are looking to adopt Microsoft's next generation technology within their solutions.

From: Collection 5134 : Developing Rich Experiences with Microsoft® .NET Framework 3.0 and Visual Studio® 2005

Another new release of the .net framework 3.0 has been released! This time, it's the September CTP.

The Microsoft .NET Framework 3.0 (formerly known as WinFX), is the new managed code programming model for Windows. It combines the power of the .NET Framework 2.0 with new technologies for building applications that have visually compelling user experiences, seamless communication across technology boundaries, and the ability to support a wide range of business processes.
These new technologies are Windows Presentation Foundation, Windows Communication Foundation, Windows Workflow Foundation, and Windows CardSpace (formerly code named "Infocard"). Microsoft plans to ship .NET Framework 3.0 as part of the Windows Vista operating system. In addition, Microsoft is making these technologies available on Windows XP and Windows Server 2003.
The following Community Technology Preview of .NET Framework 3.0 enables you to continue experimenting with early builds of these technologies, get acquainted with the development experience, and provide feedback to Microsoft. For more information on these technologies, click here.

Installation
To start the installation process, you will need to run the download file; this will initiate the installation of the .NET Framework 3.0 September CTP; If you have troubles with the download manager, you can download the entire package for x86 or for x64 which are both .EXE files.

Enjoy!

A list of some new WPF resources:

• Online hosted version of the Cube animation: http://wpf.netfx3.com/direct/cubeapp/CubeApp.xbap
• New York Times: offline reader: http://www.nytimes.com/mem/reader_regi.html?_r=1
• WPF feature montage: http://wpf.netfx3.com/files/folders/code_snippets/entry3752.aspx
• XAML cruncher: http://www.charlespetzold.com/wpf/XamlCruncher/XamlCruncher.application 
• 3D XAML: http://www.charlespetzold.com/blog/2006/09/120140.html

More to come...

Is today "Release Day" or something? So many new releases...

Let's begin with IronPython, which reached status 1.0:

IronPython 1.0 has been released to the .NET community and is available on CodePlex.  IronPython is an implementation of the Python dynamic programming language.  IronPython is built on top of the .NET Framework and is interoperable with other .NET languages.  Binaries, source code, and tutorials are available at CodePlex.

Click here to download IronPython at CodePlex.

Another release is Expression Web Beta 1:

We are pleased to present the Beta 1 release of Expression Web (formerly Expression Web Designer).

Expression Web is a professional design tool that helps you create and work with:

• Standards-based Web sites
• Sophisticated CSS-based layouts
• Extensive CSS formatting and management
• Rich data presentation
• Powerful ASP.NET 2.0-based technology

To download, go here .

Still going strong ;-) Next is WCF, which reached RC1 also.

The release candidate 1 for the .NET Framework 3.0 is now available!  You can download the components for the RC1 here:

• .NET Framework 3.0 Runtime Components RC1
• Windows SDK for Vista RC1 and the .NET Framework 3.0 RC1
• Visual Studio 2005 Extensions for Windows Workflow Foundation (WF RC5)

More info on RC1 .


The Interactive Designer got updated, and now the September CTP is available:
Microsoft® Expression® Interactive Designer September 2006 Community Technology Preview (CTP) is a professional design tool used to create engaging, rich user interfaces for desktop and Web applications.

To download, go here.

To finish, this one isn't actually released as of yet, but it's an interesting project being researched at MS:

Microsoft researchers are experimenting with an automatic code zapper for the company's Internet Explorer Web browser.

Researchers at the Redmond, Wash., company have completed work on a prototype framework called BrowserShield that promises to allow IE to intercept and remove, on the fly, malicious code hidden on Web pages, instead showing users safe equivalents of those pages.

The BrowserShield project—the brainchild of Helen Wang, a project leader in Microsoft Research's Systems & Networking Research Group, and an outgrowth of the company's Shield initiative to block network worms—could one day even become Microsoft's answer to zero-day browser exploits such as the WMF (Windows Metafile) attack that spread like wildfire in December 2005.
More here.

That's all folks ;-)

My new bible has arrived :-)

In this tutorial, I'm going to explain several 2D effects that can be performed on images, using only XAML code. By the end of this tutorial, you'll know:

• how to create image refections
• how to skew images
• how to drop shadows

So let's get to it!

Create an empty WinFX application. We'll use the Window1.xaml.
Make the background of the image somewhat darker, so we can better see the effects we'll create further on. For this, simply use the Window.Background property. Also, set the Height to 600 and Width to 800.

<Window x:Class="Reflection.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Reflection" Height="600" Width="800" 
   Background="#CCCCCC"
>

Add the image to your project
Select an image to include in your project. I'll do this tutorial with the image included in my project, but you can of course use any image you want. The image has to be included in your project. Once included, go to the properties window, and with the image selected in the solution explorer, set the "Build Action" to "Content" and "Copy to output directory" to "Copy always". This ensures that the image will be available when running the project.

Let's XAML
Finally, we're ready to do some XAML'ing (don't know if that is already a word, but I vote it should become one though!).
Since we will not be needing any advanced layout of the window, we'll use a simple StackPanel. By default, a stackpanel places all content it receives in 1 invisible vertical column. That's enough for this sample.

So, delete the <Grid> and </Grid> and replace them with <StackPanel> and </StackPanel>.

For the image effects, we'll need ... an image. Add an simple image element to begin with. Also, give it a name, we'll be needing this name later on. Use the following code:

<Image Source="image.jpg" Width="200" Height="300" x:Name="myImage"></Image>

We'll now start adding the reflection effect. For reflections, the VisualBrush is very handy.
What is the VisualBrush? It's a brush, like DrawingBrush, but it can paint with the contents of any other visual element that derives from Visual. Since Visual is the base class of all UI elements in WPF, you can paint with almost any markup in a VisualBrush.
Before we can reflect our image, we must add an element in which we can make the reflection appear. You can do this with a Rectangle, a Border...
For now, I'll use the Border. Add the Border element to the same StackPanel where you put the image. Since it's a StackPanel, the border is put below the Image (you can visualize this by setting the Background to some color).

<Border Width="210" Height="300"></Border>

Now, we'll use the recently introduced VisualBrush to fill the background of the Border with the contents of the image (this is why we needed to name the image!).
Add a VisualBrush to the Border like so:

<Border.Background>
   <VisualBrush Visual="{Binding ElementName=myImage}">
   </VisualBrush>
</Border.Background>

You should now see something like this:

Of course, for a reflection, we need a mirror effect. This can be achieved by adding a ScaleTransform on the VisualBrush. By providing a value of -1, the image will be flipped around the Y-axis.

<VisualBrush.Transform>
   <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="200" CenterY="150"></ScaleTransform>
</VisualBrush.Transform>

Now, to complete the reflection-part of this tutorial, we'll add an OpacityMask to the Border. With this in place, we can make the reflected image fade out into the backgroud, creating a nice effect.

<Border.OpacityMask>
   <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
      <GradientStop Offset="0" Color="Black"></GradientStop>
      <GradientStop Offset="0.6" Color="Transparent"></GradientStop>
   </LinearGradientBrush>
</Border.OpacityMask>

This again uses a LinearGradientBrush, with the color being Transparant from 0.6 on. This means that at 60% of the reflected image, nothing can be seen anymore.

We'll also add a border around the original image in this code. Add the following code around your image element:

<Border BorderBrush="White" BorderThickness="5" HorizontalAlignment="Center" VerticalAlignment="Center">
...
</Border>

Your code should now look like the following:

<StackPanel>
   <Border BorderBrush="White" BorderThickness="5" HorizontalAlignment="Center" VerticalAlignment="Center">
      <Image Source="image.jpg" Width="200" Height="300" Stretch="Fill" x:Name="myImage"></Image>
   </Border>
   <Border Width="210" Height="300">
      <Border.Background>
         <VisualBrush Visual="{Binding ElementName=myImage}">
            <VisualBrush.Transform>
               <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="200" CenterY="150"></ScaleTransform>
            </VisualBrush.Transform>
         </VisualBrush>
      </Border.Background>
      <Border.OpacityMask>
         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="Black"></GradientStop>
            <GradientStop Offset="0.6" Color="Transparent"></GradientStop>
         </LinearGradientBrush>
      </Border.OpacityMask>
   </Border>
</StackPanel>

And the result should resemble this:



Skew and Shadows
In the latest part of this tutorial, I'm going to add a shadow to the original image, and skew both the images, to create a 3D effect.
First, the shadow. Shadows are created using a BitmapEffect. A bitmap effect takes visual content as input and produces a new surface by applying one or more image filters, such as a blur or a drop shadow. Currently, there are, among other, the DropShadowEffect, the BlurBitmapEffect and the EmbossBitmapEffect. More might be added later. We'll focus on the DropShadowEffect for now. Information on the other effects can be found in the Windows SDK.

Add the following code to the Border where the original images resides:

<Border.BitmapEffect>
   <BitmapEffectGroup>
      <DropShadowBitmapEffect Color="Black" Direction="20" ShadowDepth="25" Softness="1" 
         Opacity="0.5"/>
   </BitmapEffectGroup>
</Border.BitmapEffect>

This adds the dropshadow to the white border containing the image. These properties are self-explaining, so I'm not going any deeper into this.

Now, to finish, we have to skew both the image and the reflection to create the effect of depth. For this, we'll again use a transformation, this time a RenderTransform. The Angle-properties provided indicate the angle for the rotation.
The following code has to be added to the original image.

<Border.RenderTransform>
   <SkewTransform CenterX="0" CenterY="0" AngleX="0" AngleY="10" />
</Border.RenderTransform>

The reflection needs a re-centering, so we provide a value for the CenterX and CenterY properties.

The result you get should like the following:



I hope this WPF example can help you in creating great layouts with this fantastic new language!

The complete solution can be downloaded below.

ImageEffects.zip (120.66 KB)

Note that you need Visual Studio 2005/Visual C# Express with .net 3.0 installed. This code is tested with the June CTP.

I'm through with learning WPF (Windows Presentation Foundation), so now I'll have more time to write some samples for my blog, so everybode can start learning a little on WPF (that double-U-P-F ;-) ).

Today, I'm going to show you a small sample, in which I use a gradient and a storyboard to create a sort of a flashing circle. This could be used to draw the user's attention to something in the UI.

Here is the sample code:

<Page xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= http://schemas.microsoft.com/winfx/2006/xaml
WindowTitle="www.snowball.be - WPF Examples" Background="White">
<DockPanel>
   <Ellipse Width="200" Height="200" Name="MyEllipse">
      <Ellipse.Fill>
         <RadialGradientBrush >
            <GradientStop Offset="0" Color="#CCCCCCCC" />
            <GradientStop Offset="0.5" Color="white" />
            <GradientStop Offset="1" Color="black"/>
         </RadialGradientBrush >
      </Ellipse.Fill>
   </Ellipse>
<DockPanel.Triggers>
   <EventTrigger RoutedEvent="Page.Loaded">
      <BeginStoryboard Name="MyBeginStoryBoard">
         <Storyboard Name="MyStoryBoard">
            <DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Ellipse.Height)" 
               From="0" To="200" AutoReverse="true"
               RepeatBehavior="0:0:10" BeginTime="0:0:0" />
            <DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Ellipse.Width)" 
               From="0" To="200" AutoReverse="true"
               RepeatBehavior="0:0:10" BeginTime="0:0:0" />
         </Storyboard>
      </BeginStoryboard>
   </EventTrigger>
</DockPanel.Triggers>
</DockPanel>
</Page>

First, I create an circle, which is actually an ellipse with identical width and height (one could also use the RadiusX and RadiusY properties, the result would be the same).

<Ellipse Width="200" Height="200" Name="MyEllipse">

Then, we use a Brush, in this case, the RadialGradientBrush, to create a gradient fill in the ellipse. No longer are the "GradientStops" or the "GradientStopsCollection" tags neccessary (they were in previous CTP's, but now they can be omitted).
To specify the colors, we use several GradientStop elements. The offset specifies where the color should "start". This is a relative value, and thus can't be more than 1. In this case, I specify 3 colors.

<GradientStop Offset="0" Color="#CCCCCCCC" />
<GradientStop Offset="0.5" Color="white" />
<GradientStop Offset="1" Color="black"/>

Now, to create the flashing effect, we have to use an animation. To start the animation, we use a trigger, in this case, an event trigger, which is routed to the Loaded event. This results in the trigger firing when the page loads.

<EventTrigger RoutedEvent="Page.Loaded">

For the animation itself, we use the storyboard. In this storyboard, which is like the name says, a series of steps that will be executed. You can compare it to a band of drawings that form a comic.
The storyboard thus consists of several animations. In this case, I use a DoubleAnimation, because the property I'm going to change, is of value Double: I'm going to alter the Height and Width property of the Ellipse. These are indeed Double values.

In the first animation, I specify that I want to animate the ellipse I created earlier, by setting the TargetName, and the property I want to change is the Height. In the From and the To properties, I specify what the values for the Height should be. In this case, I want the ellipse to pop up out of nothing, so I set the From to 0 and the To to 200.

The RepeatBehavior property specifies how long this animation should repeat, in this case, I set it to 10 seconds. Note that several animations can have different RepeatBehaviors: one can go one longer than the other. The BeginTime simply specifies when the animation should start: you can build in a delay.
Finally, the AutoReverse property indicates that WPF should reverse the animation after completed.

The second animation does essentially the same, but for the width.
Both these animations can't be grouped into one, which is a pity.

The result looks like this:

Last week, a collegue of mine told me about a video on the ADO.net entity framework over at Channel9. I watched it, and was very impressed.

Today, MS released the first CTP for this framework that is to be included later on in the .net framework. 

From the release notes:

This package is the first Community Technology Preview (CTP) of ADO.NET vNext and includes the preview build of the ADO.NET Entity Framework along with samples and whitepapers. The ADO.NET Entity Framework supports Object Relational Mapping scenarios using ADO.NET Entities, in this build you can:
- Query of persistent Entities using LINQ to Entities or Entity SQL
- Save new and dirtied entity instances through the object abstractions which also handle
o State management
o Identity resolution
o Change tracking
- Work with persistent object graphs and leverage a programming and query model where relationships are a first class concept
- Use optimistic concurrency and server generated values with persistent entities
- Program against persistent entities as values using the new Map Provider
- Get first hand experience with Entities and the Entity Data Model
- Work with mappings based on view maintenance concepts to support
o Entity Splitting (entities split across multiple tables)
o Table Per Hierarchy, Table Per Class and Table Per Type mappings
o Property renaming
o Conditional mappings

It's a small download, if you want to give it a try, head over to Microsoft downloads.

Just like me, my collegue Gabriel dislikes the renaming of WinFX to .net 3.0. On his blog, he points to an online petition to convince Microsoft to go back to WinFX, instead of .net 3.0.

So, if you share the same opinion, don't hesitate to sign the petition too!

As previously announced here, on September 25th, Microsoft is organizing an event on .net 3.0 in Kinepolis Brussels. David Boschmans announced the complete agenda on his site today.
Today, the line-up and sessions are announced. A new item is that we, the visitors, can now vote which sessions we want to see.

So, everybody, go vote AND PLEASE don't vote for the introductions!!

Vote here.
General information on the event can be found here.

People have been asking me questions about WPF, mostly how to get started.
Since WPF is still somewhat obscure, in this article I’m going to try to make things a little more clear to get you on your way using WPF.

As you might or might not know, WPF is part of .net 3.0, formerly known as WinFX. Other components included in .net 3.0 are WCF (Windows Communication Foundation), WF (Windows Workflow Foundation) and CardSpace (formerly InfoCard).

For starters, you need an operating system supporting WPF. This can be:
-Windows XP SP2
-Windows 2003
-Windows Vista

I do recommend running .net 3.0 in a virtual pc environment! Since a lot of CTP’s, beta’s and RC’s are coming our way, it’s easier to just create a VPC with Windows XP or 2003 , and install .net 3.0! Since Virtual PC is free anyhow, I don’t see a reason why not doing it this way!
Uninstalling beta software can be a real pain, so why compromise your precious production environment!?
(For Virtual PC go here)

On both XP and 2003, you need to install the runtime, to be able to run WPF applications. This can be a web-install (of around 2.5 MB, and then the rest is downloaded) or you might as well download the whole package.

Now, there are some issues with the latest CTP of July… This latest release does not come with the Visual Studio 2005 extensions, required to build your WPF applications in VS.
Therefore, if you want to start developing (or better, start playing around…), I suggest you stick to the June CTP, which has full support for all the tools.

So, if you want to develop within Visual Studio, follow the next steps. If not, skip this section.
The June CTP runtime can be downloaded here.

To start developing, you might want to install the SDK. It’s a big download of around 1.1GB. It comes with lots of samples and tools, like XAMLPad. The SDK can be downloaded here.

The SDK is however not required when you intend to develop in Visual Studio! For VS, Microsoft has released some extensions and templates, which will make your WPF-life a lot easier! If you don’t have Visual Studio, you can use one of the free Express editions.
For the download, go here.

We’re almost done!
Microsoft is also preparing a set of designer tools for WPF, the Expression suite.
The Interactive Designer outputs XAML code, which can be used to enhance the layout of your applications, without even knowing XAML!
For the Interactive Designer, go here.
The Graphic Designer allows you to create images and export these as XAML code to be included in your WPF projects.
This can be downloaded here.

That’s it! Now, you are ready to start!

If you want the latest release, and don’t care for the Visual Studio Extensions, go for the July CTP, which was released July 18th.

The runtime can be downloaded here.
And the SDK is found right here.

I did find some work around to get this latest CTP working with Orcas, but since I didn’t try it myself, I cannot guarantee that it will work.
The “fix” goes as follows:

Instal Orcas in VS using the misexec override: msiexec /i vsextwfx.msi WRC_INSTALLED_OVERRIDE=1

The override bypasses the installation version checking so you can install the extensions.

After this you have July CTP installed and Orcas from the previous version. This works just fine.

To solve your problem with the Orcas designer trying to open:

Right click on a .xaml file in your solution and choose "open with...". Choose "xml Editor" and click on "Set as default". Now all .xaml files will open with the xml editor instead of trying to open the unfinished Orcas designer.

In a next article, I’ll post some interesting resources to get you building WPF applications in no time!

WPF not only stands for new fantastic tools for layout. There are also some very interesting new ways to implement databinding in your applications.
In this article, I’m going to show how you can easily build an RSS reader using the new databinding features in WPF.

How databinding works in WPF
In order not to go too fast, first, let me explain some basic concepts of databinding in WPF.

To keep data used in UI in sync with data in the datasource (for example a database), we can of course use properties. There is nothing wrong if you keep doing this under WPF.
However, WPF provides very handy binding features, that will make your life a lot easier!

We could bind the value of a textbox with the following code:
<TextBox Text="{Binding Path=Age}">
</TextBox>
Databinding under WPF uses a Binding object. The above code declares a textbox in XAML, and assigns the text-property the value of a property named Age of an object that it is bound to. This is done using the Path property. The Path property refers to the property of the object we are binding too.

To know to which object we are binding, we have the DataContext property. In WPF, every FrameworkElement and also every FrameworkContentElement has a DataContext property. It is of type object, so we can bind to whatever we like.
The binding does however have some interesting behaviour: if no DataContext is specified on the object itself (like with our textbox), it goes up the tree in which the controls are nested. So if we add our textbox in a Grid, it will look if this Grid has a DataContext. If not, it goes up higher…
This is of course very useful if we have more than one object (say 5 textboxes) binding to the same object.

Let me show you how to declare an object to which we’ll bind in XAML code (this uses the new syntax, so to run this, you have to upgrade to beta 2 or higher!)

<Window x:Class="Snowball.Window2"
    xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation "
    xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml "
    xmlns:local="clr-namespace:Snowball"
    Title="Snowball" Height="300" Width="300"
    >
  <Window.Resources>
    <local:Person x:Key="Gill" Name="Gill Cleeren" Age="27"/>
  </Window.Resources>
    <Grid DataContext="{StaticResource Gill}">
      
      <TextBox Text="{Binding Path=Name}">
      </TextBox>
    </Grid>
</Window>

And in the code-behind:
namespace Snowball
{
    public class Person
    {
        private string name;

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
        private string age;

        public string Age
        {
            get { return age; }
            set { age = value; }
        }

        public Person()
        { }
    }
}

What I have done here, is creating a Person object in XAML. For this to work, you have to provide a default constructor.
First, we have to wire the CLR namespace to be known in XAML: xmlns:local="clr-namespace:Snowball".
Now, we can use the tag “local” to refer to the namespace in which the Person class resides.
Using the following line, we instantiate a Person using XAML:
<local:Person x:Key="Gill" Name="Gill Cleeren" Age="27"/>

The result is a textbox showing my name:

Note that if you try this in Visual Studio at the time of writing, you get an error viewing the design view. Don’t worry, when running, it all works fine.

Binding XML data to a list
Most of the time, we bind data to a list: a dropdown, a grid… In this part, I’m going to bind an RSS feed from my website www.snowball.be to a list.
To do this, we’ll need an XmlDataProvider.

Data can be accessed by using a Provider. Currently, 2 providers exist: the XmlDataProvider and the ObjectDataProvider.
An XmlDataProvider object must be declared within the resources, for example the resources of the grid:

<Grid.Resources>
        <XmlDataProvider x:Key="SnowballRSS" Source=" http://www.snowball.be/SyndicationService.asmx/GetRss " />
</Grid.Resources>

The x:Key assigns a name, which we can use in our code-behind.

We can now use this object as a datasource for a listbox, like this:

<ListBox ItemsSource="{Binding Source={StaticResource SnowballRSS}, XPath=//rss//channel//item }">
</ListBox.ItemTemplate>

We provide a value for the ItemSource, being an instance of Binding. For this Binding instance, we provide the Source property. Since we’re dealing with a resource that is defined in the XAML itself, we again use StaticResource and as value, the name of the dataprovider. A second attribute is the XPath expression, to locate the value we want to show in the listbox.

This is the result:

What happens, is that the entire XML tag is being read into a listitem. This is not desired, so we have to provide some kind of formatting, to tell WPF exactly what we want to show in the items.
This can be accomplished using a datatemplate.

We provide an instance of DataTemplate to be used as value for the ItemTemplate property of the listbox. In this datatemplate, we can specify what to show as listitem.
In the following code, I’m telling to make each listitem consist of a TextBlock. The text to be shown is taken from the surrounding Listbox (remember searching for the data up in the controltree?). In the data it finds, which is an XML tag with subnodes, we can to take the title as the value for the item.

<ListBox.ItemTemplate>
   <DataTemplate>
      <TextBlock Text="{Binding XPath=title}"></TextBlock>
   </DataTemplate>
</ListBox.ItemTemplate>

When we now run this, we get the following:

Much better, isn’t it?!

In the next part, we’re going to make the application a little bit more complete, providing a click event for the listbox, and making sure that some fields are filled in, again using databinding.

Adding the detailsform
We’ll now change the program somewhat to make it display the details of the item selected in the listbox.

We’ll add a Grid to make it easy to display 3 rows and 2 columns with textblocks, labels and textboxes.
This can be done with the following code:

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="*"></RowDefinition>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.2*"></ColumnDefinition>
      <ColumnDefinition Width="0.8*"></ColumnDefinition>
   </Grid.ColumnDefinitions>
   <TextBlock Grid.Row="0" Grid.Column="0">Title</TextBlock>
   <Label Grid.Row="0" Grid.Column="1"></Label>
   <TextBlock Grid.Row="1" Grid.Column="0">Link:</TextBlock>
   <Label Grid.Row="1" Grid.Column="1" ></Label>
   <TextBlock Grid.Row="2" Grid.Column="0">Article</TextBlock>
   <TextBox Grid.Row="2" Grid.Column="1"></TextBox>
</Grid>

After adding the Grid, we’ll also have to change the rest of the markup a little. Take a look at the sample code provided with this article to see the rest of the layout.

We now want the detail-fields display more info on the selected item in the Listbox.  Therefore, the Grid containing these fields should have its DataContext set to the item selected in the list. We do this with the following code:

<Grid DataContext="{Binding ElementName=RSSList, Path=SelectedItem}" >

The element is the name of the listbox, the path is once again the property within the source to which we’ll be binding the grid (and thus the detail fields).

Now, every time we select an item in the listbox, the grid has its datacontext set to this selected item. The fields can now get details as follows:

…
<Label Grid.Row="0" Grid.Column="1" Content="{Binding XPath=title}"></Label>
…
<Label Grid.Row="1" Grid.Column="1" Content="{Binding XPath=link}">
            </Label>
…
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding XPath=description}"></TextBox>

The result should resemble the following:

Congratulations, you built your first databound application, using WPF databinding and a simple datatemplate!

In my next (large) article, we’ll be looking at the styling tools provided by WPF to make this application look TONS better!

Now that WPF (Windows Presentation Foundation) is coming closer, it's getting high time that we developers start looking at what WPF can do for us.

The Microsoft Windows Presentation Foundation provides the foundation for building applications and high fidelity experiences in Windows Vista, blending together application UI, documents, and media content, while exploiting the full power of your computer.

This site has 4very nice looking, downloadable examples. You'll need WinFX Beta 2 to run them, though.