web-dev-qa-db-fra.com

Appliquer le style des boutons dans toutes les fenêtres de WPF

J'ai une configuration de style dans mon XAML pour la création de coins arrondis Buttons dans ma fenêtre WPF. Je voudrais que ce style s'applique à tous les boutons de toutes les fenêtres de mon application.

Existe-t-il un moyen, similaire à CSS, que je puisse mettre cela dans un autre fichier et le référencer d'une manière ou d'une autre dans toutes mes fenêtres? Ou dois-je simplement le copier et le coller à chaque fois.

wpfxamlbuttonstyles
32
PiousVenom

Vous pouvez utiliser les ressources de l'application pour ce faire.

Voici un peu de code par exemple (dans app.xaml)

<Application.Resources>
  <Style TargetType="Button" x:Key="GelButton" >
     <Setter Property="Margin" Value="1,2,1,2"/>
     <Setter Property="HorizontalAlignment" Value="Left"/>
  </Style>
</Application.Resources>

puis, pour vos boutons (par exemple):

<Button Height="50" Width="250" Style="{StaticResource GelButton}" Content="Button 1" />
<Button Height="50" Width="250" Style="{StaticResource GelButton}" Content="Button 2" />

J'espère que cela vous aidera à trouver ce que vous cherchez.

38
Gauthier G. Letellier

Si vous voulez le faire d'une manière propre, vous pouvez créer un ResourceDictionary.xaml, qui a la même fonction que CSS dans la conception Web.

Tout d'abord, accédez à votre projet et ajoutez un ResourceDictionary. À l'intérieur, vous pouvez ajouter des styles pour tous les éléments souhaités, par exemple, changer le fond de couleur d'un Button qui s'applique à tous vos boutons:

// Base style for all buttons
<Style TargetType="Button">
    <Setter Property="Background" Value="Red" />
</Style>

Si vous ne spécifiez pas d'identifiant sur chaque Style, ce style s'appliquera à tous les contrôles qui correspondent au TargetType que vous avez spécifié. Si vous voulez que le bouton soit différent, vous pouvez faire la même chose que ci-dessus, mais également inclure un identifiant pour ce style, qui sera utilisé par chaque bouton différent:

// Specific style for blue buttons
<Style TargetType="Button" x:Key="BlueButton">
    <Setter Property="Background" Value="Blue" />
</Style>

Ensuite, sur chaque .xaml que vous souhaitez appliquer les styles, vous devez ajouter la référence à ce ResourceDictionary.xaml que vous créez:

<Window.... >
    <Window.References>
        <ResourceDictionary>
           <ResourceDictionary Source="MyResourceDictionary.xaml" />
        </ResourceDictionary>
    </Window.References>

    <Grid>
       <Button Content="Button with red background" />
       <Button Style="{StaticResource BlueButton}" Content="Button with blue background" />
    </Grid>
</Window>

Je pense que c'est ce que vous recherchez.

Si vous souhaitez dessiner un bouton arrondi, vous devez remplacer la propriété Template du bouton. Cela signifie que vous devez indiquer au bouton chaque action qu'il doit effectuer à partir du moment où vous l'ignorez. Voir ici . Donc, dans un concept petit et réduit, vous aimeriez écrire quelque chose comme ceci:

<Style TargetType="Button">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Background" Value="DarkBlue" />
    <Setter Property="Width" Value="150" />
    <Setter Property="Height" Value="35" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="FontFamily" Value="Calibri" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}"
                    BorderBrush="LightBlue" BorderThickness="1" CornerRadius="15,0,15,0" x:Name="bd">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="bd" Property="Background" Value="LightGray"/>
                        <Setter Property="Foreground" Value="White" />
                        <Setter Property="Cursor" Value="Hand" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Voyez qu'ici, je remplace toutes les propriétés de base nécessaires pour dessiner un bouton fonctionnel de base, comme Foreground, Background, Width... et l'événement MouseOver, pour changer de couleur en passant la souris dessus. La propriété CornerRadius de Border à l'intérieur de ControlTemplate est le rayon que vous recherchez.

Donc, fondamentalement, vous remplacez la propriété border qui vient par défaut pour tous les boutons.

64
Sonhja

Dictionnaire de référence Google. Vous pouvez y mettre tous vos styles. puis, ajoutez-y simplement une "référence" dans votre fenêtre/contrôle utilisateur.

    <UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/SialTPChat.UI.Design;component/Styles/Styles.xaml" />
    </ResourceDictionary>
    </UserControl.Resources>

Désormais, tous les styles du fichier XAML référencé ci-dessus seront appliqués à tous les objets du contrôle utilisateur.

2
Jeff

Le moyen le plus simple selon moi est:

  1. Clic droit sur un bouton dans l'aire de conception

  2. Choisissez Modifier le modèle-> Modifier une copie

  3. Choisissez le bouton radio "Définir dans l'application"

  4. Le style sera créé dans le fichier App.xaml

  5. Ajoutez cette ressource à chaque bouton en utilisant la balise "style"

2
Bibaswann Bandyopadhyay