WPF: Creating a Scalable Glass Button in Blend

CodeProject

It’s amazing how a simple effect can transform an application. I have tried to find ways to create a simple glass effect as quickly as possible and with as few brushes and layers as possible to aid in render performance, particularly for Windows mobile 7. My previous attempts looked more like a pipe than glass and involved too many brushes. I have managed to get mine down to two brushes. I think I could get it down further and just use colour substitution but that’s for another post! So here is how I am currently doing it…

Step 1 – Create the First Rectangle

Start with a blank user control and ensure you have a layout root grid. This will be very important for the scaling later on.

Create a new rectangle in your required dimensions, in my case its 150 x 50 pixels. Set the fill to a gradient fill maintaining the default gradient. Set the first colour to Black and the second colour to a dark grey, I have used #FF454444 as the dark grey. Set the corner radius to 3 for both x and y.

Step 2 – Create the Glass Effect Rectangle

The next step is to create the inner rectangle which will give us the glass effect. To do this, simply copy the previous rectangle and paste. For now, we just want to shrink it so we can get the look right and feel right. Shrink the inner rectangle so that it’s just under half the height of the first rectangle and so that there is a nice gap on either side. Change the gradient colours to white and set the Alpha of the first colour to 10 and the second to 75.

Step 3 – Make the Button

Now it’s time to make a Button out of the rectangles we have. First we need to group everything into a Grid. So right click and select “Group Into” and select “Grid” or Ctrl + G.

Now select “Tools” -> “Make into control” and select the button control. Give the template a name.

You should now see the button text appear in the centre of the control. This will also put you in template edit mode. You will need to either double click on the canvas or click the ‘Button’ element at the top of the designer. This is so that you can set the font size and colour of the button to the desired settings. I have set them to 23 and White.

Step 4 – Make the Button Scalable

You should now have something that looks like a button, however if you try to scale it the elements won’t stay in proportion to the height and width of the actual button.

The easiest way to get around this is to place the elements into a layout element that scales its content. I find the Grid makes the most sense so enter template edit mode by right clicking the control and selecting “Edit Template” -> “Edit Current”.

Select the Grid you grouped the elements into earlier from the “Objects and Timeline” toolbar and add to it three columns and three rows. You can do this from the layout tool bar.

Set the column with to 0.025,1 and 0.025 star respectively and the row heights to 0.15, 0.75 and 1 star respectively. This is very important as it is what will retain the relevant proportions of the elements.

Place the background rectangle and the content presenter in row and column 0 with row span and column span set to 3. Place the glassy rectangle in row 1 column 1 and now set the glassy margins to 0 and its height and width to Auto with horizontal and vertical alignment set to stretch.

Make sure that the Content element is a layer behind the glassy rectangle by moving it in the Objects and Timeline toolbar. This is so that the whole button will appear to be glass including the text. You can test this is the case by changing the foreground of the button to a shade that will make this clear to see.

That’s it. You should now have a very simple scalable glass button.