The finished Button

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.

Expression blend project start

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.

Create the first rectangle

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.

Create the glass rectangle

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.

Group the elements into a Grid

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

Make the elements into a control

Make the elements into a button control

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.

Exit template mode

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.

Button layout complete

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”.

Enter template edit mode

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.

Select the grid

Add rows and columns from the layout toolbar

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.

Add rows and columns to the grid and set the width and height

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.

Set element grid positions

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.

Set element ordering

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

The finished Button

Tag wpf,creating a scalable glass button in blend
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架