June 15th, 2008
I thought I’d posted enough light-weight topics lately, so to create a bit of solid tutorial content I though I’d start a series of tutorials / articles on how to re-style the standard controls available with WPF, using expression blend. I’ve been asked a couple of times to do a starter tutorial, but never really had the time. So, with a bit of effort, here’s the first tutorial using Expression Blend and whilst you can create controls in Visual studio, it doesn’t offer anywhere near the same visual experience that blend does.
I know there are tutorials for these subjects available elsewhere, such as codeproject.com but the ones I’ve seen only show a rough outline of the process used to create a button, and then they don’t really cover the details in any depth to give the creator an understanding of what they’ve just done, or how to best use the tools available.
While I’ll repeat the Vista button, I’ll also include details of how to organise your project, keep your styles and templates organised, and other useful tips that you don’t usually get on trivial demonstration projects. It’s always easy to organise your work when there are only 3 files involved! I’ll also explain some of the WPF terminology as we come across it, so if you’re not a complete n00b at WPF, please bear with me. I won’t repeat any of the initial explanations after this first piece.
Here’s A brief outline of where I’m heading with this series.
- Button styling
- Simple animations,and triggers
- Checkbox styling
- Expander styling
- ListView re-styling
- Data Templates and bindings
- Skinning
I’ll approach the button first since its a pretty simple control with few options, and creating the templates for buttons is well supported in blend. This will give a good grounding in how blend operates, some of its shortcuts and features, and some gotcha’s that caught me out when I was figuring this stuff out for the first time.
Although these articles can be used in isolation I do have to assume that the reader does have some background in C# and the .Net framework, but for the first few articles, we’ll barely touch the code behind files, or the XAML source we’ll be creating.
So, lets crack on with the good old vista style glass look button.
I’ll break the template creation down step by step into a follow along guide for creating a generic style & template to give you the standard glass look buttons found in Windows. We’ll dive straight in and create some content, then pause and explain some of what we’ve just done.
First steps.
If you haven’t already, hop over to the Microsoft site and download the latest version of Blend. As of writing, the June Beta 2.5 preview is available here. I also assume that you’ve got the .Net framework 3 or above installed, and a version of VisualStudio. The Express edition will work just fine for most of these tutorials.
Once you’ve installed all that, fire up Blend and we’re ready to begin.
A quick introduction to Blend’s workspace
Before we get into full swing making the button template, we should have a quick tour of the important bit of Blend’s standard workspace.
Read the rest of this entry »
Posted in .Net, Development, Tutorials | No Comments »