Learn how to reproduce a rich control UI using the Windows Presentation Foundation tools by coding radial and linear gradients.
- [Teacher] In this movie, I'll look at…how to use gradients to mimic this UI,…shown in this screenshot.…I won't build the whole UI,…but I will work on some of the parts…that are inside this circle.…I won't have the text,…I won't have the highlighted tick marks…or the speaker icon,…but I will have a circle here…and try to make the tick marks.…We'll have the violet highlight here in this area,…and then, for this outer circle,…I'll try to mimic the chrome look.…Over here in the UI,…I have a number of circles inside a grid.…
You can't see them because…I've set their visibility to hidden.…I've already done all the work of sizing the circles,…the ellipses so that they're all superimposed…in the correct size.…So, this is going to be the outside rim…that's going to represent this gray border here.…This is going to represent the edge,…the one that has the chrome look.…Currently, it's a blue color.…This is going to represent the tick marks.…What I've done here is I've set the stroke property…to semitransparent, and it's a white color.…
- Working with brushes
- Painting properties
- Painting in code
- Working with RGB channels
- Using hexadecimal values
- Setting opacity and transparency
- Editing color in the Visual Studio Color Editor
- Using gradient brushes
- Decorating with tiled brushes
- Adding brushes and colors to resources
- Working with opacity masks
Skill Level Intermediate
Windows Presentation Foundation: 2 Layoutwith Walt Ritscher2h 13m Intermediate
1. Brush and Color Overview
3. The Visual Studio Color Editor
4. The Gradient Brushes
5. The Tiled Brushes
6. Brushes and Colors in Resources
7. Opacity Mask
Examples of opacity patterns6m 47s
Next steps1m 11s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.