Take Avalon to the Next Dimension to Achieve 3D Effects : Page 2

Creating a Gradient Background
The first thing that you'll do is to create a gradient background with lighting effects. To begin, select the DocumentRoot item in the timeline. When it's selected, you'll see a yellow border around the DocumentRoot image on the design surface. The timeline should look like Figure 3 when the DocumentRoot item is properly selected:

With the DocumentRoot item selected, find the Appearance palette on the right side of the screen (you can see it minimized in Figure 2, below the properties and above the layout), and open it. You'll see a tool that looks like Figure 4:

Figure 3. Selected Document Root: Here's how the DocumentRoot item looks when selected in the timeline.

Figure 4. The Appearance Palette: The figure shows the expanded Appearance palette.

In Figure 4, the Appearance palette shows the background as solid white. Select the gradient brush (the button in the middle with black-to-white gradient). As soon as you select it, you'll see a gradient background appear with black on the left and white on the right (see Figure 5).

To change the direction of the gradient you will have to use a brush transform. You achieve this with the brush transform tool in the tools palette. It looks like this:


When it is selected, you'll see the transform adorner (see Figure 6) appear above your application.

Figure 5. Initial Gradient Background: When you first apply a gradient background, you'll see this black-to-white gradient appear.

Figure 6. Transform Adorner: Here's a cutaway section of the designer showing the transform adorner.

By dragging the adorner around you can change the direction of the gradient. Experiment until you find something pleasing.

Note that by working with the gradient brush, you are actually generating XAML code. Here's an example of the XAML that creates a background gradient.

Figure 7. Setting Color Gradients: On this figure, you can see how the adorner sets the direction of the color gradient fill.

   <Grid.Background>
   <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
   <LinearGradientBrush.RelativeTransform>
    <TransformGroup>
      <TranslateTransform X="-0.5" Y="-0.5"/>
      <ScaleTransform ScaleX="1" ScaleY="1"/>
      <SkewTransform AngleX="0" AngleY="0"/>
      <RotateTransform Angle="52.943465225723351"/>
      <TranslateTransform X="0.5" Y="0.5"/>
      <TranslateTransform X="5.5511151231257827E-17" 
                          Y="5.5511151231257827E-17"/>
    </TransformGroup>
   </LinearGradientBrush.RelativeTransform>
   <LinearGradientBrush.GradientStops>
     <GradientStopCollection>
       <GradientStop Color="#FF000000" Offset="0"/>
       <GradientStop Color="#FFFFFFFF" Offset="1"/>
     </GradientStopCollection>
   </LinearGradientBrush.GradientStops>
   </LinearGradientBrush>
   </Grid.Background>

You can experiment with different colors by using the appearance palette. Figure 7 shows an example of how the application looks after setting both gradient colors and direction.

Previous Page

Next Page