Learning WPF can be hard. Even if you have experience with Windows Forms or SWING, many concepts in WPF/XAML are very different and require a total brainwash before you can even put a button on a form. In his blog, Karsten calls this the WPF Curve and offers several resources to help.
Being on a mission to get more familiar with WPF (if for nothing else, to avoid handwaving in my UX presentations :-)), I wanted to offer this post as one of the many resources to help get you started. This is what you may learn in today’s installment:
Environment
Getting your environment right before you start following any of the code samples is critical. If you are not using a Beta version of Vista, you’ll need to install either the June or July CTP of the WinFX runtime. Fortunately, testing whether everything is installed OK is relatively easy. Simply use notepad to create a test.xaml file with the following:
<DockPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<TextBlock>Everything is working!</TextBlock>
</DockPanel>
Save the file, then click on it from Windows Explorer. If you see the text “Everything is working!” you (should) have the right foundations to begin.
Which IDE?
After the runtime is installed correctly, I recommend considering what IDE you are going to use to create WPF applications. Options include:
Notepad (or other text editors) – for the diehards out there that can live without Intellisense.
Visual Studio.NET with Cider preview installed – for the VS.NET junkies that can’t live without Intellisense.
Expression Interactive Designer CTP – for the photoshop inspired bunch.
Personally, I use a mix of all three. Notepad is great just for copying/pasting code snippets that you want to test, but difficult to bind events to, or do anything advanced with. Cider is good for providing Intellisense support for XAML files in VS.NET, but don’t expect full designer support today. EID is good for drawing a shape and then examining the underlying XAML to see how it was done. It can be a little verbose, but it works well for “how do I draw a circle?” type questions.
You may have heard of XAMLPad (a utility that ships with the Windows SDK). Again, it’s a good editor for trying sample code out – saves ALT-TABing between Notepad and Explorer, but I find it difficult to manage multiple XAML files and code behind scenarios.
My First Project
After getting your IDE choice setup, I recommend creating a blank application as a reference point. This is something that you can always fall back on in time of need. After a few attempts, I created a blank project in Visual Studio 2005 by choosing File -> New Project -> WinFX Windows Application.
After you do this you may see this error:
Error 1 Could create an instance of type 'Window'. C:\Users\sguest\Documents\Visual Studio 2005\Projects\BlankProject\BlankProject\Window1.xaml 1 1 BlankProject
…but if you compile it goes away (a Cider-related bug I believe).
You now have your first project up and running – now what? I recommend the following sequence for starting out learning new controls in WPF:
Panels
Start with Panels. Learn about the StackPanel, DockPanel etc – add a few pieces of text and change the orientation around. Add a couple of buttons for good measure (although they won’t do anything yet). This will give you a good overview of layout in WPF and you’ll have an appreciation where and how objects are displayed on the screen.
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="StackPanel1"
>
</StackPanel>
Multiple XAML Pages
After you master the panels, check out the Hyperlink control. The demos in the SDK documentation show how to use it to navigate between multiple XAML pages, which is really useful.
<Hyperlink NavigateUri="Window2.xaml">Go to Window 2</Hyperlink>
Events
Once you have some mastery of placing stuff in a window, I recommend learning how to bind events. The easiest way to do this is to create a button that changes its own title. Start with a button, and add a Click element that points to a function in your code behind file (you’ll have to add the function manually).
<Button HorizontalAlignment="Left"
Width="100" Height="25"
Margin="10,10,10,10"
Click = "b1Click"
Name ="Button1">Click Me Please</Button>
…
public void b1Click(object sender, RoutedEventArgs e)
{
this.Button1.Content = "You clicked me!";
}
This is an easy way to explore events – and will give the opportunity to see how you can modify objects defined in your XAML file from code behind. Use Intellisense to dig into the options available.
Styles and Triggers
After getting an event working, you’ll next want to investigate styles. A style enables you to control the look and feel of multiple controls in your application. For example, you can create a “MyButton” style which sets the background of each button to red. When you define a button, you can then set the style as appropriate. Of course, the advantage of this is that you can change the style once and effect multiple controls in your application.
<StackPanel.Resources>
<Style x:Key="MyButtonStyle">
<Setter Property="Control.Foreground" Value="Black"/>
</Style>
</StackPanel.Resources>
…
<Button HorizontalAlignment="Left"
Width="100" Height="25"
Margin="10,10,10,10"
Style ="{StaticResource MyButtonStyle}">Button 2</Button>
After getting the hang of Styles, look into Triggers. These are a subcomponent of Styles, and allow events to be fired based on a style. For example, changing the style of a control when you hover over it with the mouse.
<StackPanel.Resources>
<Style x:Key="MyButtonStyle">
<Setter Property="Control.Foreground" Value="Black"/>
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Control.Background" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
Where are we?
Hopefully that’s enough to give you a taste of using some of the simple controls in WPF…
I’m off getting my head around 2D elements in WPF (a.k.a. Argh… All I want to do is to draw a line!) and will be back with news. Wish me luck...
