Procédure pas à pas : application de styles au contenu WPF
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 allez effectuer les tâches suivantes :
créer le projet ;
créer le type de contrôle WPF ;
appliquer un style au contrôle WPF.
Notes
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 Utilisation des paramètres.
Composants requis
Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :
- Visual Studio 2010.
Création du projet
La première étape consiste à créer le projet Windows Forms.
Notes
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 Forms.
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
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 les Windows Forms au moment du design.
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.
Dans la fenêtre Propriétés, affectez aux propriétés Width et Height la valeur 200.
Ajoutez un contrôle System.Windows.Controls.Button au UserControl et affectez la valeur Annuler à la propriété Content.
Ajoutez un second contrôle System.Windows.Controls.Button au UserControl et affectez la valeur OK à la propriété Content.
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
Ouvrez Form1 dans le Concepteur Windows Forms.
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.
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.
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.
<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>
Appliquez le style SimpleButton défini à l'étape précédente au bouton Annuler en insérant l'élément XAML suivant dans la balise <Button> du bouton Annuler.
Style="{StaticResource SimpleButton}Votre déclaration de bouton ressemblera à l'élément XAML suivant.
<Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
Style="{StaticResource SimpleButton}">Cancel</Button>
Générez le projet.
Ouvrez Form1 dans le Concepteur Windows Forms.
Le nouveau style est appliqué au contrôle bouton.
Dans le menu Débogage, sélectionnez Démarrer le débogage pour exécuter l'application.
Cliquez sur les boutons Annuler et OK et regardez les différences.
Voir aussi
Référence
Concepts
Vue d'ensemble du langage XAML (WPF)
Application d'un style et création de modèles