Procédure pas à pas : application de styles au contenu Windows Presentation Foundation

Mise à jour : novembre 2007

Cette procédure pas à pas vous indique comment appliquer des styles à un contrôle WPF (Windows Presentation Foundation) hébergé sur un Windows Form.

Dans cette procédure pas à pas, vous exécutez les tâches suivantes :

• créer le projet ;

• créer le type de contrôle WPF ;

• appliquer un style au contrôle WPF.

Remarque :
Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Paramètres Visual Studio.

Composants requis

Vous avez besoin des composants suivants pour exécuter cette procédure pas à pas :

• Visual Studio 2008.

Création du projet

La première étape consiste à créer le projet Windows Forms.

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

Pour créer le projet

• Créez un projet Application Windows Forms dans Visual Basic ou Visual C# nommé StylingWpfContent. Pour plus d'informations, consultez Comment : créer un projet d'application Windows.

Création des types de contrôles WPF

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

Pour créer les types de contrôles WPF

1. Ajoutez un nouveau composant au projet UserControl. 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 Windows Presentation Foundation sur les Windows Forms au moment du design.

2. En mode Design, assurez-vous que UserControl1 est sélectionné. Pour plus d'informations, consultez Comment : sélectionner et déplacer des éléments sur l'aire de conception.

3. Dans la fenêtre Propriétés, affectez aux propriétés Width et Height la valeur 200.

4. Ajoutez un contrôle System.Windows.Controls.Button au UserControl et affectez à la propriété Content la valeur Annuler.

5. Ajoutez un second contrôle System.Windows.Controls.Button au UserControl et affectez à la propriété Content la valeur OK.

6. Générez le projet.

Application d'un style à un contrôle WPF

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

Appliquer un style à un contrôle WPF

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.

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

3. Dans le panneau des balises actives pour elementHost1, cliquez sur Modifier le contenu hébergé dans la liste déroulante.

   UserControl1 s'ouvre dans le Concepteur WPF.

4. Dans l'affichage XAML, insérez l'élément XAML suivant après la balise d'ouverture de <UserControl>.

   Cet élément XAML crée un gradient avec une bordure dégradée contrastée. Lorsque le contrôle fait l'objet d'un clic, les gradients 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.

[xaml]

    <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>

[xaml]

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

Voir aussi

Concepts

Vue d'ensemble du langage XAML

Application d'un style et création de modèles

Référence

ElementHost

WindowsFormsHost

Autres ressources

Migration et interopérabilité

Utilisation des contrôles Windows Presentation Foundation

Concepteur WPF