Partager via

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.

Conditions préalables

Vous avez besoin de Visual Studio pour effectuer cette procédure pas à pas.

Créer le projet

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

Note

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

Créer les types de contrôle WPF

Après avoir ajouté un type de contrôle WPF au projet, vous pouvez l’héberger dans un contrôle ElementHost.

  1. Ajoutez un nouveau projet de UserControl WPF à la solution. Utilisez le nom par défaut pour le type de contrôle, UserControl1.xaml. Pour plus d'informations, consultez guide : création de contenu WPF sur Windows Forms à l'étape de conception.

  2. En mode Création, vérifiez que UserControl1 est sélectionné.

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

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

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

  6. Construisez 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 sur UserControl1 pour créer une instance de UserControl1 sur le formulaire.

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

  3. Dans le volet des balises intelligentes 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 la balise d’ouverture <UserControl>. Ce code XAML crée un dégradé avec une bordure de dégradé contrastée. Lorsque le contrôle est cliqué, les dégradés sont modifiés pour générer une apparence de bouton enfoncé. Pour plus d'informations, consultez Mise en forme et Gestion des 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 style défini à l’étape précédente au bouton Annuler en insérant le code XAML suivant dans la 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. Construisez le projet.

  7. Ouvrez Form1 dans le Concepteur Windows Forms.

  8. Le nouveau style est appliqué au contrôle 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