How to do it...

In this demonstration, we will add a square box to the application window. On mouse hover, we will run a storyboard to change the size and color of the box and then reset it to the initial value on mouse leave. Follow these steps:

1. From Solution Explorer, navigate to the MainWindow.xaml file.
2. Inside the XAML file, you will find a Grid panel placed by default. Let's add a Rectangle control inside it and set its Height and Width properties to 100 to give it a square look.
3. Give the rectangle the name squareBox so that we can identify it from our Storyboard.
4. Add a SolidColorBrush to fill the background of the Rectangle. Set a color to the brush and name it squareBoxFillBrush. Here's the XAML snippet:

<Grid> 
    <Rectangle x:Name="squareBox" 
               Height="100" 
               Width="100"> 
        <Rectangle.Fill> 
            <SolidColorBrush x:Name="squareBoxFillBrush"  
                  ...