Posted by Alex on March 21st, 2011

In this article we will look at some of the ways to create “cool” or gel buttons in Expression Blend.  If you look at the default look and feel of a WPF button in Expression Blend or Visual Studio, you will notice that it doesn’t look “cool”. It’s still that dinosaur chrome looking button control, whereas Expression Blend and Windows Presentation Foundation (WPF) are not just about functionality but also about enhancing User eXperience (UX). So to make your control “look and feel cool” you have to customize it, in other words, skin the control and style it the way you want!

A button is one of those common controls that you typically find in almost every application. So in this article we will create “cool” buttons that we will use in the future on different types of applications including Windows Phone applications.  Now, the basic concept for designing our gel or shiny button is that you create three egg-shaped ellipses or rounded rectangles (you can use any other shape you want). In this demo, we will use the rounded rectangles because there are easy to work with.  The first rectangle/ellipse uses a linear gradient brush that goes from a bright color at the top and gets darker three-quarters down then brightens up again at the end. The second rectangle is slightly smaller in size than the first one and it uses a gradient fill and its transparent. The last element (third rectangle) uses a solid brush that is black, and is used to create a drop shadow effect.

Let me illustrate this visually, I want to create a button that looks like this:

or this  or  that

Simply put,  I have combined three elements (3 shapes: rectangles/ellipses) in certain order to achieve the illusion above! The following shapes have been combined to produce the first “cool” or shiny (rectangular) button above:

Note: One thing to point out here is that the third element (the third black rectangle, its black, not gray, showing up as gray only becuase of the white canvas!) being used for a DropShadowEffect is not really necessary because I could simply have used the DropShadowEffect Class to achieve this:

In XAML:

</Rectangle.Effect>

<DropShadowEffect Color=“Black” Direction=“315” ShadowDepth=“5”

BlurRadius=“5” Opacity=“100“ />

</Rectange.Effect>

On the designer:

However, the problem with BitmapEffect object is that if the shader effects are rendered in software mode any objects that apply an effect will also be rendered in software, meaning performance maybe degraded the most when using effects on large visual or animating properties of an effect. You need to thoroughly test the performance and use caution when dealing with shader effects.

Now, let’s jump into the actual creation:

Launch Expression Blend if not already

