FREE WPF Tutorials – Starting with how to restyle the default WPF controls

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.

1. 1. Button styling
   2. Simple animations,and triggers
   3. Checkbox styling
   4. Expander styling
   5. ListView re-styling
   6. Data Templates and bindings
   7. 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.

(Click on the image for a larger view)

Here are a few of the important parts of the blend workspace (I’ve created an empty project in the above screen shot to get an empty workspace.)

1. The File containing the current control you’re working on – this is what’s visible in 7 (the artboard)
   Below the tab is a small path that’s like a breadcrumb trail to show you which part of this control you’re working with. If you’re working on a control’s style the tab would show the file, whilst the breadcrumb trail below would show which part of the style/file you’re editing.
2. The Project Tab.
   This tab shows you the files that make up your blend project. This project has a solution file that is also loadable by Visual studio. Blend behaves very much like visual studio in this respect, and there’s even a context menu item available to “Edit in Visual Studio”.
3. The Properties Tab
   This tab is used to edit all the properties that the currently selected control exposes. You can set things like foreground & background brushes, position, fonts and anything else the control exposes. We’ll be using this quite a bit in the tutorials.
4. The resource tab
   this tab shows the resources you currently have within the project. Each dictionary that is listed in this view shows a little expander button to the left of its title if it contains resources. if you expand the dictionaries content all the resources are shown as a title and a small image representing the type of resource. You can click this little button to edit the resource.

   here’s the glass button resource from the project we’re about to build.

   There is no design view for resource files, so simply double-clicking a resource dictionary in the project tab won’t allow you edit any of the resources graphically. You’ll see the following error on the artboard (7)

   

5. Toolbar.
   The toolbar allows you to select tools to manipulate existing controls, or allow creation of controls on the artboard. It’s worth learning the keyboard shortcuts for these , at the very least, the selection tools and the hand tools are always useful to know off by heart ; A , V and H.
6. Objects and Timeline
   This panel holds a tree view of all the objects on your artboard. The objects are arranged hierarchically according to WPF’s content and composition model. WPF’s content model is where the “presentation” part of the WPF name really shines!
   Shifting from the traditional mind set of Winforms design is a bit of a leap, but once the content model is firmly grasped, the design possibilities will blow your mind!
   One thing worth pointing out at at this early stage is the difference between a selected object and an Active Object. This difference will be really important later when we begin composition of our control.

   A Selected object has a grey highlight bar (like most other standard selections). Here’s a selected button. Selected objects are the object that the rest of blends property windows operate on.

   Whereas an Active object has a yellow highlight around it in both in the object panel, and on the artboard.

   

   The active object is the parent for any object you add to the artboard. If you select a control from the toolbox, and double click to add an instance of that object to your window, it will automatically become the content (or the child) of the active object with its default position and size. This is important to remember when you’re adding multiple items to an items control like a stack panel. Re-parenting objects in the object pane is a simple drag and drop exercise but its easier to have the right parent object selected from the start. Something to watch out for is when you have a control that only support a single child as its content – when this object is the Active object, double clicking a toolbox button to insert a control replaces the objects content, most of the time this isn’t what you want. In cases like this you more often than not want to make the child control you’ve just added the new active control, so the next set of objects you add get the correct parent, instead of replacing the object that’s already there. You can have one object being the active object and a different object as the selected object.

7. The artboard.
   This is the main workspace area that you’ll use to your windows, pages , controls, templates and styles. Again it’s worth learning the important shortcut keys to help manipulate object on the artboard. Hovering over Blends tools will show the Shortcut keys (if any) in the tool tip.
8. Output Window.
   This window shows the output of your build process, and also any run time problems, like binding errors, or missing styles.

That about covers all the things we’ll need to know about Blend in order to create our first button. There are quite a few features in blend that we don’t really need to cover just yet, but once we start getting into animations and triggers I’ll re-cover the workspace again with those extra features explained in fuller detail.

Create the button project

Ok, lets get started!

