Applying a VisualBrush

The VisualBrush enables filling an object with the content of another visual element in the user interface. For example, you could set a button’s background with the content of a MediaElement that is playing a video. Applying a VisualBrush is simple, in that you just need to assign its Visual property with the name of the visual element you want to bind. The following code example shows how you can assign another visual element currently in the user interface as the background of a button:

The requirement is that the source visual element has a Name property set. You assign the visual element with the Binding markup extension, whose ElementName property points to the actual visual element. You learn more about the Binding extension in Chapter 35, “Introducing Data-Binding.” The previous example produces the result shown in Figure 33.7.

Figure 33.7 Applying a VisualBrush.

Basically the button’s background is not a color but is a rectangle with all its properties. It is worth mentioning that if you make modifications to the binding source, the changes will be reflected into the VisualBrush. This is the real power of this brush. For example, try to use a TextBox as the source element; when you write in the TextBox, your text will be reflected into the VisualBrush.