Implementing Video Brush and Transparent Brush in Windows Presentation Foundation (WPF)
Posted by: Mahesh Sabnis ,
on 8/11/2010,
in
Category WPF
Abstract: WPF extensively makes use of Media Features. System.Windows.Media is an important namespace in WPF. This namespace provides access to Brush objects and other media features. In this article, I will demonstrate a simple Media Brush feature in WPF.
WPF extensively makes use of Media Features. System.Windows.Media is an important namespace in WPF. This namespace provides access to Brush objects and other media features. In this article, I will demonstrate a simple Media Brush feature in WPF. In WPF we have the following Brush Types:
1. DrawingBrush.
2. ImageBrush.
3. LinearGradient Brush.
4. RadialGradient Brush.
5. Visual Brush.
From the above brush types, Visual Brush allows to paint color properties of WPF element using any other Visual element. In the article, I have explained the procedure to use this brush.
Creating Video Brush in WPF
Step 1: Open VS2010 and create a WPF Application, name it as ‘WPF_VideoBrush’.
Step 2: In the MainWindow.Xaml, add the Button and a TextBlock element.
Step 3: In this application, since we will be using the Visual Brush using Media Element, add a new Video (*.wmv) file to the project.
Step 4: Open MainWindow.Xaml and create a Visual Brush using the MediaElement:
<Grid>
<Button Height="96" HorizontalAlignment="Left"
Margin="29,145,0,0" Name="button1" VerticalAlignment="Top" Width="462">
<Button.Background>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="H:\Mahesh_Practice\DotNet40\RTM\WPF_40\WPF_Solutions_DevCurry\WPF_VideoBrush\Lookout.wmv" LoadedBehavior="Play"></MediaElement>
</VisualBrush.Visual>
</VisualBrush>
</Button.Background>
</Button>
<TextBlock Height="110" HorizontalAlignment="Left"
Margin="12,12,0,0" Name="textBlock1" Text="Visual Brush"
VerticalAlignment="Top"Width="491" FontSize="90" FontFamily="Vivaldi" FontWeight="SemiBold">
<TextBlock.Foreground>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="H:\Mahesh_Practice\DotNet40\RTM\WPF_40\WPF_Solutions_DevCurry\WPF_VideoBrush\Lookout.wmv" LoadedBehavior="Play"></MediaElement>
</VisualBrush.Visual>
</VisualBrush>
</TextBlock.Foreground>
</TextBlock>
The above xaml shows that the Background property of the Button and the Foreground property of the Button and TextBlock, is set using the Visual Brush. The role of this brush is to generate a brush object using the Visual Element.
Step 5: Run the application and the following result will be displayed:
Creating a Transparent Brush using WPF
As a part of the Visual Brush, which we just saw in the previous steps, we can very easily create a transparent brush. As you are aware, using the Opacity property, a Visual element can be made transparent. In the following code, a simple Transparent Brush is demonstrated.
<Button Height="108" HorizontalAlignment="Left"
Margin="79,59,0,0" Name="btnHello" VerticalAlignment="Top"
Width="112" Opacity="1" Content="Hello">
<Button.Background>
<VisualBrush>
<VisualBrush.Visual>
<StackPanel Background="White">
<Image Source="MyFile.jpg" Opacity="0.3"></Image>
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</Button.Background>
</Button>
If you run the code above the following result will be displayed:
Was this article worth reading? Share it with fellow developers too. Thanks!
Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @
maheshdotnet