Create a new project by clicking on the New Project (1) in Blends opening dialog. Change the name to “GlassButtonExample” (2) and click ok (3) to create the project.

On creating a new project, we should be presented with a blank workspace (also known as the design surface or if you’re wearing a black turtle next sweater – “artboard”). On the Artboard there will be a white window that represents our applications’ window.

Creating the button

Next, although a little counter-intuitive, to create a simple button it’s better not to start off by editing the standard WPF button template. We’ll start off by creating a rectangle on our design surface to use as the base of our glass button’s template.

Select the rectangle tool.

Locate the rectangle tool from the toolbox (the vertical strip of icons on the far left of Blend’s workspace) and click to select it. If the Rectangle tool isn’t visible, click and hold to see the popup menu of available tools for this toolbox item (as the tooltip above shows) and select the rectangle tool. Memorise the Hot Key (M)

Next, draw the rectangle to represent our button.

Go to the design surface, and drag out a rectangle 3 squares wide. By default this will give you a rectangle of 120×40. The edges of the rectangle you’re dragging should snap nicely to the lines on the design surface. The size of the button is unimportant at this stage, since our finished button will be completely scalable.

Now we get to the interesting part, making our rectangle behave like a button!

Go to the tools menu and select “Make Button”

Ding! That’s it. Too easy!. Well, almost, we still have to re-style the button, but from this point on our rectangle behaves exactly like a standard button!

Making the rectangle into a button will prompt you to create a Style Resource, which I’ll explain in a moment, but for now lets get the style created – so change the name to GlassButton (1), and then click the “New”(2) button next to the greyed out resource dictionary option on the bottom line.

This will prompt you to create a new Resource Dictionary to hold the style and template we’ll be working on.

Note that creating the style with a Name (the style’s Key) will mean you will have to apply the style manually to buttons you create. if you want all buttons to look like this by default, click the Apply To All button, and the style will be created without a name. For this example, we’ll use the Name field as we’ll need to know how to apply styles to objects later anyway. Creating a style without a name means that every time you drag one of the controls to the design surface, it will automatically be styled with your style.

Change the name in the next dialog to “ButtonStyles.xaml” and click ok.

After clicking Ok, you’re taken back to the Create Style Resource dialog, with the newly created ButtonStyles.xaml dictionary named in the Resource Dictionary text box, and the bottom radio button selected. Click ok to accept these details for creating the style in your new ButtonStyles.xaml resource dictionary.

Time for a break, what have we just done?

If you’re not a complete novice with WPF, you can skip ahead the next few paragraphs.

What’s a Style, and what’s a Template?

When we clicked the ‘Make Button’ menu item, we told Blend to create a style to represent a button. This style also contains a template which is a collection of the visual elements that make up the control. Our template currently contains only the rectangle we’ve just drawn. Even though the template is just a rectangle, our simple button still behaves like a button – we haven’t changed any of the behaviour at all.

Think of styles and templates this way : Styles can change the value of any existing attribute of the control the style is applied to. For example, Styles can change the Font size, the background colour, the contents alignment etc. But they can only re-style existing attributes that the control exposes. If you wanted to add a border to an image for instance, you can’t do that with a style, because you’re adding new bits to the control, that’s where templates come in.

To change the elements that a control is made from (like adding a border), we need to give the control a new template. This visual hierarchy of objects is known as the controls Visual Tree. The visual tree describes what components the control will draw to represent itself on screen. Styles can then come along and change the visual attributes of those components. Templates create the visual structure of the control, Styles change the appearance of those visual elements.

We don’t need to get too hung up on the style/template thing just yet, for now we just need to know that although they’re separate entities, they usually come as package, as one of the attributes a style can change is actually the controls template!

And, in fact, if we look at the xaml that our ‘Make button’ command has just created, that’s what we’ll find. A button style that sets the controls template. Neat huh?

What’s a resource dictionary?

Resource dictionaries allow us to keep our styles and templates organised. There are  no special ‘versions’ of the dictionary files for different resources – dictionaries can hold any type of resource,including non-wpf types!. Keeping a logical grouping of resources together in separate dictionaries allows us to keep track of where our resources live.

