Microsoft Visual Basic 2013 Step by Step: Using XAML Styles
- 11/15/2013
Practicing XAML styles
Complete the following steps to create a new Windows Store app named My XAML Style Practice. In this exercise, you will create three button objects on the page, and you will format two of them with an explicit style named GradientButton.
GradientButton is a custom style resource that you will define in App.xaml so that it can be used throughout the program. It formats the buttons that reference it with a blended, gradient effect that transitions gradually from black to white. Because the formatting effect involves some rather complex brush formatting, it is a good candidate for a new style resource that can be used over and over again in a project. The gradient effect will look great on the screen or in an e-book. (It will be more subtle in the printed version of this book.)
Create a new style in App.xaml
Start Visual Studio, and click New Project to open a new Visual Studio application.
Choose Visual Basic/Windows Store under Templates, and then verify that the Blank App (XAML) template is selected.
Type My XAML Style Practice in the Name text box.
Click OK to open and configure the project.
Visual Studio creates a new Windows Store app with the appropriate supporting files. After a moment, you’ll see the App.xaml.vb code-behind file for the Blank App template in the Code Editor.
Now you’ll open the App.xaml file so that you can add a new style definition to it.
In Solution Explorer, right-click the file App.xaml, and then click the View Designer command.
A new tab opens in the Code Editor, and the App.xaml file is loaded into it. Your screen should look like this:
The root element in the App.xaml file is Application, so the XAML document is defined between the <Application and </Application> tags. You’ll create an <Application.Resources> section here with room for several <Style> definitions.
Move the insertion point below the line containing xmlns:local=“using:XAML_Style_Practice”>, press Enter, and then type the following markup to define a new style named GradientButton:
<Application.Resources> <Style x:Key="GradientButton" TargetType="Button"> <Setter Property="FontSize" Value="28"/> <Setter Property="Background" > <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> </Style> </Application.Resources>Your Code Editor should now look like this:
The <Application.Resources> tag indicates that a collection of application-scoped resources is being defined in the App.xaml file, which will be valid (or have scope) throughout the entire project. Although you will be adding only styles to this collection, you could also add templates or brushes to it as well. Note that this resource collection is XAML-based and not something that is stored in the Assets folder, which you have used to store artwork and media files.
The <Style> tag indicates that a new style resource is being added to the XAML resource collection. The style is given a name through the x:Key tag, and the control type is set to “Button” using the TargetType property. Two additional properties are now added to the style using the Setter property. The first assigns a value of 28 to the FontSize property, increasing the default font size for a button object to 28-point. This is a straightforward use of the Setter property that we have seen several times in the standard syntax for a new style definition.
However, the Background property assignment for the button is a little more complex. Because Background can be assigned a collection of property settings, I’ve used the <Setter.Value> tag to allow for several values, including LinearGradientBrush, EndPoint, StartPoint, GradientStop, and Color. These values collectively create a transitional gradient effect that moves from solid black to white on the button’s surface. (If you were setting these properties using the Properties window, you would fill out a property page that contains numerous settings and values.)
Now it’s time to test this new explicit style. Complete the following steps to add some buttons to the user interface and reference the style.
In Solution Explorer, double-click the file MainPage.xaml.
Visual Studio opens MainPage.xaml in the Designer, the primary page in your Windows Store app.
Open the Toolbox, and double-click the Button control three times to create three button unique objects on the page.
Because you didn’t specify a location, the buttons will be stacked one on top of the other in the upper-left corner of the page.
Enlarge the buttons and position them on the page in a row so that there is a little space between them. However, don’t adjust the default FontSize property.
Your page should now look something like this:
Notice that the buttons do not yet reflect the new style that you created. This is because the GradientButton style is explicit and must be referenced specifically in the XAML markup for the button objects. You’ll reference the style name now for two of the three buttons to see how the process works.
Move the insertion pointer to the XAML tab of the Code Editor, and place the pointer between the Button object name and the Content property setting for the first button.
Type the following markup to assign the GradientButton style to the button:
Style="{StaticResource GradientButton}"This XAML uses the StaticResource keyword to let Visual Studio know that you are using a named resource in the project. Be sure to include the curly brackets and quotes, which are used to identify a resource in the project. When you move the insertion pointer to a new line, the button on the page displays the gradient formatting effect and the size of the type in the button is also enlarged.
Add the same markup defining the XAML style to the second button object in the Code Editor, placing the Style reference in the same location on the line.
The second button immediately reflects the style change that you made, a reference to the explicit style defined in App.xaml. Your screen will look like this:
Basically, because you defined the style as an explicit style, you can use the style resource on whichever button you prefer in the project. Only the buttons that refer to GradientButton by name will be formatted according to the new style.
Save your project and specify the My Documents\Visual Basic 2012 SBS\Chapter 08 folder as the location.
Now run the project to see how the buttons look when they are part of a demonstration program running under Windows 8.1.
The program begins, and the buttons appear on screen as they did in the Visual Studio Designer. You’ll see something like the following illustration:
The buttons aren’t truly functional now, of course—you haven’t defined event handlers that do anything when the user clicks the buttons. But you’ve learned important lessons about how XAML styles can be used to create consistent and interesting formatting effects, which will save you considerable time as you tackle larger development projects.
Close the My XAML Style Practice app.
The IDE reappears with the page you’ve been configuring in the Designer.
)
)
)
)
)
Now you’re ready to learn another important technique related to XAML styles and user interface construction.