Today I think I broke a record: the most popular SilverlightShow webinar, judging from the number of registrations and attendees. Thanks all for joining!

Here are the slides and demos for part 1:

Slides - Demos

Hope to see you for part 2 on February 9th!

KaXaml has finally hit the 1.0 milestone! Indeed, finally!

In case you don't know this great little (free) XAML tool, here's what the official website has to say on it:
Kaxaml is a lightweight XAML editor that gives you a "split view" so you can see both your XAML and your rendered content (kind of like XamlPad but without the gigabyte of SDK).

There are a lot of new features included in the 1.0 release, including Intellisense support, a new UI and tabsupport. To see an overview of all the new features, go here. One other interesting thing it that it now has basic support for Silverlight too!

Convinced that this can and will make your XAML life easier? Go here for the free download or visit www.kaxaml.com .

Yesterday, another CTP of Blend 2, THE tool for create Silverlight and Windows Presentation Foundation applications, was released. This time, it's the September Preview.
Here's a list of what was added/changed:

• VS2008 beta 2 full support
• Creation of Controls from existing objects - reuse them all.
• Some enhancements with Split View - now you can see Design and Code both as well as you can do it in Visual Studio
• Storyboard picker - the old Storyboard panel has been thrown and replaced with brand new storyboard picker. Now you can duplicate, reverse or delete existing storyboard or easy modify its properties.
• Aside with new storyboard picker, now you have properties panel both for all sotryboard or single frame.
• New functionality - 3D Vertex animation
• Long awaited Breadcrumb bar
• Subsetting and embedding fonts within your application (EULA awarded)
• New build options - how you can create custom builds for better integration with Visual Studio
• New abilities of object manipulation - uniformly resize, scale, rotate multiple objects, resizing handlers at artboard. Easy object duplication by dragging with Ctrl-P pressed.

You can download a free copy here.

I'll be doing a session on Silverlight next month, on September 20th for Visug, the Belgian Visual Studio User Group. In this session, I'll give an overview of XAML too, so that if you've got no knowledge, you'll still be able to follow the entire session. This event will take place in the Ordina (my company) buildings in Schelle.

I will announce the complete overview in a few days, as I'll be working on my session in the coming week (I have a week off, but I'll be working anyhow ;-) ).

If you want to register for this free training, please go to www.visug.be and click on the event! So, what are you waiting for?!?!

I came across this post which has code for a perfect XAML shield.

As WPF is becoming more and more used, the list of available tools and controls is growing fast.

Therefore, it seemed a good idea to list all the tools that I use or know but don't use yet, and share that list with you!

Professional tools

Visual Studio 2005
There's no doubt that Visual Studio 2005 is the best environment for developing WPF applications. So, if you have access to it (via MSDN for example), I certainly recommend using it.
However, out of the box, it has no knowledge of WPF projects, so you'll have to install some additional software.
First, you should install the Windows SDK (free), then you should add the Visual Studio 2005 extensions for .net 3.0 framework (they also include templates for WCF). These extensions install the templates for development of WPF projects, and also add Intellisense for XAML code (on a sidenote, when writing XAML code, the Intellisense is not always correct in flagging errors, due to the fact that the extensions are still in CTP phase!)

Also, you now get a designer for WPF applications, which is code-named Cider. The complete version will be included in the Orcas release.

Visual Studio Orcas
There's life after Visual Studio 2005! And it is known as Orcas. Visual Studio Orcas, the successor of 2005, will probably be released in Q4 2007, but you can download the CTP since a few months.
Just recently, the March 2007 CTP was released, which is considered a milestone on the road to the complete product.

 
So, what will Orcas bring to the world of WPF? It will include full support for designing WPF windows and web applications, with the completed version of Cider.
For now, it's possible to start using Orcas. You can download the CTP here (large download, beware!)

Expression Suite
The Expression suite is a range of new products from Microsoft. The collection includes Blend, Web, Design and Media. Web is more or less the (very much improved) successor of FrontPage.

Blend is the tool that is the most interesting for WPF developers/designers. It allows you to open a WPF project, design it in a very advanced environment using a wide range of tools (much like Photoshop, but for designing user interfaces). After you're finished, you can open the project in Visual Studio again.
At this time, Blend is in RC, but since it's a public download, you can start using it right now. I hope I'll find some time to do a tutorial on Blend soon.

Design, a professional illustration and graphic design tool, is still in beta 2, but also available for download already. Design fully supports export to XAML, which makes it easy to incorporate your graphics with your other XAML code.
On a sidenote, Web has been released and you can download a trial here.

Controls