When you’re writing non-trivial applications, its important to structure your projects to separate out the resources. You’ll most likely end up with dozens if not hundreds of resources, and keeping them in one place would be difficult to maintain, especially if you have more than one developer or designer working on the project. Keeping separate dictionaries cuts down on source code merges, and therefore removes another possible point to introduce errors!

On large projects these dictionaries are then merged into a single ‘master dictionary’ usually held in the main App.xaml file. This also makes skinning the application verging on trivial.

Now we’ve added a new resource dictionary we can see the resource dictionary file has been added to our project by selecting the Project Tab in the Project window on the top right of Blend’s workspace

Although we don’t really need to know what’s in the xaml file (for now!), we need to remember that this is where the results of our buttons’ template editing & creation will end up. Remember, under the hood, Blend is nothing more than a fancy XAML editor. Everything you do in Blend (and therefore Visual Studio) you can do in C# too.

Since the button styles is just a resource dictionary, if your template doesn’t contain any project specific references (like bitmaps etc) you can share resources between projects, so its worth building up a few dictionaries of standard styles and templates you find yourself using over and over.

Right, back to our button editing.

Editing the template

When we created our button (by selecting the Make Button menu option) Blend went away and placed a new button style & template for the object we had selected (in the objects and timelines pane) which , was our simple rectangle.

First, we’ll need to show the properties panel , which you can do by clicking the middle tab (Properties (1)) on the upper right of Blends Workspace.

Now we’re looking at the properties panel, we can see the type of the object we have selected (2) is now a Button, rather than the rectangle we originally created.

Also on the properties panel is an incremental search box (3) which filters the properties shown in the panels below to items containing the text in the search box. This is really handy for finding a property when you don’t know which sub panel that property is in (notice that there are a lot of properties!). This is especially useful when you’re just starting out and the number of properties available is overwhelming! The X button at the end of the search box clears the text and re-shows all the panels and their properties.

Next, we’ll need to start editing the buttons template. Go back to the objects & timeline panel (I’ll just call this the object panel from now on) and select the button if it isn’t already selected.

Then, right click to bring up the context menu and select

“Edit Control Part (Template) -> Edit Template”

Once you’ve selected edit template, the objects in the objects panel should change to show the elements that the “Make Button” command added to our template.

As you can see the buttons template is made up of a Grid (a Layout control), the [Rectangle] we originally drew on the artboard, and another important element the ContentPresenter which I’ll explain in a moment. Note that the Grid is the Active object by default. If we add any other elements, they will automatically become children of the grid.

Also notice that the artboard now shows a visual representation of this template in isolation :

The light blue bars above and to the left of the rectangle are part of the grid control – they allow you to separate the control into columns and rows and then fix content into those columns and rows. The Grid, like all layout controls isn’t visible at runtime; layout controls are there solely to control the layout of their children.

The tiny icon in the top left of the grid allows you to change the layout mode of the grid between Grid Layout Mode and Canvas Layout mode.

Grid layout mode allows the setting of rows and columns to control layout, whereas canvas mode offers the more standard Winforms type layout where objects stay where you drag/drop them. Canvas mode causes the objects to be aligned to the closest edges and keeps the positions of the object where you drop them by setting the WPF controls Margin property. While this may feel familiar to winforms developers, its strongly recommended that all layouts are created using Grid Layout mode, as it offers much more flexibility than canvas mode for automatic layout & resizing of content.

Before we begin customising the template, we need to look at the role ContentPresenter plays in the templates structure. Did you notice that the template shows the text “Button” in the middle? If we look at the button control before we started editing it’s template , we’d see that its content property is set to the text “Button”