Create a new project (File –>New Project–>Select Project type–>WPF Control Library. Give it a name, choose a location or leave at the default location.

Note: You can create a regular WPF or Silverlight project but in this case we want to create project for custom controls that we can reuse across other WPF applications.

Add a button control from the ToolBox to the root canvas (LayoutRoot).

Next we are going to create a custom style for our button. We are going to achieve this by editing the default button template. ReTemplating or Styling is one of the most powerful features of WPF; that is, being able to completely replace the “look and feel” of UserInterface (UI) elements.

Right-click on the selected button then select Edit Template–>Edit a Copy:

On the Create Style resource dialog, give your new Style a name: gelButtonStyle1:

Under Define in, leave the default as: UserControl:UserControl

Next click Ok to create the gelButtonStyle1. Looking at the Object tree you can see that a Button is composed of multiple parts. With a Template you have the ability to replace these parts whereas with a Style you can only change the appearance from outside through changing public properties. Styles consists of property setters and when you apply a style it sets the properties on the element to the styles’ values:

Write down the default size of the button under the Property Inspector.

Next on the Object tree delete the default Button Chrome type then add a Grid control:

Note: Its best practice to name your elements, so I named the Grid “main”.

Next add three rectangles and name them as follows: dropShadowRect, reflectiveRect, and transparentRect.

Change the sizes of the rectangles in the following order: make dropShadowRect the biggest, and the other two elements the same size.

Note: When setting your sizes remember the default size of the button you jotted down earlier. You certainly do not want your button too big or too small for your intended app type, so take that into consideration when setting the size.

Note: At this stage of the design, it may be necessary to work on the artboard zoomed in to your comfort level, for example: provides a better view to work with for the coming steps:

With the “dropShadowRect” selected, change the rectangle to a rounded rectangle (Note: you can change this to whatever shape you want, for more information, see the Drawing Objects topic in the User Guide section).

Repeat the above step on the other two elements.

Note: You can modify the corner radius of a rectangle by selecting the rectangle and then dragging the corner radius  handle on the upper-left corner. The corner radius handle appears when your pointer moves over either end of the dotted lines that just out from the upper-left corner of the rectangle.

In the Appearance panel verify your X and Y radius, make sure there are the same:

Next apply a solid color (black) Fill and Stroke brush to the “dropShadowRect”:

Note: If you don’t see the element you are currently working on, you can use the z-order to bring that element to the foreground or simply use the Show/Hide property on the Object and Timeline panel.

Now let’s move on the “reflectiveRect” element, and on this one we want a linear gradient brush that goes from a bright color at the top then gets darker three-quarters down, and then brightens up again at the end. Apply a gradient Fill brush that looks like the following or whatever color you prefer but remember to have reflective edge:

Tip: Use the Gradient Tool from the Tools panel to change the gradient as you see fit.

Remember to remove the Stroke from this shape.

Next, let’s move on to our last element, the “transparentRect”.  Select the right GradientStop:

Apply a linear gradient brush fill, remove the Stroke and make the rectangle transparent by adjusting the Alpha to 0%:

Note: If your background canvas is black or has a darker color you will not be able to see the changes to your transparent element. Apply a bright solid fill and you should have something like this:

Next, it’s a button, so add the ControlPresenter back

The last step is very important if you want to achieve the gel or shiny illusion, simply arrange them in correct order! My z-order looks like the following in the Object tree:

Remember the third rectangle (dropShadowRect) is only for creating our own drop-shadow effect, it’s not necessary. After aligning this and playing with different colors I settled for this:

You can also achieve the same or even better results if you combine bright colors with different shapes. I used the same three elements above to create the following buttons:

Parsing a VideoBrush

Let’s add Video to our “cool” button we created above! What we want to do is to use a VideoBrush to paint an area of the control with video. A VideoBrush is similar to one of the brushes we used above; LinearGradientBrush. Instead of painting an area with a gradient or an image, it paints the area with video content. The video content is provided by a MediaElement.  A MediaElement is simply a UIElement that uses a rectangular region to display video on its surface, or play audio. The VideoBrush depends on the MediaElement object to supply a video stream. The VideoBrush Class is supported in Silverlight 3 and 4 for now. So let’s finish off by doing something very simple but very cool to our “cool button”:

Create a new Silverlight project:

Add a MediaElement to the project. Right click project name and Add Existing Item, locate a video file. You can use the default public videos that comes with the Windows OS:

Set AutoPlay to False, we don’t want the video to automatically play when loaded. For now, we will add just one interactive feature to our “video player” (cool button). Remember to name your MediaElement:

Recreate the “cool” button we created above but instead of using a linear gradient fill on the “refectiveRect” (or whatever you named one of the rectangles/ellipses), use the video brush as the Fill:

My “cool” button I am converting into a “video player” looks like this:

Next, let’s add a click event on the “video player” so that we can play the video simply by clicking anywhere on the “video player”. If you haven’t already done so, name your “video player” (cool button) because when the button click() event  handler is called, it first determines what was clicked and it does this by looking at the sender parameter’s Name property. Once the name clicked is determined, the MediaElement is then located by using the FindName() method and once located, the appropriate method is called to play, pause or stop the video.  For this particular case we are only going to utilize the play():

Note: We will add more complex functionality to our video player in future tutorials.

Build and Run your project:

So simply clicking anywhere on the “video player” (button), plays the video.

Conclusion

Again this is a very simply introductory tutorial. We will revisit these topics later on in the future with more complex designs and complex implementations. In this tutorial, we covered the very basics on Styles and Templates, again, the difference between a Style and a Template is that a Style is used to set default attributes on a control; whereas a Template defines the elements to be used in the control itself. For most controls, the style simply sets references to brushes which provide sensible defaults. You can create stunning visuals by using different brushes on different shapes to create awesome designs! Hope this helps someone!

Tags: Expression Blend, Silverlight, Styles, Templates, VideoBrush, WPF

This entry was posted on Monday, March 21st, 2011 at 11:53 am and is filed under Expression Studio. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.