Building Better Buttons in Expression Blend and Silverlight

A beginner's guide to building robust, scalable, and easily editable buttons. As well as covering Template Binding to the Style, Layout, Animation, Opacity Masks, Scalability, and Reuse.

Introduction

Do all buttons have to look so traditional? Not in Silverlight!

We can now make them beautiful thanks to the power of Silverlight and Blend, shown wonderfully by Timmy Kokke in his Glass Orb Button article. But we can do more than just colourful, so I'd like to share some ideas for how we can go a bit further. As well as discussing how to build your buttons with consideration to: Layout, Styles, Animation, Scalability, and Reuse.

So if you are a developer looking to improve your artistic skills, a designer who is new to the Expression Blend environment or just struggling with the concepts of Expression Blend, then this may be for you, or for someone on your team!

Background

There are many articles online about making buttons, be it in Photoshop, Illustrator, CorelDraw, etc., and these can be found by simply searching for "glass button" in Google Images. And these can provide inspiration, but most importantly: almost all the principles can be applied to Silverlight using Expression Blend and Expression Design. So rather than focusing on re-creating a specific button parrot fashion, my aim will be trying to help you get the best out of Expression Blend for your own individual creations. Expression Blend and Silverlight are not just a vector artwork package, with bits bolted on. It is so much more, and requires a slightly different way of working. As well as extra considerations when designing artwork for applications. So I will try to guide you in making robust buttons (UserControls), with principles that can be applied anywhere in the Blend environments, discussing things like "Scalability", will your button look good and function correctly at all resolutions, etc. Some of the techniques and operations you may want to apply will not scale, like Margins and Strokes, as well as Effects like Blur and Drop Shadow. Hopefully I can steer you on a path to avoid some painful errors, building clean flexible controls that work well and as expected.

Overview

In this tutorial, I will be covering everything to recreate the first button shown in the introduction image above. I will be approaching this tutorial from the perspective of a Designer who understands vector artwork, but with no knowledge of Silverlight or Expression Blend. I will attempt to document every step at the start, hopefully speeding up as we go along to prevent it becoming tedious. Meaning, if you are new to Silverlight and Expression Blend, I would recommend you do not skip sections. This tutorial will also act as pre-requisite to any further tutorials I do.

I have sub-divided the tutorial into sections for easier reference:

Basic Button, Layout, and Components

Modifying the Button

Scalability Issues

Cosmetic Surgery

Interaction and Animation

Multiple Colours and Final Touches

Focused, Disabled, and Content

Section 1 - Basic Button, Layout, and Components

Open a new Silverlight project in Expression Blend and call it something like "TestButton". Select the Button icon in the left hand tool bar.

Now place a button on the screen, by either dragging the desired button size and location on the Artboard (centre layout panel), or by double clicking on the Button icon. Try each method and see the different results. Now let's consider what size the button should be and what is controlling the size of your button. And how this differs from a vector artwork package.

The Artboard provides some manipulation and control over the size of your button and its relationship to its parent. But I would like you to focus on the Layout section of the Properties tab on the right to control your button.

Take a look at the white dots that appear on the right of each setting, this is an indicator that the setting is not "Default". Now these dots are also buttons, so click on each white dot in the Layout section of the Properties tab and select "Reset".

Notice how your button changes to eventually fill the LayoutRoot. (Its parent object is in the Objects and Timeline tab.) In Blend, it is always desirable to have your Objects (Controls) to dynamically resize and stretch to fit its parent Object.

Rather than defining absolute values, like fixed Width and Height, it's better to allow the parent object to control the size of your Object. Select LayoutRoot in the Objects and Timeline and change its size in the Layout section of the Properties tab. See how this controls and defines the size of your button.

Set the LayoutRoot back to its defaults, by using the small white buttons and selecting "Reset". Now we wouldn't want the button to completely fill our screen, and we can control the button's size within the parent object (LayoutRoot) using Margins. So with the button selected in Objects and Timelines, enter some values for the Margins, or drag the edges of the button in the Artboard.

