Click here to Skip to main content
13,552,926 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


3 bookmarked
Posted 13 Apr 2011
Licenced CPOL

Tips: How to use Gradient Color Picker in Expression Blend?

, 13 Apr 2011
Rate this:
Please Sign up or sign in to vote.
How to use Gradient Color Picker in Expression Blend?

In this post, I am going to give a Tip of using Expression Blend to create a Gradient color from any color pattern. Sometimes, you might have a color pattern that you have to use in your UI and don't know how to pick the exact color in 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. Feedback is always appreciated.

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 and place as a background color of the Rectangle.

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


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


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


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:


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.


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.


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.


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 your feedback below and do let me know how this tip helped you next time while picking up a color. I appreciate your suggestion as always.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kunal Chowdhury «IN»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Book authored:

Connect with me on:

My CodeProject Awards/Prizes:

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Abhishek Sur13-Apr-11 23:19
mvpAbhishek Sur13-Apr-11 23:19 
GeneralMy vote of 5 Pin
Abhijit Jana13-Apr-11 6:10
mvpAbhijit Jana13-Apr-11 6:10 
GeneralMy vote of 5 Pin
Brij13-Apr-11 4:59
mvpBrij13-Apr-11 4:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180515.1 | Last Updated 13 Apr 2011
Article Copyright 2011 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid