Texture Mapping

Solid color and gradient brushes allow for a wide range of designs, but another feature that WPF has is the concept of a Image Brush. This allows you to apply a texture to any element. In this tutorial, we'll use an Image Brush to apply a texture, and we'll work with Alpha Channels to make the texture jump out a bit more.

If you're following along in these tutorials, between this tutorial and the last, I moved the UI from the AdventureWorks.xaml file to the Window1.xaml and resized my base window so everything fits on it.

Since we're only working with one piece of the design, it's best to get everything out of the way. You could simply click the eye next to every piece in the design except the back ellipse, but there's an easier way. First, select Path_1 in the Object Tree. Then, while holding down the CTRL key, select the Group_77 at the very end.

Now, press CTRL-G to group them into a Grid. Alternatively, you can right click the elements, choose "Group Into" then select Grid. Either has the same result.

Now, you can click the eye symbol next to the Grid to get those elements out of your way.

Ok, before we can apply our texture, we need to add it to the project. In the menu, select Project and Add Existing Item, then navigate to the Metal_04.PNG. It should show up in your files list now.

Double Click the Metal_04.PNG to add it to your scene.

At the moment, you have an Image control in your artboard. That Image needs to be converted into an Image Brush. With the Image still selected, in the Tools Menu, select Make Brush Resource and then Make Image Brush Resource. When you do this, Blend will prompt you to name your resource. Give it whatever name you like.

Once the ImageBrush has been created, the original Image control is no longer needed. It should still be selected, so just press the Delete key to get rid of it.

Now, select the ellipse, and switch to the Properties tab. Then, select the Fill property. Your property inspector will now look like this:

The row of controls right under where it says "OpacityMask" allows you to change the brush type. Right now, you have a linear gradient brush. Click the rightmost tab to tell Blend that you want to use a resource.

Select the ImageBrush1 (or whatever you named it a few steps back), and the texture will be applied to the ellipse.

By default, the texture is set to take up the entire ellipse and stretch to fit. That's not what we want this time, so use the Brush Transform tool, and drag the bottom right adorner until the texture is closer to its original size.

Finally, switch the Tile mode to "Tile" instead of "None" in the property inspector, and the texture will be applied to the entire ellipse.

Now, click the eye symbol next to the Grid in the object tree, and let's see how it looks.

That looks good, but we can do a bit better. Let's add a partially transparent radial gradient to really make that texture jump out. Let's hide the Grid again, and then select the ellipse. We're going to copy and paste that ellipse, so we have another one right on top. You can do the Copy and Paste either from the Menu or just by hitting CTRL+C and CTRL+V.

Now, with the Ellipse_Copy selected, apply a radial gradient to it. You'll need to choose Gradient Brush in the Property Inspector, then select a radial gradient down at the bottom of the Brush Editor.

Change both gradient stops to Black. You can do this in several ways, but if you type "Black" in the Hex field, Blend will recognize the color, and use it for you.

Change the Alpha Channel (The A) on the right gradient stop to 80%, and set the Alpha Channel on the left gradient stop to 0%.

You can start to see the effect we want, but drag the left gradient stop to about 80% of the way over, and you'll get the final look we're aiming for.

Now, click the eye to restore the Grid, and we're looking a lot better.

The only thing that doesn't still look right, is that our gradient ellipse is on top of the Adventure Works text. So, we just need to take the Ellipse_Copy and drag it above the Grid in the Object Tree.