The content presenter’s role is to show  whatever the button has set as its content. Ok, now that may take a little while to sink in as there’s a hidden meaning there. Since the we’re used to buttons only displaying text, which is what the default setup is showing us we might assume that content presenters display text. But hidden behind this simple piece of text content is that Composition model we mentioned earlier. This composition model is one of WPF’s core tenets. The content presenter can show practically ANY WPF content, not just text. To show the text in the button, the content presenter knows that when it’s content is a .NET string, it should create a TextBlock control to represent the text content on screen – that how the text “Button” is displayed. The content presenter doesn’t display text, it displays a Visual Tree of controls, and by default that tree will contain a textblock representing the button’s text, which is “Button”!

This content composition model allows us to create a buttons layout, yet still allow the buttons user, or consumer to supply the main content for the button. Supposing we want all our buttons be green ovals with a yellow background, we can do that, and still let the buttons consumer to supply a playing video as the buttons content. In this context, you can think of the Content Presenter as a place holder for whatever the buttons user want to put inside.

To allow for rich composition for this control, we’d need to set the buttons content to a control that handles layout for its children, like the grid or stack panels. This way,we can get the button to display rich content that has exactly the same layout capabilities as any other content inside a WPF application. eg the buttons content presenter might be set to display a stack panel containing an image and a RichTextBox to display fancy text, the possibilities are almost endless.

Ok, Back to the template.

To give us a reasonable working size lets zoom up the template so we can see what we’re doing.

Near the bottom left of the artboard in the workspace, we have a zoom control and a few other buttons for controlling snapping to grid lines etc

Here we can see I’ve zoomed up the artboard to 500% – this makes the button just about fill my artboard. Next to the zoom level there are three buttons from left to right they are , Hide the Snap Grid , Snapping to Grid Lines and Snapping to Snap Lines. They’re all pretty self explanatory, and I usually leave them all enabled.

Choose a zoom value that you’re comfortable with, “Fit To Screen” is usually a bit too big for me.

Next create making sure that the grid is the active control in the object panel

Remember, the active control is highlighted with a yellow border.

Next, go back to the artboard and create a new row that splits the grid in two even parts. Don’t worry that there’s no snap lines in the centre of the grid, we’re not too bothered about splitting the button exactly in half!

Notice that as soon as you click to create a new row in the grid, the Content Presenter hops up from the centre of the button, to the centre of the top row. This is because the content presenter has a grid row setting of 0, and a RowSpan of 1. Lets fix this now. Go over to the objects panel and select the Content Presenter. (remember selection is just the Grey Selection bar, not the Yellow border – selection is just a single click in the objects panel)

With the ContentPresenter selected, go to the Properties Panel, and locate the Layout panel. Remember you can use the filtering search box to just display items containing the word “Layout”.

The layout panel should look like this