Infragistics NetAdvantage 2007 for WPF
Infragistics recently released Beta 1 of their first WPF controls. The suite, which can be downloaded here for free, includes the xamDataGrid and xamDataPresenter controls (pronounced "zamDataGrid" and "zamDataPresenter").


Some controls, like the xamCarouselListBox seem very promising and seem to make it very easy to add advanced features to your applications.
 

ActiPro Ribbon
Last week, I got a mail from ActiPro, to introduce me to their ActiPro Ribbon. The control features Office 2007-like user interface for the Windows Presentation Foundation (WPF) and meets all of the core Microsoft licensing requirements for implementation of a ribbon user interface. I must say, it looks very nice. You can download a demo here.

 
XCeed WPF DataGrid
I found this control via a banner on Scott Hanselman's site... These guys simply give away FOR FREE the entire control, which is a fully featured WPF datagrid. It's risky to say but I think this replaces the missing datagrid in WPF.

When you register, the license is royalty free and perpetual. So, no excuse for not having this control in your toolbox.
Here you can check out some demo's and get the control.

Tools

XamlPad
XamlPad (xamlpad.exe) is a basic visual editor for XAML. If you installed the SDK, it's probably already on your PC, since it's part of the default install.
XamlPad is quite basic, and some say not the most user friendly. Therefore, I recommend using one of the two following tools in this list for basic XAML.

XamlPadX
XamlPadX(Extended) is a somehow extended version of XamlPad and has some handy features. Some of its most important features (from the site):

• A xaml writer which parses the object back into xaml and vice versa.
• Simple command interpreter with limited intellisense (please look at help window for limitations).
• Viewer of default styles
• Automatically closing of tags
• Line-numbering
• Possibility to save in different locations
• Indentation feature (!)

You can download the lastest version here.

Kazaml
Another editor, which is now in alpha 2 phase, and is thus not yet complete. You can download it here and more info can be found here.

Adobe Fireworks XAML exporter
This free extension from Infragistics makes it possible to convert anything that's currently selected to XAML. You can download it here.

Performance Profiling tools
WPFPerf is a set of tools that can help you find performance issues in WPF. It included Perforator, Event Trace, Trace Viewer, Visual Profiler and Working Set Analyzer. There's a very in-depth article on MSDN that you can read here.

LocBAML
LocBAML is actually a sample included in the SDK. After you compile your XAML into an assembly, it can extract the strings and place them into a *.csv file. This file can then be translated, and the file can then be given again to LocBAML, which will create culture-specific resource DLLs. Handy for when you're translating your WPF application.

Reflector
Since Reflector updated to version 5, it supports the .net 3.0 framework, and thus WPF files can be extracted from assemblies.


I hope you find in this list some tools that can help you explore the world of WPF.

If you know another tool not listed here, or if you have developed a control/tool you'd like to see in this list, please leave a comment or send me a mail.

While I was reading today on WPF, I came across a property that can come in very handy when designing an interface using a GridView (which is the default when you start a WPF project in Visual Studio by the way).

When setting the ShowGridLines property on a GridView to True, in design view, the cells of of grid are highlighted with a blue and yellow dashed line. This line is of course not useful for production environment, but can come in handy when debugging/designing!

You can see a sample on the image below.

Some time ago, we did a .net 3.0 event at Ordina. We did some demo's on WPF and WCF.
However, there was one thing in our demo we couldn't figure out ourselves: how does the spelling check on a textbox in WPF work in the following code:

Appearantly, it works using the dictionary provided by Microsoft Office, and is thus multilingual. So, it's not a feature of .net 3.0!
On the down side, in the current version, it's not possible to add custom dictionaries. That might change in a future version.

As opposed to what was said earlier, Expression Suite will be included in MSDN Premium subscriptions!! That's simply great news, isn't it?! Somasegar did the announcement today on his blog, based on the feedback they received.

Based on this feedback, I am pleased to say that we will be making Expression Web available starting today to all MSDN Premium subscribers.  We will also make Expression Blend available to MSDN Premium subscribers shortly after the Expression Studio release later in Q2 2007.   Expression Blend and Expression Web are intended to help creative professionals collaborate with developers to create rich user experiences for the Web, Windows Vista applications and beyond, which means we need to make sure both tools are readily available to our developer community.

More here.

Lately, I've come across some interesting WPF resources and labs. In this post, I'll share them with you.

If you're into WPF, you probably already saw the North Face demo, one of the applications that MS used to demonstrate WPF and it's capabilities. You can now read the entire case study here.

Over at Channel9, a Wiki was created to gather all resources on WPF. On this page, you can find a tremendous amount of information and resources when you're learning WPF. Go here for the Wiki.

