Tutorial: Aplicar estilos al contenido de Windows Presentation Foundation

Actualización: noviembre 2007

En este tutorial se explica cómo aplicar estilo a un control de Windows Presentation Foundation (WPF) hospedado en un formulario Windows Forms.

Realizará las tareas siguientes:

• Crear el proyecto.

• Crear el tipo de control de WPF.

• Aplicar un estilo al control de WPF.

Nota:
Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, dependiendo de los valores de configuración o de edición activos. Para cambiar la configuración, elija Importar y exportar configuraciones en el menú Herramientas. Para obtener más información, consulte Valores de configuración de Visual Studio.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio 2008.

Creación del proyecto

El primer paso es crear el proyecto de formularios Windows Forms.

Nota:
Cuando se hospeda contenido WPF, sólo se admiten proyectos de C# y Visual Basic.

Para crear el proyecto

• Cree un nuevo proyecto de aplicación de formularios Windows Forms en Visual Basic o Visual C# denominado StylingWpfContent. Para obtener más información, consulte Cómo: Crear un proyecto de aplicación para Windows.

Crear los tipos de controles de WPF

Después de agregar un tipo de control de WPF al proyecto, puede hospedarlo en un control ElementHost.

Para crear tipos de controles de WPF

1. Agregue un nuevo objeto UserControl de WPF al proyecto. Use el nombre predeterminado para el tipo de control, UserControl1.xaml. Para obtener más información, consulte Tutorial: Crear nuevo contenido de Windows Presentation Foundation en formularios Windows Forms en tiempo de diseño.

2. En la vista Diseño, asegúrese de que UserControl1 está seleccionado. Para obtener más información, consulte Cómo: Seleccionar y mover elementos en la superficie de diseño.

3. En la ventana Propiedades, establezca el valor de las propiedades Width y Height en 200.

4. Agregue un control System.Windows.Controls.Button a UserControl y establezca el valor de la propiedad Content en Cancelar.

5. Agregue un segundo control System.Windows.Controls.Button a UserControl y establezca el valor de la propiedad Content en Aceptar.

6. Genere el proyecto.

Aplicar un estilo a un control de WPF

Puede aplicar estilos diferentes a un control de WPF para cambiar su aspecto y comportamiento.

Para aplicar un estilo a un control de WPF

1. Abra Form1 en el Diseñador de Windows Forms.

2. En el Cuadro de herramientas, haga doble clic en UserControl1 para crear una instancia de UserControl1 en el formulario.

   Una instancia de UserControl1 se hospeda en un nuevo control ElementHost denominado elementHost1.

3. En el panel de etiquetas inteligentes de elementHost1, haga clic en Editar contenido hospedado en la lista desplegable.

   UserControl1 se abre en el WPF Designer.

4. En la vista XAML, inserte el siguiente marcado XAML después de la etiqueta de apertura de <UserControl>.

   Este marcado XAML crea un degradado con un borde de degradado que contraste. Al hacer clic en el control, los degradados cambian para producir el aspecto de un botón presionado. Para obtener más información, consulte Aplicar estilos y plantillas.

[xaml]

    <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>

[xaml]

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

Vea también

Conceptos

Información general sobre XAML

Aplicar estilos y plantillas

Referencia

ElementHost

WindowsFormsHost

Otros recursos

Migración e interoperabilidad

Usar controles de Windows Presentation Foundation

WPF Designer