IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Windows Presentation Foundation Discussion :

Réaliser un style pour une barre de menu


Sujet :

Windows Presentation Foundation

  1. #1
    Membre actif Avatar de Masmeta
    Homme Profil pro
    Ing. R&D informatique industrielle
    Inscrit en
    Mai 2006
    Messages
    472
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Ing. R&D informatique industrielle
    Secteur : Industrie

    Informations forums :
    Inscription : Mai 2006
    Messages : 472
    Points : 221
    Points
    221
    Par défaut Réaliser un style pour une barre de menu
    Bonjour à tous

    J'applique un style à mes menus, menus items et séparateur. Cependant le style pour le séparateur n'est pas appliqué (ci joint photo Nom : Menu .png
Affichages : 62
Taille : 3,9 Ko).

    Le code est le suivant.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
     
                              <Style TargetType="{x:Type Menu}">
                                    <Setter Property="Foreground" Value="White"/>
                                    <Setter Property="FontSize" Value="14"/>
                                    <Setter Property="FontFamily" Value="Arial"/>
                                    <Setter Property="FontWeight" Value="Bold"/>
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FF46738A" Offset="1"/>
                                                <GradientStop Color="#FF46738A"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
     
     
                                </Style>
                                <Style TargetType="{x:Type MenuItem}">
                                    <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/>
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FF46738A" Offset="1"/>
                                                <GradientStop Color="#FF46738A"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Height" Value="28"/>
                                    <Setter Property="VerticalAlignment" Value="Center"/>
                                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type MenuItem}">
                                                <Border x:Name="Border"
                                                    Background="{TemplateBinding Background}"
                                                    BorderBrush="{x:Null}"
                                                    BorderThickness="0">
                                                    <Grid >
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition x:Name="Col0" MinWidth="20" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
                                                            <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
                                                            <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
                                                            <ColumnDefinition x:Name="Col3" Width="16"/>
                                                        </Grid.ColumnDefinitions>
     
                                                        <!-- ContentPresenter to show an Icon if needed -->
                                                        <ContentPresenter Grid.Column="0" Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
     
                                                        <!-- Glyph is a checkmark if needed for a checkable menu -->
                                                        <Grid Grid.Column="0" Visibility="Hidden" Margin="6,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center" HorizontalAlignment="Center">
                                                            <Path x:Name="GlyphPanelpath" VerticalAlignment="Stretch" Fill="{TemplateBinding Background}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
                                                        </Grid>
     
                                                        <!-- Content for the menu text etc -->
                                                        <ContentPresenter Grid.Column="1"
                                              Margin="3,3,3,3"
                                              x:Name="HeaderHost"
                                              RecognizesAccessKey="True"
                                              ContentSource="Header"/>
     
                                                        <!-- Content for the menu IGT -->
                                                        <ContentPresenter Grid.Column="2" Margin="3,0,3,0" x:Name="IGTHost" ContentSource="InputGestureText" VerticalAlignment="Center"/>
     
                                                        <!-- Arrow drawn path which points to the next level of the menu -->
                                                        <Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
                                                            <Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
                                                        </Grid>
     
                                                        <!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
                                                        <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
                                                            <Border x:Name="SubMenuBorder" BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" BorderThickness="0" Padding="0">
                                                                <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
                                                                    <!-- StackPanel holds children of the menu. This is set by IsItemsHost=True -->
                                                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
                                                                </Grid>
                                                            </Border>
                                                        </Popup>
                                                    </Grid>
     
                                                </Border>
     
                                                <!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
                                                <ControlTemplate.Triggers>
                                                    <!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
                                                    <Trigger Property="Role" Value="TopLevelHeader">
                                                        <Setter Property="Padding" Value="2,1,6,1"/>
                                                        <Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
                                                        <Setter Property="MinWidth" Value="0" TargetName="Col0"/>
                                                        <Setter Property="Width" Value="Auto" TargetName="Col3"/>
                                                        <Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
                                                        <Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>
                                                        <Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>
                                                        <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
                                                    </Trigger>
     
                                                    <!-- Role = TopLevelItem :  this is a child menu item from the top level without any child items-->
                                                    <Trigger Property="Role" Value="TopLevelItem">
                                                        <Setter Property="Padding" Value="0,1,0,1"/>
                                                        <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
                                                    </Trigger>
     
                                                    <!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
                                                    <Trigger Property="Role" Value="SubmenuHeader">
                                                        <Setter Property="DockPanel.Dock" Value="Top"/>
                                                        <Setter Property="Padding" Value="0,2,0,2"/>
                                                    </Trigger>
     
                                                    <!-- Role = SubMenuItem : this is a child menu item which has children-->
                                                    <Trigger Property="Role" Value="SubmenuItem">
                                                        <Setter Property="DockPanel.Dock" Value="Top"/>
                                                        <Setter Property="Padding" Value="0,1,0,1"/>
                                                        <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
                                                    </Trigger>
                                                    <Trigger Property="IsSuspendingPopupAnimation" Value="true">
                                                        <Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
                                                    </Trigger>
     
                                                    <!-- If no Icon is present the we collapse the Icon Content -->
                                                    <Trigger Property="Icon" Value="{x:Null}">
                                                        <Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
                                                    </Trigger>
     
                                                    <!-- The GlyphPanel contains the CheckMark -->
                                                    <Trigger Property="IsChecked" Value="true">
                                                        <Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
                                                        <Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
                                                    </Trigger>
     
                                                    <!-- Using the system colors for the Menu Highlight and IsEnabled-->
                                                    <Trigger Property="IsHighlighted" Value="true">
                                                        <Setter Property="Background" TargetName="Border">
                                                            <Setter.Value>
                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                    <GradientStop Color="#FF6E97B7" Offset="1"/>
                                                                    <GradientStop Color="WhiteSmoke"/>
                                                                </LinearGradientBrush>
                                                            </Setter.Value>
                                                        </Setter>
     
                                                    </Trigger>
                                                    <Trigger Property="IsEnabled" Value="false">
                                                        <Setter Property="Foreground" Value="LightGray"/>
                                                    </Trigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
     
                                <Style TargetType="{x:Type Separator}">
     
                                    <Setter Property="Margin" Value="0,2,0,2"/>
                                    <Setter Property="Focusable" Value="false"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type Separator}">
                                                <Border BorderBrush="{TemplateBinding BorderBrush}" 
                                                        BorderThickness="{TemplateBinding BorderThickness}" 
                                                        Background="{TemplateBinding Background}" 
                                                        Height="1" 
                                                        SnapsToDevicePixels="true"/>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
    Pouvez vous m'aider à trouver le problème?
    merci de votre aide.
    "Nulla Tenaci Invia Est Via"
    Aux persévérants aucune route n'est interdite

  2. #2
    Rédacteur/Modérateur


    Homme Profil pro
    Développeur .NET
    Inscrit en
    Février 2004
    Messages
    19 875
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2004
    Messages : 19 875
    Points : 39 749
    Points
    39 749
    Par défaut
    Un séparateur ne s'utilise pas seulement dans un menu, il a donc différents styles selon le contexte où il est utilisé. Pour son style dans un menu, il faut utiliser {x:Static MenuItem.SeparatorStyleKey} comme clé, et non {x:Type Separator}.

  3. #3
    Membre actif Avatar de Masmeta
    Homme Profil pro
    Ing. R&D informatique industrielle
    Inscrit en
    Mai 2006
    Messages
    472
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Ing. R&D informatique industrielle
    Secteur : Industrie

    Informations forums :
    Inscription : Mai 2006
    Messages : 472
    Points : 221
    Points
    221
    Par défaut
    Merci de ton aide
    Je n'avais pas bien compris le principe du séparateur. J'ai modifié mon code, cependant le background n'est toujours pas appliqué, malgré que le style soit lui pris en compte.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
     <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="{x:Type Separator}">
            <Setter Property="Height" Value="3"/>
            <Setter Property="Margin" Value="20,0,20,0"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Background" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type MenuItem}}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Separator}">
                        <Border BorderBrush="White" 
                                Background="{TemplateBinding Background}"
                                BorderThickness="2" 
                                Height="2" 
                                SnapsToDevicePixels="true"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    "Nulla Tenaci Invia Est Via"
    Aux persévérants aucune route n'est interdite

  4. #4
    Rédacteur/Modérateur


    Homme Profil pro
    Développeur .NET
    Inscrit en
    Février 2004
    Messages
    19 875
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2004
    Messages : 19 875
    Points : 39 749
    Points
    39 749
    Par défaut
    Tu as bindé le background du séparateur avec celui du MenuItem parent (AncestorType=MenuItem), mais il n'est pas forcément dans un MenuItem, il est peut-être directement dans un Menu ou un ContextMenu, et donc il trouve pas le MenuItem parent. Mets plutôt directement la Brush que tu veux

  5. #5
    Membre actif Avatar de Masmeta
    Homme Profil pro
    Ing. R&D informatique industrielle
    Inscrit en
    Mai 2006
    Messages
    472
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Ing. R&D informatique industrielle
    Secteur : Industrie

    Informations forums :
    Inscription : Mai 2006
    Messages : 472
    Points : 221
    Points
    221
    Par défaut
    J'ai testé ce code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
     <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="{x:Type Separator}">
            <Setter Property="Height" Value="2"/>
            <Setter Property="Margin" Value="20,0,20,0"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Separator}">
                        <Border BorderBrush="White" 
                                Background="Green"
                                BorderThickness="2" 
                                Height="2" 
                                SnapsToDevicePixels="true"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
    Le borderbrush est bien pris en compte, mais le background reste noir au lieu d'être vert. Je vais faire simple et mettre aucun margin comme cela j'aurais une barre blanche uniquement.
    Est ce que le style du menuitem peut bloquer l'application du background du separator?
    "Nulla Tenaci Invia Est Via"
    Aux persévérants aucune route n'est interdite

  6. #6
    Rédacteur/Modérateur


    Homme Profil pro
    Développeur .NET
    Inscrit en
    Février 2004
    Messages
    19 875
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2004
    Messages : 19 875
    Points : 39 749
    Points
    39 749
    Par défaut
    Citation Envoyé par Masmeta Voir le message
    Le borderbrush est bien pris en compte, mais le background reste noir au lieu d'être vert.
    Bah ta Border fait 2 pixels de haut, avec une bordure de 2 pixels, donc il y a aucun background à afficher... à quel endroit tu vois du noir ? Montre un screenshot

    Citation Envoyé par Masmeta Voir le message
    Est ce que le style du menuitem peut bloquer l'application du background du separator?
    Non

  7. #7
    Rédacteur/Modérateur


    Homme Profil pro
    Développeur .NET
    Inscrit en
    Février 2004
    Messages
    19 875
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2004
    Messages : 19 875
    Points : 39 749
    Points
    39 749
    Par défaut
    Citation Envoyé par Masmeta Voir le message
    Le borderbrush est bien pris en compte, mais le background reste noir au lieu d'être vert.
    Bah ta Border fait 2 pixels de haut, avec une bordure de 2 pixels, donc il y a aucun background à afficher... à quel endroit tu vois du noir ? Montre un screenshot

    Le noir, ce serait pas tout simplement le Background du menu lui-même ?

    Citation Envoyé par Masmeta Voir le message
    Est ce que le style du menuitem peut bloquer l'application du background du separator?
    Non

  8. #8
    Membre actif Avatar de Masmeta
    Homme Profil pro
    Ing. R&D informatique industrielle
    Inscrit en
    Mai 2006
    Messages
    472
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Ing. R&D informatique industrielle
    Secteur : Industrie

    Informations forums :
    Inscription : Mai 2006
    Messages : 472
    Points : 221
    Points
    221
    Par défaut
    Désolé j'ai modifié pour avoir uniquement le trait blanc.
    Code pour le screenshot
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
     <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="{x:Type Separator}">
            <Setter Property="Height" Value="10"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Separator}">
                        <Border BorderBrush="White" 
                                Background="Green"
                                BorderThickness="2" 
                                Height="2" 
                                SnapsToDevicePixels="true"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    Screenshot :
    Nom : Menu.png
