Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
You won't find the back color or fore color property in Silverlight. That's because Silverlight uses a more sophisticated painting system based on brushes. These brushes are quite useful, as you'll see in this chapter. I am going to start my demo in Visual Studio, in a project called PaintingUIWithSolidColors. I've created a class diagram that shows the relationships between the different brushes. At the top of this class diagram is the Abstract Brush. The brush that we're going to look at in this chapter is the SolidColorBrush. There are also several kinds of GradientBrushes.
The Gradient brush paints with more than one color. There is the Radial and the LinearGradientBrush. The next category is the TileBrushes. All of these brushes can render their contents in small tiled versions of the original content. The ImageBrush is used to paint the pixels of a picture onto other UI. The VideoBrush does the same except with video content. The WebBrowserBrush copies the content of a browser page onto other UI. Then there is this ImplicitInputBrush. It is used by the Silverlight pixel shaders.
I am going to start my demo by showing you the default settings for brush. I will choose this DefaultBrush.xaml page. I am going to look at these two rectangles. This first rectangle has the Fill set to a Null value. The second rectangle doesn't have the Fill value set anywhere in the XAML. In both these cases, that's going to result in a Null brush. If you want to check this out, you can go to the code behind, put a breakpoint here in the constructor of this page, and when you go to get the Fill value from this rectangle and hover your mouse over this, you'll see that it is a Null result.
I like to use XAML to change my brush colors. I am going to show you how to do that in this SettingBrushInXAML. The most common way of setting the color is to use a Named Color. So on this rectangle I'm setting the Fill value to a LightBlue value. If I delete the value and press Ctrl+Spacebar, I'll get a list of all the available colors. I think I'll choose BlanchedAlmond for this demo. The second rectangle uses the more verbose Property Element syntax.
There is the rectangle Fill. I am instantiating a SolidColorBrush. And then I'm setting several different properties, the Orange color and the Opacity level. You might want to use hexadecimal values to set your color. To do that, you start the color value with the pound (#) symbol, which signifies that I am doing a hexadecimal number. Then the first two characters are the alpha channel, the next two characters are the red channel, and then green, and then blue. There will be moments in your application where you are going to want to change the values in code, that's my next demo.
I am going to click on AddingBrushInCode, then I am going to press F7 to switch to my code behind. Here is how you write some basic solid color brush code. I am going to take my rectangle, set its Fill property equal to a new SolidColorBrush. Then inside the parentheses, I specify the colors for that SolidColorBrush. I am going to start by using named colors. I go to the Colors class and then hit the dot operator and choose from one of these colors.
For some reason, the Silverlight team has less colors in the programmatic side than they do in the XAML side. I will now take this code and copy it in two places. I will show you how to do the system colors. If I want to get the colors from the operating system, I can choose SystemColors as my object, dot, and I'll choose this ControlColor. And for the third example I'll use an Alpha, Red, Green, Blue value. To do that, I am going to use the Color class and it has a method called FromArgb. I am expected to pass 4 byte values to this.
The byte value would be from 0 to 255. So for the Alpha Channel I'll set that to fully opaque, and then for the Red Channel I will make it all red, and then for the other two channels I'll just pick an arbitrary number. I'd like to switch to Blend and show you some of the color tools that are available over there. I'm in Blend, in the same project, and I have opened this page BrushLocations.xaml. It has a number of different items that support the brush property, for instance here is a TextBlock. So I can dial in a nice pink color for that text, sure.
In the TextBlock when I set the brush, I'm setting the foreground property, which is changing the color of the font. I go over to my Color tools in Blend and I can use this nice color Editor over here to dial in a red color or any other color I choose. Let's take a look at some of the color options that are available over here. I can choose my general color in this bar with my mouse. Once I have selected my general color, I can use this area to change the Saturation levels of the color. If you want to change the individual channels, that's what these controls are for over here.
Right now they're set to Hue, Lightness, Saturation, and Alpha. Notice how underneath the Hue bar are different colors. So if I grab my mouse and slide this to the left or right, you will see that as I move, it's changing the Hue value. If I click with my mouse right here, that little sub bar is telling me that it will change to a red color. I can also change the color spaces by clicking and holding here. And I am going to switch back to the Red, Green, Blue Channel. See how the individual items changed to Red, Green, Blue, and Alpha.
There is also a Hexadecimal section and there is also a Color Dropper, where you can click on this and then go out and click elsewhere in your UI for the color that you want, like I like this purplish blue color, so I will click here. Other element properties that support brushes; there's a Border brush; the Fill value for a rectangle; the Fill values for shapes, several different shapes; and even custom shapes. Here is one that I drew myself. As you've seen, painting bright areas of your UI is accomplished with the solid color brush.
In the next movie, you will see how to paint with multiple gradient colors.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98552 Viewers
61 Video lessons · 85838 Viewers
71 Video lessons · 69736 Viewers
56 Video lessons · 102043 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.
Your file was successfully uploaded.