Karsten Januszewski posted a new lab on WPF 3D here.

Hope this helps you more in learning WPF!

Yesterday, at the Microsoft DevDays 2007 in Gent, Belgium, I talked with Jeff Prosise on the future of WPF/E. He was not able to give away much details of the platform, since a lot will be announced at the Mix 07 convention in Las Vegas next month.
What he did say, was that Microsoft will almost certainly announce a new name for the platform!

Why don't we help Microsoft a little?! Have a good idea on the name of this possible Flash killer? Post them here, and maybe somebody at Microsoft will pick it up...

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.
 

My article on WPF (Windows Presentation Foundation) triggers and styles is online on the MSDN website! You can read it here!

From MSDN:
In this article, Gill Cleeren focuses on the aspect of styles and triggers in Windows Presenation Foundation. Styles make it possible to create applications with a uniform look and with a high level of maintainability. Triggers allow WPF styles to change one or more properties in response of a user interaction. In this document, we will use both these technologies to create a richer user experience.

This is my first article on MSDN (more will come, now that I'm into it ;-) )

Here's a screenshot of the MSDN Belux site (Click for larger version)



Thanks to the MSDN Belux team, Wim Verhaegen and Tom Mertens.

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...

My new bible has arrived :-)

Today, I came across a nice article on validation and validation controls in WPF. Certainly worth the read if you're into WPF!

And here is another interesting WPF link: content in WPF.

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:

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!

Something that got me puzzled today was the Button.Content property. Let me first explain the WPF Content Model.

At the very base, we have controls and containers, or as I found somewhere, “bits of content and behavior” and “containers of bits of content and behavior”. However, there are 2 special things about the content containment.

For example, a simple button. You do not have to put a string as the content of a Button. It’s then again not prohibited either, as can be seen in the following code.

  <Button HorizontalAlignment="Left"
          Width="100"
          Height=”50” >Hello</Button>

Now comes the nice part: in WPF, you can use any element as content for a button. For example, an image. Or to make it all special, why not add video to a button?

      <Button Width="100" Height="50">
        <Image Source=" http://www.google.com/images/logo_sm.gif"></Image>
      </Button>

This works, because in the end, everything is derived from ContentControl, just like many other controls, for example Label, Checkbox and even Window itself. A ContentControl, like the Button, gets its contents via the Content property. So, the following code is actually the same as the before-last example.

      <Button Width="100" Height="50" Content="Hello">

What you end up with, is a control with the behavior of the actual control, but it can display whatever you want, without needing to build special derived classes like an ImageButtonClass.

Content properties
The content properties where today’s problem.

In earlier CTP, you could write :
      <Button Name="MyButton" >
        <Button.Content>
          …
        </Button.Content>
      </Button>

As soon as I tried this, a syntax error came on my screen, saying that this property was not allowed.
After some searching, I got it working by simply omitting the content-tag, like this.

<Button Name="MyButton" >
        …
</Button>

Now that we can add content to the control, we also need to be able to build them in a nice layout.  Currently, there are 4 layoutpanels: DockPanel, StackPanel, Grid and Canvas.

In the following code, I’m making use of the Grid Panel.

<Grid>
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <Button Grid.Row="0" Grid.Column="0">Button1</Button>
      <Button Grid.Row="0" Grid.Column="1">Button2</Button>
      <Button Grid.Row="0" Grid.Column="2">Button3</Button>
      <Button Grid.Row="1" Grid.Column="0">Button4</Button>
      <Button Grid.Row="1" Grid.Column="1">Button5</Button>
      <Button Grid.Row="1" Grid.Column="2">Button6</Button>
      <Button Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3">Button1</Button>
    </Grid>

And here, I make use of the Grid to make an ImageButton.

  <Button Name="MyButton" Margin="97,95.5,95,121.5" >
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>
      <Image Source="http://www.google.com/images/logo_sm.gif" Grid.Row="0"></Image>
      <TextBlock Grid.Row="1" HorizontalAlignment="Center" >Go to Google</TextBlock>
    </Grid>
  </Button>

Something else that got me scratching my head today was the following error: Error in markup file 'Window1.xaml' : Exception has been thrown by the target of an invocation.
I got this error when I write:

 <Image Source="coffeebean.bmp" Grid.Row="0"></Image>

One could think that the imagefile is corrupt, or simply not in the correct place… Well, that for sure isn’t the problem. Still haven’t figured this one out...

That’s about it for today. Hope you, like me, learned your first WPF/XAML steps. At this point, the examples are still very basic, but that will for sure change!