To fix the Content Presenter being in the top row only, we need to change the Object’s RowSpan (1) property to 2, since we want the ContentPresenter to span both rows in our grid. You should immediately see the content presenter (and the text “Button” jump back into a central position, spanning both our grids rows.

Template Binding

Part of the job of creating templates is making the template respect the control users styling – just like the ContentPresenter allows a user to set anything as our buttons content, we can tell the template to respect the Button user’s styles for part of the templates visual styling. In the Layout Panel above , both the horizontal & vertical alignment properties have orange borders. This visual cue tells us that these properties are Bound to the templates parent properties. This means that if the user creates a button using our template and changes the alignment, our template takes that alignment, and applies it to the object we have selected (in this case the content presenter.) Template binding allows the Control designer to respect a users design choices after the template is finished. Our user can still change the alignment of their content, and our template will oblige. You can bind almost any property of the template by clicking the tiny select buttons (2) you will see the drop down menu

If you select the Template Binding option at the bottom of the menu, you’ll see that this property is bound to the VerticalContentAlignment.

We won’t need to fiddle with any template bindings for our simple button, but it’s worth knowing what template bindings are, and what they’re for.

Next, we’ll change the look of the base rectangle that forms the background of our button.

Select the Rectangle object in the objects panel, and then head over to the properties tab on the Blend Workspace.

The first panel Brushes, is where we can modify the appearance of the rectangle, so to start, make sure that the Panel is visible by clearing anything in the properties Search box.

Select the Gradient Brush Tab (1) and then make sure that the Fill (2) brush is selected. Note that the Button on the artboard now has a gradient from black to white.

The rectangle we have selected in the Objects Panel, now has its Fill Brush set to a gradient brush, and the colours stops go from black (3) to white (4). Let’s change the colours to something a little less drab. Start by clicking the little gradient stop control (3) – this selects it , and means that any colour you choose will be assigned to this gradient stop. To show that the stop is selected, its outline will go black.

In the Editor Tab of the brushes panel, select a hue near orange, using the vertical strip of colours (1)

Make sure you have the correct Gradient stop selected (2) and then click about 1/3rd of the way into the editor’s colour panel to select the actual RGB values of this hue as the colour for this gradient stop (3). Choose a shade somewhere near white but not full white. You can click and drag around this colour panel and the colours in both the panel and on the artboard will change as you drag the little circle. You can also just type the Hex values for the colour straight into the editor box in (4). Next Click the little arrow buttons next to the hex value in (4). This will pop up the create resource dialog where we will create the colour as a named Resource. Change the colours name to ButtonColour1.

We’re saving the colours as resources so we can change them without having to do anything to the button. Its important to create your colours and brushes as resources, and use those resources as the colours and brushes of your controls. This allows for consistency amongst all your controls and for easier skinning with a new colour theme. If all your controls share the same colour and brushes resources, its easy to re-skin them all by simply setting the colours or brushes used to some other colour value. When you click the ok button you’ll notice that the colours editor panel switches to show you your new colour resource.

Since we’re not really bothered about the colour resources we have yet, switch back to the editor panel ready for editing the second gradient stop.

Click on the second stop and choose the full intensity orange hue. You can do this by dragging the little colour circle towards the top right corner which moves the colours shade towards full saturation of the chosen hue. Click the little double arrow button next to the hex colour values to create another resource, and call this one “ButtonColour2”

If you’ve managed to follow along this far, you should have a colour panel that looks like this

and the button on the artboard should look like this :

Next we need to add another gradient stop to give the very bottom of the button a little bit of a highlight. First we need to move the rightmost gradient to make space for the highlight.

Click and drag the rightmost orange gradient stop a little to the left (1).

Then click at the end of the gradient bar to insert another stop (2) and then drag the new stop to the end of the gradient bar. Click in the colour editor and select a colour close to white. To remove a gradient stop click and drag it off the gradient bar until it disappears, then let go of the left mouse button. Click the colour resource button (double arrow) and call this resource ButtonColour3.

Our button should now be starting to resemble something a bit fancier than an orange rectangle!

Next, we’ll give the basic rectangle some nice rounded corners.

There are two ways to round the corners of the rectangle, first you can grab hold of the corner handles for the rectangle on the artboard, and drag the corner to the desired radius.

Dragging either of the handles will change both the X and Y radius of the corner at the the same time. To break that link, hold the shift key while you drag, and only the radius of the handle you’re dragging will change.

Or you can type the radius in by hand in the appearance properties panel on the right.

I’ll set my radius to 8 to give a nice soft edge without making the button look like an over inflated doughnut!

Here’s what the button should look like at this stage with its nicely rounded corners.

Next we’ll select a border brush in a contrasting orange so we can see the outline of the button.

Go back to the Brushes pane and select the Stroke Brush property.

Next using the colour editor panel select a dark shade of our orange hue for the Stroke Brush. I’ll choose #FFB16100 – enter this straight into the Hex colour code box, and save as another resource called “ButtonBorder” using the double arrow button next to the colour code box.

On adding the border resource, the colour resources should look something like the following.

As our final graphical touch to the template, we’ll add the glassy highlight with another semi-transparent rectangle just to finish off the glass look.

Select the rectangle tool and starting in the buttons top left corner, fill the first row of the grid with another rounded rectangle. Ignore the colour scheme and the borders, we’ll sort that out in a moment. For now, concentrate on getting the rectangle to cover the first row and touch the edges.

Obviously we don’t want the orange gradients and the stroke colour. So starting with the stroke, select the little white dot next to the Stroke Brush , and click reset

By removing the stroke, we’re also removing unnecessary attributes that clutter up the XAML behind the scenes. Resetting items is different from setting them to the default values – especially where numeric values like margin and padding are concerned. Although the default is 0, leaving the margins unset, and setting them to 0 are two different things, and the XAML file will contain unnecessary code to set the values, when leaving the values off means they’ll start off with their default settings anyway. You can tell if you’ve set a value on any property because the little dot that pops up the context menu next to the property will be white if you’ve set an alternate value, even if that value is the same as the default.

With the stroke reset to the default, select the Fill brush, and delete one of the gradient stops by dragging it off the gradient bar. Next drag the remaining two stops to opposite ends of the gradient bar, and set them both to white.

Your Brush editing panel should now look something like the following

and the button should look like the following.

Next, we need to create a gradient, but not a colour gradient. Instead we’re going to set one of the gradient stops to have a much lower Alpha value, allowing the underlying content to show through. Since we’re not using any specific colour, and the shine won’t change, we don’t need to create a resource for these colours, or the shine itself.

Select the rightmost gradient stop and click on the Alpha box in the colour Brush editor, setting the alpha value to 35%

Although you can click into these edit boxes to type values, blend provides a handy alternative. If you click and hold when you mouse if over any of these edit boxes, vertical mouse movements allow you to increase or decrease the values proportionally, allowing you to instantly visualise the results of your changes.

Next, we need to line up the semi transparent rectangle to the inside of the border. since our border stroke thickness of the base rectangle was set to 2, set the highlight rectangle’s top,left and right margins to 2.

You’ll notice that the corners no longer fit snugly into existing border. To solve this change the RadiusX and RadiusY values to 7, instead of the 8 that they were originally set to. The button should now look as though it has a transparent shine covering the top half , giving it a rounded effect.

Note that the content presenter is under the top glassy look rectangle. If you want your content to be covered by the shine, you can leave the semi- transparent rectangle as the last item in the object panel – the objects are rendered in the order they appear, so the shine will always be overlaid on top of your buttons content.

Alternatively, to make sure the shine doesn’t obscure your content, you can drag the content presenter to the bottom of the object tree. Notice that when you’re dragging the objects in the object panel you can see blank lines appearing in between each of the objects as you drag over them. This is the insertion point to make the object appear below or above the object you’re over. If you hover over the middle an object (and the object can take child objects) , when you drop the object it will be re-parented, which isn’t what you want in this case. When an object is re-parented, its indent level will change, and hiding the objects parent will also hide your wrongly placed object.

Finally, we need to try out our button.

To get back to editing the main window (where we originally dropped our white rectangle) click the “scope up” button in the objects panel

Clicking this is known as “Scoping Up”, a term used to go back to editing the parent of the template. This is quite important when editing a template which contains templated controls itself. It’s sometimes the case that you’ll need to scope up two or three times to get back to your original control.

In our case scoping up will take us back to our main window and if you hover over the scope button, it will tell you the next scope you’ll be taken to.

On returning the main window, you should see your new orange button in the middle of the window on the artboard.

Depending on where you originally dragged the initial rectangle will determine which edges the button will be anchored to. In my case only the bottom of the button wasn’t anchored. We’ll need to anchor all four sides of the button to the windows borders to test that it resizes correctly.

To anchor your button simply click the adorner on the sides of the window where your button isn’t anchored.

An un-anchored side is denoted by a broken link at the end of a dotted line. Clicking on the link changes it to a full link, and the connecting line goes solid.

If you have more than one side of your button that isn’t anchored, anchor them now.

Time for the big finish – run the application to test your new button. Press F5.

If all’s well, you should see your demo window pop up with an orange button in the middle!

Now try stretching the window, and if you’ve correctly anchored your button to the window border, you should see it size, with the content stretching nicely to fit. The shine effect doesn’t look so good at stupid sizes, but for normal buttons it should look just fine.

Congratulations, you’re on your way to blending with the best!

Enjoy,

Rob