Creating a simple control with dimension

This was the original reason a co-worker suggested I blog some of my work. It is a relatively simple design trick but he really liked it and liked the fact it was easy and didn't require a lot of reworking to get the effect.

Step 1: I created a UserControl that contained a simple shape (in this case a circle) - for this example it will use chrome style brushes. I haven't worked with solid or gradient brushes - that will be later after I figure out the Silverlight charts a bit more. (The charts are for a current assignment, but I do want to catch up on documenting what I have been able to accomplish)
The user control also has a drop shadow applied to the shape - this helps with the final artwork having the look of dimension.

The image above shows the final basic user control.

Step 2. Created a new document (UserControl) where I imported the basic control, and copied and pasted several times. Each subsequent layer reduced using the the transform tool in Blend. (This example uses the preview of Blend 5 available from Microsoft. )
This moved the position of the chrome brushes up slightly, giving the appearance they were still using the same reflection but one was above the other.

Above is a closeup of the positioning of each control layer - they all have the exact same center, but by reducing the size the chrome effect of the brushes moves up slightly. Also, the border has a different chrome style brush than the fill does. The difference is very slight but it helps with the dimensional effect.

Step 3. Layer the control to achieve the desired affect. Below shows the complete dimensional control. When using a "curved" chrome brush - it really helps the effect pop. But, that will be a separate post since I am still catching up on figuring out a bit more coding.

Not the perfect representation, but it is all XAML, and you only have to make the image once to reuse on several other controls or pages. Could also be a good button background.

I have uploaded the files here for you to play with. It includes the brushes as well.

Chrome LinearGradientBrush

Wanted to create a way to show a chrome effect, without having several borders or paths layered on top of each other. My coworker (hey there Matt  ( ^_^ )/" ) suggested using brushes only to keep the number of UserControls down to a minimum.

It made sense, and I had to go back to my Adobe Illustrator days (since I am working in Blend right now creating XAML with the Properties panel) and remember that linear gradient fills can be created to look like chrome, using several gradients stops (for XAML it is called a GradientStop for each color and where it falls within the actual brush).

By working with the brushes, and using the gradient tool arrow - I was able to come up with a nice chrome style brush. I'll have to practice to get the chrome to look a bit differently, but this is perfect for what I need it for now.

First: I created a new UserControl to create the brush so I wouldn't accidentally change any of the elements in one of my current controls (which I have done several times before). I just called it LinearBrushCreator, nothing fancy but I know what it is for.

I filled the rectangle with a very basic black and white LinearGradientBrush, which is the default in Blend when you choose to fill the element with a gradient. The image below shows where the brush fill options are in the Properties panel. Select the item, and it will show the different properties that can have a brush applied to it. Since this is a rectangle it has a Fill property (element), if it were a border it would have the Background property for the fill of the shape.

Afterwards, I went to the toolbar and chose the Gradient Tool. When the rectangle is selected and you have the Gradient Tool (The white arrow that is second from the top, or right below the solid black arrow) chosen, there is an arrow that is displayed on the rectangle. This arrow shows the direction of the gradient, and there are points (the little circles) and these represent what color is at that specific GradientStop in the LinearGradientBrush.

Below is the Rectangle with the arrow showing the brushes direction and colors.

The easiest way I found to add and manipulate the colors on the brush is to use the arrow and not the slider on the Properties panel. You can zoom in and out on the arrow's point, instead of trying to move tiny boxes that represent the colors. 

The easiest way to add a GradientStop is to have the Selection Tool (Solid Arrow at the very top of the toolbar) chosen, then click on the arrow. This creates a new point (circle) that you can change the color on by using the Color Selection box in the Properties panel.

After several changes, and adding several points to the arrow, I was able to create a brush fill I was happy with and is consistent with the application's overall theme.

This image shows how many different points I used to create this fill effect.

Below is the finished XAML for this Chrome Brush design.

<LinearGradientBrush x:Key="MyChrome" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF181818" Offset="0.495"/>
        <GradientStop Color="#FFCACACA" Offset="0.46"/>
        <GradientStop Color="#FFF3F3F3" Offset="0.997"/>
        <GradientStop Color="#FFC8C8C8" Offset="0.788"/>
        <GradientStop Color="White" Offset="0.006"/>
        <GradientStop Color="White" Offset="0.966"/>
        <GradientStop Color="#FF242525" Offset="0.531"/>
        <GradientStop Color="#FF1D1D1D"/>
        <GradientStop Color="White" Offset="0.215"/>
        <GradientStop Color="#FF060606" Offset="0.463"/>
        <GradientStop Color="#FFF1F1F1" Offset="0.006"/>
        <GradientStop Color="#FFFBFBFB" Offset="0.401"/>
        <GradientStop Color="#FF96999B" Offset="0.458"/>
        <GradientStop Color="#FFCCCCCC" Offset="0.434"/>
        <GradientStop Color="#FFD0D0D0" Offset="0.002"/>
    </LinearGradientBrush>

Now, going to try this again (MUCH later though) for a few different patterns that would work better on different controls.