Brushes in Visual Basic .NET

Painting QR Code 2d barcode in Visual Basic .NET Brushes

the Ellipse element. Listing 18.19 compares several ellipses using different RadiusX and RadiusY properties, which both default to .5.

Result:

XAML:

<Canvas Width="245" Height="75" Background="White"> <Ellipse Width="75" Height="75" Stroke="Black"> <Ellipse.Fill> <RadialGradientBrush> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="Black" Offset="1"/> <GradientStop Color="Gray" Offset="0.5"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Width="75" Height="75" Canvas.Left="85" Stroke="Black"> <Ellipse.Fill> <RadialGradientBrush RadiusX=".25"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="Black" Offset="1"/> <GradientStop Color="Gray" Offset="0.5"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Width="75" Height="75" Canvas.Left="170" Stroke="Black"> <Ellipse.Fill> <RadialGradientBrush RadiusY=".25"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="Black" Offset="1"/> <GradientStop Color="Gray" Offset="0.5"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> </Canvas>

As the previous examples show, you can use a RadialGradientBrush to provide basic linear and radial effects. Although these Brush elements are appropriate in certain situations, occasionally you need to deliver a richer, more textured effect. Textures are often delivered via images, which can be painted on visual elements using an ImageBrush.

The ImageBrush allows you to fill an area with an image instead of a solid or shifting color. The ImageBrush utilizes a picture specified within the ImageSource property to

paint a raster graphic. This Brush supports both .jpg and .png formats to deliver a textured effect to your visual elements. Listing 18.20 shows a basic ImageBrush using an image named man.png.

Result:

XAML:

<Ellipse Width="60" Height="60" Stroke="Black"> <Ellipse.Fill> <ImageBrush ImageSource="http://www.silverlightinaction.com/man.png" /> </Ellipse.Fill> </Ellipse>

As you can imagine, an ImageBrush can easily add a rich, vibrant touch to your painting surface. Sometimes, you may want your painting surface to be more dynamic and livelier. With the same type of simplicity as the ImageBrush, you can paint a surface with a video, using the VideoBrush.

Imagine watching a shooting star speed across the night sky through the elliptical eyepiece of a telescope. With the VideoBrush in action, you can deliver this type of scene by drawing an Ellipse and filling it with a MediaElement. Listing 18.21 shows exactly how to use the VideoBrush.

Result:

XAML:

<MediaElement x:Name="myMediaElement" Opacity="0" Source="http://www.silverlightinaction.com/video2.wmv" /> <Ellipse Width="100" Height="100" Stroke="Black"> <Ellipse.Fill> <VideoBrush SourceName="myMediaElement" /> </Ellipse.Fill> </Ellipse>

As this example shows, the VideoBrush references a MediaElement through the SourceName property. This fact allows you to manipulate the playback functionality of

a VideoBrush by altering the playback of the MediaElement as defined in chapter 7. If you want to pause or stop the video displayed within a VideoBrush, you call the Pause() or Stop() method of the MediaElement that the VideoBrush references. Up to this point, the Brush elements have been used in relation to a basic Ellipse. An Ellipse was chosen for the sake of illustration; you can use all the Brush elements that we ve covered in any number of visual elements, including but not limited to a Canvas, a TextBox, or even a TextBlock, as listing 18.22 shows.

Result:

XAML:

<MediaElement x:Name="myMediaElement" Opacity="0" Source="http://www.silverlightinaction.com/video2.wmv" /> <TextBlock Text="HELLO" FontFamily="Verdana" FontSize="80" FontWeight="Bold"> <TextBlock.Foreground> <VideoBrush SourceName="myMediaElement" /> </TextBlock.Foreground> </TextBlock>

This sample only begins to show the potential allotted by the different Brush elements. All the Brush options are usable in any property that has a Brush type. You can have a video paint text, or an image paint shapes or even controls. The sky s the limit. In addition to these rich Brush options, Silverlight supports an interesting set of features that can further alter the appearance of your shapes. Collectively, these are called effects.

Much as is the case with animation, the subtle and appropriate use of effects can make the difference between a UI that just sits there and one that really pops, drawing your eye to information that s important to you. Effects in Silverlight come in two primary forms: built-in effects, implemented in the native Silverlight hardware-accelerated runtime code; and pixel shaders, implemented by folks like us using a combination of managed code and High Level Shader Language (HLSL) and run in software. The former allows for maximum performance for common effects such as blur and shadows. The latter provides a lot of flexibility to allow us to provide our own effects, while not breaking out of the sandbox. In this section, we ll cover both types of effects. We ll start with how to use the built-in effects and follow that up with a primer on creating your own pixel shader effects.