(Values can be negative, as well as positive.)

I won't discuss Horizontal and Vertical Alignment at present, other than saying they should both be set to Stretch, which is the default setting, so use the Reset feature. It's important to understand that fixed Width and Height is generally bad, unless it is the "Root Object".

In Objects and Timeline, click on "[UserControl]" and notice it has a fixed size of 640x480 (not auto sized). This is the "Root Object", the parent to all the child elements/objects that make up this Object (or UserControl).

Everything (all children) should take instructions on how to layout from the parent, only it should have a fixed size.

So to summarise, I hope you understand that there are two basic ways we control the size of an object:

Fixed Width and Height</strong />: Button will not scale when the parent object resizes.

Now select your button in Objects and Timeline, and Reset all the Layout properties of your button back to their defaults. Set the Width and Height to 100x100 pixels (fixed size). I know I said it is bad to use fixed Width and Height, but for our purposes here, the button will be our "Root Object". (It will control the size of all the child items we are going to play with.)

Now right click on your button and choose Edit Template > Edit a Copy. You should be presented with a window named "Create Style Resource". Give this Style Resource (a button Style) a name like "ButtonRound1" and select OK.

(Don't worry about what you call it, as it can be changed in the Resources tab later, and all the references to it will automatically be updated.)

Hopefully you will have spotted that in getting in to the button Template, we had to create a button Style. So what is the difference? Basically, a Style should hold the general properties of the UserControl (button), things like Colour and Text should be controlled in the Style. The Template is the bits and pieces that make up the control (Button), and inherits properties like Colour and Text from the Style using Template Binding.

It would not be desirable to have to change the colour of all the Template components, which could be numerous, when it can be done in a single click in the Style!

Styles can be complied in to Resource Dictionaries, which your developer may request, and this can be done at anytime, using drag and drop in the Resources tab.

But let us move on with our button and have a look at exactly what is the "Button Template". In the Objects and Timeline tab, we can see a breakdown of all the components/bits that make up a button.

I've expanded that grid to expose the child objects, and for clarity, I will refer to the parts that make up the template as elements. Before we delete most parts/elements of the template, let's have a quick look at what we have and how it works. It is composed mostly of Grids and Rectangles which have Colour properties applied to them. As well as a Content Presenter, which is a place holder to display Content specified in the root of the object, or defined at runtime by the developer.

There are also two Border item/elements which have similar properties to a Rectangle, but basically has more control over its edge and corner properties. In the Template, select the Grid directly above the BackgroundAnimation element. Now look at the Properties tab on the right hand side and you will see that the background colour has a small orange dot next to it on the right side.

There is also an orange rectangle around the colour picker. These indicators signify that the background colour is Template Bound to the Style and should not be changed here. Instead, we should edit the Style if we want to change this colour.

To edit the Style, click on the Style icon (looks like a pie chart, cheese, or Packman) in the top left corner of the Artboard.

All the components/elements in the Objects and Timeline tab will disappear, and will be replaced with "<>Style" to signify that we are in the Style.

Now in the Style, go to the Properties tab and change the background colour to bright red. Go back into the Button Template, by clicking on the Grid node to the right of the Style icon.

Now the element named Grid in the Objects and Timeline tab should be automatically selected.

Look again at the Background colour in the Properties tab to see if it has changed. (Hopefully it will be bright red.) If you hunt about, you will see that the BorderBrush of the Style, is Template Bound to the BorderBrush of the element named Background. As is the BorderThickness, allowing us even more manipulation of how the UserControl (Button) will look, just by modifying the Style.

But we cannot control everything from the Style and to pull out every Resource would be excessive and unwieldy. For example, we cannot easily control or reference the MouseOver colour States in the Style and I will explain why later.

Select the BackgroundGradient element in Objects and Timeline and have a look at the Background Fill colour.

Note that it is a white gradient, with changes in its Alpha (opacity/transparency) at four Gradient Stops along the Ribbon.

This allows the solid block colour of the element underneath it BackgroundAnimation to show through in the form of a coloured gradient. And the principle of applying overlays to a solid block colour can be very powerful, as well as easy to edit or reference by the Style or a Colour Resource.

Now let's look at how the button changes its appearance for different States, like RollOver, Pressed, and Disabled. Ensure you are on the States tab (top left corner) and select the MouseOver state. Now expand all the elements in the Objects and Timelines tab. Click the "Show Timeline" icon to the right of "MouseOver" in the Objects and Timeline tab.

Note that there is now a red border around the Artboard and that some blue Keyframes have become visible in the Objects and Timelines tab. (Keyframes are points that define a change or a fixed value at a certain point in time. By default, these will occur instantly at time zero.) Select the BackgroundAnimation element and look at the Opacity value in the Property tab, see that it is set to 100%. Now change the States Manager back to "Base" and see that the Opacity is now set to 0%.

The BackgroundGradient element also changes, as the Alpha (Opacity) of three of the four Gradient Stops is reduced. This allows the background colour to show through more in the lower half, but not in the top half. Investigate and play with the different states, but remember to use the Base state to create and modify your elements, as this defines the default properties or starting point for all other States before you modify them. (You can work in the "Base" state and simulate another by clicking on the eye icon to the left of that state.)

Hopefully you have realised that DisabledVisualElement and FocusVisualElement are just overlays and borders (Stroke), respectively.

One last thing before we start modifying our default button. Earlier when I spoke about what defines the size of a button, I ignored, for simplicity, something else that can define the size of a button. What would happen if I told the button to only be as large as it needs to be? To do this, you will firstly need to come out of the Button Template. Either by clicking the "(Button)" node in the top of the Artboard:

Or the "Return Scope" icon in Objects and Timeline.

Now change the Layout properties in the Properties tab as shown:

Ensuring all properties are Reset, except for the Horizontal and Vertical Alignment, which are both set to Centre. The button will shrink to a size, just large enough to accommodate the contents (plus a little bit, which is called Padding). Increase the Font Size to say 48pt, and see how this affects your button. Go into the Style for the button, and in the extended attributes of Layout in the Properties tab, you will find an option for Padding.

Alternatively, just type "padding" into the search at the top of the Properties tab.

Now change the values to 40 and see how this affects the size of the button.

If you want to see how the Padding is set, look in the Properties tab of the ContentPresenter inside the Button Template. (Remember to clear the search to unhide the properties that do not fit the search in the Properties tab.)

The Margin property is Template Bound to the to the Padding property of the Style.

So when I define a Padding change in the Style or outside of the Button Template, it is actually the Margin of the ContentPresenter inside the Button Template that we are controlling. At the risk of labouring the point, I'm trying to show the function of Styles. As well as hopefully demonstrating that the initial designer may not have final control over the size of the button. It can depend on the Size and Layout of your page, as well as the Content defined within it.

So I recommend you consider ensuring your work functions correctly at all sizes!

Section 2 - Modifying the Button

So we have looked at the different elements that make up a default button, and we could manipulate the elements we have. Instead, let us Delete everything else, except the ContentPresenter. Don't worry about the warning message that the animations will be lost.

(This is because we are removing elements that have animations applied to them.)

We are now left with the basic shell of a button, with a Template consisting of an element of type Grid and a child element of type ContentPresenter. Why do we have a Grid as the Root element? Because Grid it is the best Layout Container for formatting (controlling) the layout of child elements. Not only can Grid contain multiple children, it can be subdivided to constrain the proportions and layout of the child elements. We will be using Grid to group elements that apply to a specific part of a button, like "Rim", or "Face" for example.

So let's get started and create a round button with a Rim. Select Grid in the Objects and Timelines tab. Then click and hold the Rectangle tool in the toolbar on the left to reveal the Ellipse tool.

With the Ellipse icon on the toolbar, double click it, and an Ellipse will appear as a child element of the Grid element.

If you have been following from the beginning, your Artboard should look like this. The Ellipse does not fill the whole area of the button, instead it is inserted at a size of 100x100 pixels in the top left corner. This is because, even though the button would like to be 100x100 pixels, the ContentPresenter is controlling the size of the button due to the Layout, Font Size, and Padding changes we previously set for the button. Come out of the Button Template by using the Up Scope icon in Objects and Timelines, and Reset the Font Size from 48 to 8.25. Notice how the button shrinks, and what was a circle is now a squashed ellipse.

Next give the button a fixed Width and Height of 100x100 pixels.

The text now does not display properly, due to the excessive Padding we set in the Style. But the ellipse now spans the width of our button, which is what we want. So go to the Style, using the Style icon.

Now in the extended properties of the Layout section, Reset the Padding back to the Default value of 3. Now the text displays properly, but the ellipse is still not a circle. So select the Ellipse using the icon to the right of the Style icon, to enter the Button Template.

(It may say "ContentPresenter", and will depend on what was the last selected element in Objects and Timeline of the Button Template.)

Ensuring you have the Ellipse selected, look at the Layout properties in the Properties tab for the Ellipse. Notice that we have settings applied that we did not set.

This was Expression Blend trying to insert an Ellipse to fill the Button Template, which it thought was 100x100 pixels. But the ContentPresenter was controlling the size of the Button Template, making it larger, so the Layout just did the best it could.

That may be a little confusing, but when working at design time, set a Fixed Size for the parent object (button) and set the children to automatically fill it. Reset all the defaults of the Ellipse in the Layout section of the Properties tab. (Or delete the Ellipse and double click the Ellipse icon on the left tool bar to insert a fresh Ellipse.)

Hopefully you have an Ellipse element and a ContentPresenter element.

In the Artboard, the button text is no longer visible as it is obscured and behind the Ellipse. Click on the "Eye" icon next to each element to show or hide what is behind it. (In Photoshop, layers build from the bottom up; in Expression Blend, they build from the top down.)

So select the ContentPresenter element and drag it below the Ellipse and therefore in front of the Ellipse, as we are always going to want the ContentPresenter in the front. But every time we add a new element, it is positioned at the bottom of the list and therefore in front of the ContentPresenter. To avoid this annoyance, we will build the framework of our button in its own dedicated Grid.

Right click on the Ellipse and select Group Into > Grid.

Now rename the newly created Grid and call it "Rim".

Now select the Ellipse and duplicate the Ellipse by using the keys "Ctrl +C", "Ctrl +V" (Copy & Paste). You should now have two Ellipses within the Grid called Rim and no problem with the ContentPresenter being covered.

Now is a good a time as any to start naming our components/elements.

So select the top Ellipse in the list and call it BGround, then select the bottom Ellipse in the list and call it RadialGradient.

With the Ellipse element named BGround selected, and using the Advanced Properties button, change the Fill property to Template Binding > Background.

This will set the Fill of our Ellipse and therefore the overall colour of our UserControl editable from the Style of our UserControl. (We can't see any results or colour change yet, because we have another Ellipse named RadialGradient on top).

Click on the "Eye" icon of the RadialGradient element to show the Fill (Background) colour of the Style.

If you have not changed the Background colour of the Style, your button should look like this:

Very boring, so let us set the RadialGradient element as an overlay, to control the Opacity and Tone of the Background colour below.

Select the RadialGradient element and in the Properties tab, change its Fill to "Gradient Brush".

Next, change the gradient from Linear to Radial.

Now set both Gradient Stops on the Ribbon to White, and position like mine at locations: 85, 90, 95, and 100 on the Ribbon.

(Click anywhere in the Ribbon to add another Gradient Stop and drag off the Ribbon to remove to a minimum of 2).

Next, set the Gradient Stop at Ribbon location 85 to have an Alpha (Transparency) of 0%. Repeat the above step for the Gradient Stop located at 100 on the Ribbon. This should give you a button looking like this:

Not very pretty yet, but you can see see the Rim forming. Zoom in on your button and see that we have an annoying black line on the outside edge. This is getting in the way of our gradient, which is the "Stroke" of both Ellipses. So let's get rid of it. Select Stroke for each Ellipse and set to "No Brush".

The Rim is starting to look better, but the contrast is rather strong. We can adjust this by either adjusting the Alpha of the Gradient Stops at 90 and 95 on the Ribbon to say 60%:

Or by adjusting the Opacity of the whole element.

My preference at the moment is to make the adjustment in the Gradient Stops, as it allows simpler control for adjusting the whole element between 0% and 100%. (Or does it? We will discuss that later...)

Moving on, we want our Rim to sit around the outside of our button Face. I want the page colour to show through on the inside edge of the Rim. So I will change my page colour to a horrid red for demonstration purposes. Use the Return Scope icon to come out of the Button Template. And change the Fill colour of the LayoutRoot element to Red.

Now to make the centre of the Rim transparent, we can use an Opacity Mask. And we could set an Opacity Mask on both Ellipses. (But I'd like to save them for some further effects I might wish to apply).

Instead, I'm going to apply it to the parent object of the Ellipses: the Grid element named Rim, as it also supports an Opacity Mask. So select the button in Objects and Timeline and go back in the Button Template. Select the Grid element namedRim; in the Properties tab, select Opacity Mask. Give it a Radial Gradient, with Gradient Stops at 0, 84, and 85 on the Ribbon.

Set the Alpha to 0% for the 0 and 84 Gradient Stops, and 100% for the 85 Gradient Stop. (The Gradient Stop at 0 is not actually needed, but left in for clarity.) The inner 85% of all the elements that make up your button Rim are now invisible.

Test it by changing the Fill colour of the "LayoutRoot" Grid. (Remember that you are in the Button Template and need to press Return Scope to manipulate the "LayoutRoot" Grid colour).

Now back in the Button Template, we will start creating our button Face to sit inside the Rim. Ensure you have the Grid element named Rim selected. Double click on the Ellipse icon in the left tool bar, which inserts a new Ellipse inside of the Grid named Rim. This is not going to work for us, as the inner 85% of the Ellipse is missing. This is because, it is being controlled by the parent object, the Grid element named Rim, which has an Opacity Mask applied to it, and as such affects all of its child elements. So we need to move it out of the parental control of the Grid element named Rim.

Select the Ellipse in Objects and Timeline and drag it on to the element named "[Grid]". (Notice how the Ellipse now sits in front of the ContentPresenter).

Select the ContentPresenter and drag it to the bottom of the list.

Now select the Ellipse, right click and choose Group Into > Grid. Rename the newly created Grid and call it Face. Select the child Ellipse element and rename it "BGround1".

(Notice that two elements/components cannot share the same "X" name!).

Now to make the Face the same colour as Rim: Template Bind the Fill colour of the BGround1 element to the Background colour of the Style.

We cannot see the Rim in the Artboard, because it is obscured by the newly created Face.

We need to reveal the Rim area as well as a clearance gap between the Rim and the Face. From what I have shown you so far, we could apply an Opacity Mask to the Face. That is inverse/opposite of the Opacity Mask on the Rim. But this would mean is only the central 85% of the child elements of the Face would be visible. (Awkward, and no good if we ever want to use the Stroke of a child element).

Margin could be another method of controlling the size of the Face. Select the Grid element named Face, and set the Margin to 10 on all sides.

Hopefully the spacing looks great, with regards to the button Face and Rim, just like the example below:

Now this is fine for a 100x100 pixel button like ours. But I wonder what would happen if I changed the button size to 32x32 pixels. (Which is probably the lowest resolution worth displaying a stylised button in).

But rather than change the size of this button, I'm going to create copies of this Button Style. These copies will update dynamically, because they share the same Style and Template. So come out of the Button Template and Style using the Return Scope icon. Place two more buttons on the page, directly below the first. Set the sizes to 64x64 and 32x32 pixels, respectively.

We now need to tell the new buttons to use our Style, that we named ButtonRound1.

Another way would be to go to the Resources tab, and inside [UserControl], select "ButtonRound1".

Drag this Style Resource onto your button, release the mouse, and select Style from the small popup window.

Things are not looking good for the two 2 smaller buttons, but fine on the largest. What is going wrong?

The Face of the button is not spacing correctly within the Rim, because of the Margins we set on the Face. Go back in to the Button Template and select the Grid named Face. Change the Margins to 4 and review the results.

See how the Face now fits correctly in the smallest button, but not in the biggest one. Setting a Margin is definitive, and sets a fixed distance in pixels from its reference object (parent).

So Margins do not really work, as the Rim and Face do not reference each other, they both reference their parent.

Section 3 - Scalability Issues

Earlier I said there are two ways to size your objects within Expression Blend, but there are a few more! All are used in conjunction with Auto Size, with Horizontal and Vertical Alignments set to Stretch (the defaults). (So the child elements will Stretch to respond to the instructions of the parent object.)

So to properly reference the Face and the Rim from each other, we will use a Scale Transform. Select the Grid named Face and Reset the Margins to 0.

Just below the Margins in the Properties tab is a section called Transform; open this section if currently collapsed and select the Scale tab.

Now set the Scale for the X and Y axes to 0.8. The Face is now sitting nicely within the Rim at all three sizes.

You have probably noticed that we still have the black border on the Face, called the Stroke. It almost seems to get heavier and thicker as the button gets smaller. It doesn't, as it is exactly 1 pixel thick on all three buttons. But 1 pixel is a larger proportion of the button surface in the smallest button than it is in the biggest.

Select the Ellipse named BGround1 in Objects and Timeline. Change the Stroke Thickness in the Appearance section of the Properties tab.

Give it a value of 4 and review your results.

The Stroke does not scale and as such should be avoided most of the time, so let's get rid of it. We could set the Stroke Thickness to 0, but it's better to tell the Ellipse to have No Stroke.

So firstly, Reset the Stroke Thickness to 1, as this keeps things tidy and the XAML cleaner. And with the Stroke selected in the Brushes section of the Properties tab, select No Brush.

Let's get the ContentPresenter out of our way as well, as it is just a distraction for the moment. To hide it at design time, go to Objects and Timeline and click the "Eye" icon next to the element. It will be visible at run time, which is OK, and not really what I want, so instead I will hide it at run time.

To do this, select the ContentPresenter and in the Properties tab, change its Visibility to Collapsed.

Now let's start adding some depth to our button Face by adding another Ellipse that sits over the top of BGround1. Select the Grid named Face and double click the Ellipse icon in the left tool bar.

This will insert another Ellipse with nice clean "Default" settings inside of the Grid element named Face. Select the Ellipse and rename it "FaceRadialGradient". And for clarity, while we are at it, let's rename the Ellipse named "BGround1" to "FaceBGround".

(Stay on top of naming your elements to prevent confusion and to help others reference them later).

Now with the element FaceRadialGradient selected, remove the Stroke and set the Fill to Gradient (Radial).

If your Gradient Stops are set as default, the Face will look like mine below:

Now flip the Gradient Stops using the "Reverse Gradient Stops" icon to the right of the Radial Gradient icon.

Your button Face should now looks like this:

Now select the left Gradient Stop, set the Alpha to 30%, and move to 75 on the Ribbon.

Now select the right Gradient Stop and set the Alpha to 50%.

Hopefully your button is starting to look better.

Now why did I bother to reverse the Gradient Stops earlier? (So Black was on the Right and White was on the Left.) Because the Tone as well as theTransparency (Alpha) has an effect on the Gradient of the Fill(colour can be used in the Tone, but this will reduce flexibility when changing colour schemes).

With the right Gradient Stop at 100 on the Ribbon selected, change the colour from Black to White. Review the results:

With the Gradient Stop set to black, the edge of the Face is looking fairly dark. And we could adjust the Tone of the right Gradient Stop to a dark grey. But I also want to change the way the light hits our button. So we will access some seemingly hidden controls for the Gradient Brush. In the left hand tool bar, select the Gradient Tool. (Hopefully you will now have an Arrow tool over the top of the button face).

If you can't see the Gradient Tool, look in the Projection section of the Properties tab.

Make sure it is set to "Default" for your element & all its parent elements.

(Blend is unable to show the Gradient Tool when a Projection is set on an element, or on any of its parent elements).

There are a number of things we can do with the Gradient Tool, like adjusting the Gradient Stops.

But we are more interested in other options, like offsetting the centre & adjusting the size.

So click & drag on the stem of the Arrow (Not near the Gradient Stops), & move upwards towards the left a little.

Now click on the head of the Arrow to enlarge the scope of the gradient.

So that it just covers the lower right edge of the Face.

.

The Face now looks like it has the light source in the top left corner. at about 315% (360%-45%).

(Or 180% opposite to that, if you view that button as concave, rather than convex).

Things are starting to look nicer, but I'm still not happy about the spacing between the Rim & the Face.

It is OK in the largest button, but lost, & almost non existent in the smallest.

It is proportionally correct, but not really what we want.

Ideally we want the Rim spacing not to Scale when we resize.

Or to be limited in some way, which we can do using Margins.

So select the Face element in the Objects & Timelines, and set a Margin of 1 on all sides.

The button Face has reduced in size by 1 pixel on all sides, for all 3 of the buttons.

Which has helped, & has had very little affect on the largest button.

As 1 pixel is only 1% on a button 100x100 pixels.

But 1 pixel is about 3% on the 32x32 pixel button.

So we have combined 2 methods of controlling the size & relationship of the Face & the Rim to their parent.

A Scale Transform & a Margin.

(One proportional to the scale of the object, & another that is finite).

Now that the spacing is better, the Rim needs to be a bit fatter.

So with the Face element still selected, change the Scale Transform to 0.75 for both the X & Y axis.

Now select the Rim element, & edit the Opacity Mask in the Properties tab.

Change the Gradient Stops we set earlier, from 0, 84, 85, to new locations on the Ribbon at 0, 79, 80.

The Rim should now have more of the inner visible.

We now need to update the gradient overlay for the Rim, to span across the larger band we revealed.

So select the Ellipse named "RadialGradient" & while we are here, rename it "RimRadialGradient".

Then do the same for the Ellipse named "BGround", renaming it "RimBGround".

(This is neater, & will be easier to reference later).

Select the RimRadialGradient element again.

And change the Gradient Stops of the Fill, in the Properties tab to: 80, 87.5, 92.5 & 100.

We now have a better proportioned button, with a fatter Rim.

If you are wondering if we still need the Margins to control the spacing of the Rim to the Face.

Try resetting the Margins of the Face element to 0.

If anything, a value of 2 could be better, so set the Margins to that.

We will also get rid of the horrid red background

It makes sense when designing, to ensure your UserControl (Button) looks good on dark background, as well as a light background.

So come out of the Button Template, using the Return Scope icon.

Select all 3 buttons, and use Copy & Paste to duplicate 3 more, and moved them to the right.

Then place a Rectangle with a black fill, higher up the tree in the Objects and Timelines, & therefore behind the buttons.

(You are now fully in control, of how my button will look, in almost any situation)!

Share

About the Author

I've been playing with computers since my first Acorn Electron, & after blowing up a few ZX Spectrums. I moved on to the C64 & Amiga, & eventually reluctantly on to the PC.

I have learnt a wide set of skills during my 38 years of existence, living in the UK, on the sunny south coast.

My main area of expertise is Graphic/Visual Design, Usability & UI Design. I am not a programmer, but am fairly technically minded due to studying Mechanical Engineering at Uni.

I have work both Freelance & for IBM as a Graphic Designer, & am skilled in the usual graphics packages like, PhotoShop, CorelDraw or Illustrator, Premier, Dreamweaver, Flash etc.But I originally started with Lightwave & 3D animation.