Walkthrough: Styling WPF Content

This walkthrough show you how to apply styling to a Windows Presentation Foundation (WPF) control hosted on a Windows Form.

In this walkthrough, you perform the following tasks:

• Create the project.

• Create the WPF control type.

• Apply a style to the WPF control.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010.

Creating the Project

The first step is to create the Windows Forms project.

To create the project

• Create a new Windows Forms Application project in Visual Basic or Visual C# named StylingWpfContent. For more information, see How to: Create a New Windows Forms Application Project.

Creating the WPF Control Types

After you add a WPF control type to the project, you can host it in an ElementHost control.

To create WPF control types

1. Add a new WPF UserControl project to the solution. Use the default name for the control type, UserControl1.xaml. For more information, see Walkthrough: Creating New WPF Content on Windows Forms at Design Time.

2. In Design view, make sure that UserControl1 is selected. For more information, see How to: Select and Move Elements on the Design Surface.

3. In the Properties window, set the value of the Width and Height properties to 200.

4. Add a System.Windows.Controls.Button control to the UserControl and set the value of the Content property to Cancel.

5. Add a second System.Windows.Controls.Button control to the UserControl and set the value of the Content property to OK.

6. Build the project.

Applying a Style to a WPF Control

You can apply different styling to a WPF control to change its appearance and behavior.

To apply a style to a WPF control

1. Open Form1 in the Windows Forms Designer.

2. In the Toolbox, double-click UserControl1 to create an instance of UserControl1 on the form.

   An instance of UserControl1 is hosted in a new ElementHost control named elementHost1.

3. In the smart tag panel for elementHost1, click Edit Hosted Content from the drop-down list.

   UserControl1 opens in the WPF Designer.

4. In XAML view, insert the following XAML after the <UserControl> opening tag.

   This XAML creates a gradient with a contrasting gradient border. When the control is clicked, the gradients are changed to generate a pressed button look. For more information, see Styling and Templating.

    <UserControl.Resources>
        <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF" Offset="0.0"/>
            <GradientStop Color="#CCC" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#BBB" Offset="0.0"/>
            <GradientStop Color="#EEE" Offset="0.1"/>
            <GradientStop Color="#EEE" Offset="0.9"/>
            <GradientStop Color="#FFF" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="BorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#444" Offset="0.0"/>
            <GradientStop Color="#888" Offset="1.0"/>
        </LinearGradientBrush>
        
        <Style x:Key="SimpleButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
            <Setter Property="Background" Value="{StaticResource NormalBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="Grid">
                            <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" Value="{StaticResource PressedBrush}" TargetName="Border"/>
                                <Setter Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" TargetName="Border"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

1. Apply the SimpleButton style defined in the previous step to the Cancel button by inserting the following XAML in the <Button> tag of the Cancel button.

   Style="{StaticResource SimpleButton}
   

   Your button declaration will resemble the following XAML.

<Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
                Style="{StaticResource SimpleButton}">Cancel</Button>

1. Build the project.

2. Open Form1 in the Windows Forms Designer.

3. The new style is applied to the button control.

4. From the Debug menu, select Start Debugging to run the application.

5. Click the OK and Cancel buttons and view the differences.

See Also

Reference

ElementHost

WindowsFormsHost

Concepts

XAML Overview (WPF)

Styling and Templating

Other Resources

Migration and Interoperability

Using WPF Controls

WPF Designer