In this post, I am going to give a Tip of using Expression Blend to create a Gradient color from any color pattern. Sometime, you might have a color pattern that you have to use in your UI and don't know how to pick the exact color to your UI. This simple post will help you to understand it properly.

After reading this post, you will be able to pick any gradient color from a pattern and use as easily as 1-2-3. Hope, this will help you. Feedbacks are always appreciable.


Quick Start to the UI

Let's start with a simple UI, where we will have a blank rectangle. Then we will have a color patch (I cropped it from my Blogger header image) and we will use that to pick the gradient color in our application & place as a background color of the Rectangle.

To begin with, open your XAML page. In our case, it is totally blank XAML and a Grid named LayoutRoot inside that.

image

Now, from the toolbox, select the Rectangle and draw in the design view.

image

Here is a snapshot of the Rectangle that we drawn in the screen.

image




Picking up the color

Now we need a gradient color patch. I am going to crop a patch from my blog header and here it is:

image

You can use anything here. Now open the image window and Expression blend side by side (generally tiled window). Select the rectangle control and from the properties panel, select the Gradient option as the background. It will automatically change the background color of the rectangle to a Black to White gradient scheme (as shown below).

Now, just below the color palette, click the dropper to select it.

image


As shown below, click the dropper tool at the first pixel of your image and drag it to the end. This will create a light line in the image as shown below. Release your mouse and the line will go out.

image


Now in your Blend designer, you will see that the Rectangle has the same gradient color that you just selected from the image. In the properties panel, you can also check each gradient points in the color palette.

image

In this way, you can easily pick any color gradient brush from any image to your XAML control. The same thing is also applicable for a Solid color brush.

Hope, this tip will help you next time to pick any color in your XAML for your UI. Leave a feedback below and do let me know, how this tip helped you next time while picking up a color. Appreciate your suggestion as always.


Kunal Chowdhury

About the Author

Solution Architect & Former Microsoft MVP

Kunal Chowdhury is an enterprise solution architect and former multi-year Microsoft MVP. He is the author of three technical books: Windows Presentation Foundation Development Cookbook, Mastering Visual Studio 2017, and the Mastering Visual Studio 2019.

He publishes technical articles on .