An Educated Look at the WPF Capabilities for Brushes, Media, and Animations

• Download setup - 196.09 KB
• Download brush - 196.09 KB

Introduction

This article will focus on a few GUI applications to explain why and how they work. A fairly good working knowledge of WPF would help the beginning student understand not only how to use these techniques mentioned, but also expand on them. As an ongoing student of WPF, I will, in my limited knowledge, try to assemble a document that can function as a reference for a small but important part of WPF. The downloadable files are published solutions that have already been built, as the .wmf files are too large to upload. This article then, is also meant for the reader to use any .wmf file for both the animation and video purposes.

This WPF application will show a TextBox with text and an ellipse, both of which have had their properties manipulated in order both exemplify the use of the Brush and to portray three Ellipses: one is filled with a solid color, one that contains an image, and one that contains a downloaded NASA .wmv file. Brushes change an element's graphics properties, such as Fill, Stroke, or Background. A SolidColorBrush fills the element with the specified color. To customize elements further, we can use ImageBrushes, Visual Brushes, and gradient brushes. An ImageBrush paints an image into the property it is assigned to. For instance, the TextBlock with the text "Image" and the Ellipse next to it are both filled with an image, in our case a flower picture. To fill the text, we can assign the ImageBrush to the Foreground property of the TextBlock. The Foreground property specifies the fill for the text itself while the Background property specifies the fill for the area surrounding the text. We can apply the ImageBrush with its ImageSource set to the file we want to display. We can also assign the brush to the Fill of the Ellipse to display the image inside of the shape. Note that the Ellipse is not a Canvas control.

More to the point, this application displays a video in a TextBlock's foreground and an Ellipse's Fill. To use audio or video in a WPF application, use a MediaElement object. Before using a Video file in a WPF application, add it to your Visual Studio project by first selecting the Add Existing... option in the Project menu. In the file dialog that appears, find and select the video you want to use. Note that in the drop-down menu next to the File Name TextBox, you must change the selection to AllFiles(*.*) to be able to find your file. Once you have selected the file, click Add. Select the newly added video file in the Solution Explorer. Then, in the Properties windows, change the Copy to Output Directory property to Copy if New. This tells the project to copy your video to the project's output directory where it can directly reference the file. After that, we can set the Source property of the MediaElement to the video. We use the VisualBrush element to display video in the desired object. We defined with a MediaElement assigned to its Visual property. By assigning the video to this property, can apply a brush to the Foreground of the TextBox and Fill the Ellipse to play video inside the objects. Notice that the Fill of the third row's elements is different in each screen in each screen capture. Let's look at the XAML and code-behind files:

 <Window x:Class="UsingBrushes.UsingBrushesWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="UsingBrushes" Height="450" Width="700">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock FontSize="100" FontWeight="999">
<TextBlock.Foreground>
<SolidColorBrush Color="#5F2CAE" />
</TextBlock.Foreground>
Color
</TextBlock>
<Ellipse Grid.Column="1" Height="100" Width="300" Fill="#5F2CAE" />
<TextBlock Grid.Row="1" FontSize="100" FontWeight="999">
<TextBlock.Foreground>
<ImageBrush ImageSource="flowers.jpg" />
</TextBlock.Foreground>
Image
</TextBlock>
<Ellipse Grid.Row="1" Grid.Column="1" Height="100" Width="300">
<Ellipse.Fill>
<ImageBrush ImageSource="flowers.jpg" />
</Ellipse.Fill>
</Ellipse>
<TextBlock Grid.Row="2" FontSize="100" FontWeight="999">
<TextBlock.Foreground>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="nasa.wmv" />
</VisualBrush.Visual>
</VisualBrush>
</TextBlock.Foreground>
Video
</TextBlock>
<Ellipse Grid.Row="2" Grid.Column="1" Height="100" Width="300">
<Ellipse.Fill>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="nasa.wmv" />
</VisualBrush.Visual>
</VisualBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</Window>

The code-behind file is standard:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace UsingBrushes
{   
   public partial class UsingBrushesWindow : Window
   {
      public UsingBrushesWindow()
      {
         InitializeComponent();
      }
   }
}

Here is image of the output:

An animation in WPF applications means a transition of a property from one value to another in a specified period of time. This means that the majority of graphics properties of a GUI element can be animated. The Animations example uses a .wmv file to show a video's size being animated. A MediaElement along with two input TextBoxes -- one for width and one for height -- and an animation Button are created in the GUI. Many times, we often download any animation file with a GUI element, and yet, we might not understand why, or importantly, how, it works. We do know that when you click the animate button, the video's Width and Height properties animate to the values typed in the corresponding TextBox by the user. Admittedly, it is easy to just download a solution container of files and build them. Many times, however, we might not know the reason why, or importantly, how, these files work to build a GUI application. So let’s first look at the XAML and the output, to then try to understand the why and how it works:

<Window x:Class="UsingAnimations.UsingAnimationsWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="UsingAnimations" Height="400" Width="500">
   <Grid>
      <Grid.ColumnDefinitions>
         <ColumnDefinition />
         <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions> 
  
      <MediaElement Name="video" Height="100" Width="100" Stretch="Fill"
         Source="ourfractal.wmv"/>
 
      <StackPanel Grid.Column="1">
        
         <TextBlock Margin="5,0,0,0">Width:</TextBlock>
         <TextBox Name="widthValue" Width="75" Margin="5">100</TextBox> 
      
         <TextBlock Margin="5,0,0,0">Height:</TextBlock>
         <TextBox Name="heightValue" Width="75" Margin="5">100</TextBox> 
     
         <Button Width="75" Margin="5">Animate
            <Button.Triggers>
              
               <EventTrigger RoutedEvent="Button.Click">
                  <BeginStoryboard>
                     <Storyboard Storyboard.TargetName="video">
                        <!-- Animates the Width -->
                        <DoubleAnimation Duration="0:0:2"
                           Storyboard.TargetProperty="Width"
                           To="{Binding ElementName=widthValue,
                           Path=Text}" />
 <DoubleAnimation Duration="0:0:2"
                           Storyboard.TargetProperty="Height"
                           To="{Binding ElementName=heightValue,
                           Path=Text}" />
                     </Storyboard>
                  </BeginStoryboard>
               </EventTrigger>
            </Button.Triggers>
         </Button>
      </StackPanel>
   </Grid>
</Window>

The code-behind is as basic as it comes:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace UsingAnimations
{
   public partial class UsingAnimationsWindow : Window
   {
      public UsingAnimationsWindow()
      {
         InitializeComponent();
      }
   }
}

Similar to Windows Forms applications, we create a UsingAnimationsWindow class and use the colon to show that derives from Forms base class. Here is a view of the application:  

This is an animation that has a sort of hypnotic effect. The Width and Height properties can be manipulated to enlarge of the animation (in that specified time period). In the XAML, we place a StoryBoard element which contains nested animation elements. When the StoryBoard beings executing, all child animations begin to execute. In WPF, you can define more than one StoryBoard if you want them all to execute simultaneously. The reason for this is that the Storyboard element has two important attached properties -- TargetName and TargetProperty -- which can be defined in either the StoryBoard or the animation element. The TargetName specifies which property of the animation object to change. In our case, the Width and Height are the TargetProperties, because we're changing the size of the video .wmv file. Both the TargetName and TargetProperties can be defined in the StoryBoard or in the animation element itself. WPF provides several classes to animate a property. We use the DoubleAnimation for the Width and Height properties -- PointAnimations and ColorAnimations are two other commonly used animation classes.

A DoubleAnimation animates properties of type double. The Width and Height animations are respectively. We define the To property of the Width animation, which specifies the value at the end of the animation. We use data binding to set this value in the widthValue TextBox. The animation also has a Duration property that specifies how long it takes: notice that we set the Duration of the Width animation (Width, again is one of the TargetProperties) to 0:02, meaning that it takes 0 hours, 0 minutes, and 2 seconds. Those of type decimal are specified by fractions of a second. Hour and minute values must be integers. Animations also have From property which defines a constant starting the value of the animated property. This could appear familiar to those who work the StopWatch's StartNew() method in Visual C# Windows Forms. Finally, animations also have by property which is useful for numeric animations. This property specifies an amount by which to change a property. This can used in place of the From and To properties for creating more generic animations. A first-in-rank source from which you can study WPF is http://windowsclient.net/.

History

• 23^rd May, 2010: Initial post