Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
A common UI pattern in recent years is filling portions of your user interface with blended colors. In Silverlight this is accomplished with the Gradient brushes. With gradients you specify two or more colors and Silverlight determines the intermediate color ranges. While you can set your gradient ranges in xaml, you'll be much more efficient if you use the Expression Blend or Visual Studio color editors. I'm going to use Expression Blend to make my Gradient brushes. I've opened a project called Gradient Brushes, and I'm in MainPage.xaml where I have two rectangles.
I'm going to click on this first rectangle and go to my Property pane to the Brushes section. There are number of different kinds of brushes you can set in Blend. This first brush is the no brush or null brush, as you can see the white color disappears. The second button is for the Solid color brush, and the third button is the one we're looking at in this video, which is the Gradient brush. When I select this button I get a default linear gradient brush. The two colors are black and white, and Silverlight is interpolating the colors in between.
I can control where this black starts by grabbing this little grabber and sliding it to the left or right. So now the top half is completely black. I can swap the two by clicking on this Reverse gradient stops, I will put them back, and of course I can change the colors. I click on the little token and then I can go up to my Color editor and pick a new color. For my colors today I'm going to choose blue and yellow for the second gradient stop.
If I want to add more Gradient stops it's very easy to do in Blend. I just click somewhere in the Gradient bar. Each time when I click it adds in a Gradient stop. If I want to remove one of these gradient stops I grab the little token and pull it off, pulling down and that removes the Gradient stop. Let's look at our radial gradient. I'm going to select the second rectangle, click on the Gradient button and then I'm going to click here, this is the Radial gradient.
Radial of course meaning circular, again I'll pick my two colors blue and yellow. To have even more fun with gradients you can use this tool on the Toolbox called the Gradient Tool or the letter G. When I click on this notice what happens to my gradient. I now have an arrow with two circles and arrowhead and an arrow tail. I can edit my object directly in the objects instead of going over at the Gradient bar. Watch what happens when I move this token here, to the side you see how this circle here and the art board moves too.
I can also grab this circle in the art board and move the Gradient stop, and you can see that it also moves in the Gradient bar. I can take the tail of the arrow and move it to a new location. I can take the head of the arrow and make it smaller or larger, in that case it changes the size of the gradient, Ctrl+ Z to undo, and I can add Gradient styles by clicking on this blue line. Using Expression Blend to create and modify Gradient brushes is fast and intuitive. I always rely on the Expression Blend editor.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105224 Viewers
56 Video lessons · 117002 Viewers
71 Video lessons · 86200 Viewers
131 Video lessons · 41213 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.