Procédure pas à pas : Style du contenu WPF

  • Article

Cet article vous montre comment appliquer un style à un contrôle WPF (Windows Presentation Foundation) hébergé sur un Windows Form.

Prérequis

Cette procédure pas à pas nécessite Visual Studio.

Créer le projet

Ouvrez Visual Studio et créez un projet d’application Windows Forms dans Visual Basic ou Visual C# nommé StylingWpfContent.

Remarque

Lors de l'hébergement de contenu WPF, seuls les projets Visual Basic et C# sont pris en charge.

Créer les types de contrôle WPF

Une fois que vous avez ajouté un type de contrôle WPF au projet, vous pouvez l'héberger dans un contrôle ElementHost.

  1. Ajoutez un nouveau projet UserControl WPF à la solution. Utilisez le nom par défaut pour le type de contrôle, UserControl1.xaml. Pour plus d’informations, consultez Procédure pas à pas : création de contenu WPF sur Windows Forms au moment du design.

  2. En mode Design, assurez-vous que UserControl1 est sélectionné.

  3. Dans la fenêtre Propriétés, définissez la valeur des Width propriétés sur Height 200.

  4. Ajoutez un System.Windows.Controls.Button contrôle à la UserControl propriété et définissez la valeur de la Content propriété sur Cancel.

  5. Ajoutez un deuxième System.Windows.Controls.Button contrôle à la UserControl propriété et définissez la valeur de la Content propriété sur OK.

  6. Créez le projet.

Appliquer un style à un contrôle WPF

Vous pouvez appliquer différents styles à un contrôle WPF pour modifier son apparence et son comportement.

  1. Ouvrez Form1 dans le Concepteur Windows Forms.

  2. Dans la boîte à outils, double-cliquez UserControl1 pour créer une instance du UserControl1 formulaire.

    Une instance de UserControl1 est hébergée dans un nouveau contrôle ElementHost nommé elementHost1.

  3. Dans le volet d’étiquettes actives pour elementHost1, cliquez sur Modifier le contenu hébergé dans la liste déroulante.

    UserControl1 s’ouvre dans le Concepteur WPF.

  4. En mode XAML, insérez le code XAML suivant après l’étiquette d’ouverture <UserControl>. Ce code XAML crée un dégradé avec une bordure de dégradé contrastée. Quand l'utilisateur clique sur le contrôle, les dégradés sont modifiés pour générer une apparence de bouton enfoncé. Pour plus d’informations, consultez Application d’un style et création de modèles.

    <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. Appliquez le SimpleButton style défini à l’étape précédente au bouton Annuler en insérant le code XAML suivant dans la <Button> balise du bouton Annuler .

    Style="{StaticResource SimpleButton}

    Votre déclaration de bouton ressemble au code XAML suivant :

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

  6. Créez le projet.

  7. Ouvrez Form1 dans le Concepteur Windows Forms.

  8. Le nouveau style est appliqué au contrôle de bouton.

  9. Dans le menu Débogage , sélectionnez Démarrer le débogage pour exécuter l’application.

  10. Cliquez sur les boutons OK et Annuler et affichez les différences.

Voir aussi