Affichages : 63
Taille : 2,3 Ko
    "Nulla Tenaci Invia Est Via"
    Aux persévérants aucune route n'est interdite

  9. #9
    Rédacteur/Modérateur


    Homme Profil pro
    Développeur .NET
    Inscrit en
    Février 2004
    Messages
    19 875
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2004
    Messages : 19 875
    Points : 39 749
    Points
    39 749
    Par défaut
    Bah là je vois pas trop d'où vient ce noir...

  10. #10
    Membre actif Avatar de Masmeta
    Homme Profil pro
    Ing. R&D informatique industrielle
    Inscrit en
    Mai 2006
    Messages
    472
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Ing. R&D informatique industrielle
    Secteur : Industrie

    Informations forums :
    Inscription : Mai 2006
    Messages : 472
    Points : 221
    Points
    221
    Par défaut
    je suis comme toi. Tant pis, le séparateur sera blanc uniquement.
    "Nulla Tenaci Invia Est Via"
    Aux persévérants aucune route n'est interdite

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [DEV] créer une barre de menu en java style mac os X
    Par didi dans le forum Développement OS X
    Réponses: 11
    Dernier message: 31/05/2008, 01h16
  2. Quel langage pour une barre pour navigateur web type google bar ?
    Par ido_web dans le forum Langages de programmation
    Réponses: 1
    Dernier message: 16/05/2006, 16h32
  3. [MFC] activer une commande d'une barre de menu
    Par kabil.cpp dans le forum MFC
    Réponses: 4
    Dernier message: 05/05/2006, 11h25
  4. Ouvrir une popup en plein écran avec une barre de menu.
    Par magic8392 dans le forum Général JavaScript
    Réponses: 21
    Dernier message: 12/10/2005, 11h43
  5. Comment faire une Barre de Menu?
    Par gamerome dans le forum OpenGL
    Réponses: 5
    Dernier message: 18/02/2005, 15h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo