Use a VisualBrush to paint the UI with pixels from a MediaElement video.
- [Narrator] In this example,…I'll look at how to take the streaming video…from the media element,…and use that as a brush in my application.…There is no concept of a video brush in WPF,…but remember, that the visual brush…can render any part of the visual tree,…and the media element is part of the visual tree.…Here's how I'll implement my application.…I have a media element here.…Here it is.…It has the source of this Turbines.mov file,…and then in my code behind,…on the button click event handler,…I just call play, so that'll start the video playing.…
The app looks like this.…Now, I'll go over to my UI,…I'll click on the ellipse,…I'll add a visual brush,…where the visual is going to be a binding…to an element named "media one".…Now I'll remove this fill property,…and you can see the first frame of the video is shown here,…and the first frame is now showing on my ellipse.…
Now to make this more dramatic,…I'll copy the ellipse, and paste it in a few more times.…Then run the application.…What this shows is that you can use the visual brush…
- 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.