LP Pinsonneault blog's

Windows 8, Windows Phone, ...

NAVIGATION - SEARCH

Expression Blend for Developers at TechDays 2009 Montreal – Part 2 – Creating Glass Effect

For the second part i will show you how to create some glass effect. Just as a reminder i’m not a graphic artist, i’m .NET Developer. As you can see Expression Blend allow any developer to improve the design without the help of a graphic artist or images (keep in mind Silverlight and WPF are vector graphic base).

Starting with the background I've created in the previous post we will add some stuff to have parts of the application looking like glass.

Now we will add an header that will look more fancy and glassy. First we will add a rectangle.

image

Again we will use the gradient properties to add the required effect. So we will change the background to use the gradient.

image

Now we will change the start anchor and set the Alpha to 20. After we will add a new anchor in the middle and set the Alpha to 50. We will add another anchor to the right of the last one just added, and we will set the Alpha to 15. Finally we will set the Alpha of the last anchor to 0.

image

To polish this title bar we can add a drop shadow. To do so, in the Properties under Appearance, there is a property called Effect. We now click on the New button. In Expression Blend there is some predefined effect available. You can now select DropShadowEffect.

 

 

 

image

image

Now we have an header that look a lot better. As you can see if we resize the window, the the opacity effect is visible in the header.

 

image

Now you can add some text in the header. You can also apply the DropShadowEffect on the text to make it more readable. And again you can play with the Gradient. Here is an example:

image

Now we will add glass effect over an image. So add an image in your application. Over this image we will add a new rectangle. This will be the object that will create the glass effect.

image image

Now we will set the gradient to a really soft blue #CEDDEC. Now we will need 4 anchor in our gradient slider. And the only thing that will change is the Alpha on each anchor.
(From left to right)
- 1rst : Alpha = 80
- 2nd : Alpha = 25
- 3rd : Alpha = 50
- 4th : Alpha = 30

Also I've changed the gradient arrow to make the illusion of the direction of the light.
 image

 

The final result:

image

 

Next part: Working with Template and data binding to a sample data source.

Regards,
Louis-Philippe

Expression Blend for Developers at TechDays 2009 Montreal – Part 1 – Using gradient

Two week ago i presented a session on Expression Blend for developers. I had a great time presenting (even if i had some issues remembering my slides). But what was interesting wasn’t the slides but the demos.

So today i will show you some tips and tricks based on my demos.  

Using gradient

Using gradient can help improve the visual aspect of an application. In Expression Blend the functionality is well implemented. First select the control you want to apply the gradient.

 image image

In the Properties bar you can select on which properties you want to apply the gradient. More often we apply the gradient on the background of an object.

image

Now you can select the third option. This is the gradient tools.

image

The gradient slider allow you to change the way the gradient will look like.

image

You can have multiple anchor in the slider

image

Here is an example of the way we can use the slider to create some effect. For each anchor we can change the color and the opacity.

image

Also there is a tool in the toolbar that allow us to change the direction of the gradient.

image image

This tool display an arrow that let you change the direction of the gradient. It’s really simple to use.

image
image

So we can have professional background for our application by setting the gradient from “Black” to “Almost Black”. And use the Gradient Arrow to change the gradient direction.

image

Here is the result.

image

 

Next part: Creating Glass Effect

Regards,
Louis-Philippe