Compartir a través de

Tutorial: Estilo de contenido de WPF

En este artículo se muestra cómo aplicar estilos a un control de Windows Presentation Foundation (WPF) hospedado en un formulario Windows Forms.

Prerrequisitos

Necesita Visual Studio para completar este tutorial.

Creación del proyecto

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

Nota:

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

Crear los tipos de control WPF

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

  1. Agregue un nuevo proyecto de WPF UserControl a la solución. Use el nombre predeterminado para el tipo de control, UserControl1.xaml. Para obtener más información, vea Guía paso a paso: Crear nuevo contenido de WPF en tiempo de diseño en formularios de Windows Forms.

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

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

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

  5. Agregue un segundo System.Windows.Controls.Button control a UserControl y establezca el valor de la Content propiedad 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 UserControl1 para crear una instancia de UserControl1 en el formulario.

    Una instancia de UserControl1 se hospeda en un nuevo ElementHost control 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 WPF Designer.

  4. En la vista XAML, inserte el siguiente XAML después de la etiqueta de apertura <UserControl>. Este XAML crea un degradado con un borde de gradiente contrastante. Cuando se hace clic en el control, los degradados se cambian para generar una apariencia de 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>

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

    Style="{StaticResource SimpleButton}

    La declaración del botón será similar a la siguiente XAML:

    <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