Microsoft Visual Basic 2013 Step by Step: Using XAML Styles

Building new styles from existing styles

After you create a style, you can use it as a model for additional styles in a project through a process known as style inheritance. This means that the features and properties of one style can be used as the basis for another style. The only requirement is that the new styles are based on an existing style of the same control type. For example, after you have defined a button style named GradientButton in your project, you can create a new style based on GradientButton that might do additional formatting to buttons—but the style can be applied only to button controls in the project.

At the XAML markup level, you use the BasedOn property to inherit a style within a new style definition. The new style is assigned a name through the x:Key property, as you have already learned. If a property is not set in the new style, it is inherited from the base style.

The following exercise demonstrates the process using the My XAML Style Practice app. You’ll create a new button style named YellowGradient that inherits its gradient formatting characteristics from the GradientButton style. The new style adds yellow color formatting in two places—presumably something that you might want for some, but not all, of the buttons in a user interface.

Use the BasedOn property to inherit a style

1. Click the App.xaml document tab at the top of the Designer.

   The YellowGradient style will be defined in the App.xaml file so that it is available throughout the Windows Store app.

2. Move the insertion point below the GradientButton style you just defined (between the </Style> and </Application.Resources> tags), and enter the following XAML markup to define the new style:

   <Style x:Key="YellowGradient" TargetType="Button"
          BasedOn="{StaticResource GradientButton}">
          <Setter Property="BorderBrush" Value="Yellow"/>
          <Setter Property="Foreground" Value="Yellow"/>
   </Style>

   Your Code Editor should look like this:

   

   Click to view larger image

   Once again, the new style resource is defined in the <Application.Resources> section between <Style> and </Style> tags. You’ll recognize most of the markup used for this new resource, with the exception of the BasedOn property, used here for the first time. BasedOn allows you to inherit the characteristics of the GradientButton style and use them as the basis of the new style. Because the GradientButton is a project resource, it is also referred to using the StaticResource keyword.

   The style is assigned a name using the x:Key tag. Two Setter properties apply yellow formatting to the button border and the type displayed in the button. However, in other respects, the button simply inherits the property settings and characteristics of the GradientButton style.

3. Click the MainPage.xaml tab at the top of the Designer.

   Now you’ll reference the YellowGradient style in the markup for the third button on the page.

4. Move the insertion pointer to the Code Editor, and place the pointer between the Button and Content property settings for the third button.

5. Type the following markup to assign the YellowGradient style to the button:

   Style="{StaticResource YellowGradient}"

   The familiar StaticResource keyword is used again to reference the style you want to use. The third button’s design will be based on the style model for the first and second buttons, with yellow formatting added via the new YellowGradient style.

   As soon as you move the insertion point off the third button’s XAML markup, the formatting change takes place. Your screen will look like this:

   

   Click to view larger image

6. Save your changes to the project, and then run the program to see what the new button looks like.

   The Windows Store app starts and the three buttons appear on the screen. You’ll see something like the following illustration. Note that the color yellow in the third button will be distinctive only on the screen in front of you and in the e-book version of this title. The printed book won’t show the yellow formatting.

   

   Click to view larger image

   Even in this simple example, you can see the significant power of XAML styles and how one style design can be used as the basis for addition styles.

7. Exit the My XAML Style Practice application, and display the IDE again.