Tutorial: Aplicar estilos al contenido de WPF
En este tutorial se explica cómo aplicar estilo a un control de Windows Presentation Foundation (WPF) hospedado en un formulario Windows Forms.
En este tutorial realizará las siguientes tareas:
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, en función de los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. Para obtener más información, vea Trabajar con valores de configuración.
Requisitos previos
Necesita los componentes siguientes para completar este tutorial:
- Visual Studio 2010.
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 nuevo proyecto de aplicación de Windows Forms.
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
Agregue un nuevo proyecto UserControl de WPF a la solución. Use el nombre predeterminado para el tipo de control, UserControl1.xaml. Para obtener más información, vea Tutorial: Crear nuevo contenido de WPF en Windows Forms en tiempo de diseño.
En la vista de 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.
En la ventana Propiedades, establezca el valor de las propiedades Width y Height en 200.
Agregue un control System.Windows.Controls.Button a UserControl y establezca el valor de la propiedad Content en Cancel.
Agregue un segundo control System.Windows.Controls.Button a UserControl y establezca el valor de la propiedad Content en OK.
Compile 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
Abra Form1 en el Diseñador de Windows Forms.
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.
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.
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, vea Aplicar estilos y plantillas.
<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>
Aplique el estilo de SimpleButton definido en el paso anterior al botón Cancelar; para ello, inserte el siguiente código XAML en la etiqueta <Button> del botón Cancelar.
Style="{StaticResource SimpleButton}La declaración del botón será similar al siguiente código XAML.
<Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
Style="{StaticResource SimpleButton}">Cancel</Button>
Compile el proyecto.
Abra Form1 en el Diseñador de Windows Forms.
El nuevo estilo se aplica al control de botón.
Para ejecutar el proyecto, seleccione Iniciar depuración en el menú Depurar.
Haga clic en los botones Aceptar y Cancelar y examine las diferencias.
Vea también
Referencia
Conceptos
Información general sobre XAML (WPF)