Tutorial: Aplicar estilos al contenido de WPF

  • Artículo

En este tutorial se muestra cómo aplicar estilos a un control de Windows Presentation Foundation (WPF) hospedado en un Windows Form.

Requisitos previos

Necesita Visual Studio para completar este tutorial.

Crear el proyecto

Abra Visual Studio y cree un proyecto de aplicación de Windows Forms en Visual Basic o Visual C# llamado StylingWpfContent.

Nota

Al hospedar contenido de WPF, solo se admiten proyectos de C# y Visual Basic.

Creación de los tipos de controles de WPF

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

  1. Agregue un nuevo proyecto de UserControl de WPF a la solución. Use el nombre predeterminado del tipo de control, UserControl1.xaml. Para obtener más información, consulte Tutorial: Creación de contenido de WPF en Windows Forms en tiempo de diseño.

  2. En la vista Diseño, asegúrese de que UserControl1 está seleccionado.

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

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

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

  6. Compile el proyecto.

Aplicar un estilo a un control WPF

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

  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.

    La instancia de UserControl1 se hospeda en un nuevo control ElementHost llamado elementHost1.

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

    UserControl1 se abre en WPF Designer.

  4. En la vista XAML, inserte el código XAML siguiente después de la etiqueta de apertura <UserControl>. Este código XAML crea un degradado con un borde de degradado en contraste. Al hacer clic en el control, los degradados cambian para generar el aspecto de un botón presionado. Para obtener más información, consulte 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>

  5. Aplique el estilo SimpleButton definido en el paso anterior al botón Cancelar insertando el código XAML siguiente en la etiqueta <Button> del botón Cancelar.

    Style="{StaticResource SimpleButton}

    La declaración del botón será similar al código XAML siguiente:

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

  6. Compile el proyecto.

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

  8. El nuevo estilo se aplica al control de botón.

  9. En el menú Depurar seleccione Iniciar depuración para ejecutar la aplicación.

  10. Haga clic en los botones Aceptar y Cancelar y vea las diferencias.

Consulte también