Style menu et sous-menu

**kheironn** · 12/04/2011, 11h57

Bonjour,

Ayant un peu de temps libre, j'ai décidé de commencer à apprendre le wpf.
C'est jolie, mais seul assez difficile à appréhender.

Pour le moment, j'essaie de faire une barre de menu digne de ce nom avec un design différent de celui proposé par défaut.

J'ai trouvé du code sur msdn et un ou deux tuto, mais sans explication, ce n'est pas aisé.

Mon problème étant la couleur du texte quand le bouton a la propriété isenabled=false.
je voudais lui donner une autre couleur que ce gris tout moche...
mais comment faire ?

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    <Style TargetType="{x:Type Menu}">
        <Setter Property="Background" Value="BurlyWood" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Foreground" Value="Brown" />
    </Style>

merci d'avance

**binoo** · 12/04/2011, 12h23

Salut,

Le Menu n'est pas le contrôle le plus facile pour commencer à travailler les styles

. Pour redéfinir un menu, il faut jouer sur les styles des Menu et des MenuItem et éventuellement des Separator et ScrollViewer.

Quand tu dis vouloir changer la couleur du texte, ça veut dire que tu vas jouer sur le style des MenuItem. Mais un MenuItem a un style différent suivant le rôle qu'il a (TopLevelHeader, TopLevelItem, SubmenuHeader, SubmenuItem).

Le lien msdn ci-dessous (que tu as peut-être déjà parcouru) le montre :
http://msdn.microsoft.com/fr-fr/library/ms752296.aspx

Voici un bout de code que je récupère de ce lien pour les MenuItem :

Code xml :

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
<!-- MenuItem Style -->
<Style x:Key="{x:Type MenuItem}"
       TargetType="{x:Type MenuItem}">
  <Setter Property="OverridesDefaultStyle"
          Value="True" />
  <Style.Triggers>
    <Trigger Property="Role"
             Value="TopLevelHeader">
      <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}" />
      <Setter Property="Grid.IsSharedSizeScope"
              Value="true" />
    </Trigger>
    <Trigger Property="Role"
             Value="TopLevelItem">
      <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}" />
    </Trigger>
    <Trigger Property="Role"
             Value="SubmenuHeader">
      <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}" />
    </Trigger>
    <Trigger Property="Role"
             Value="SubmenuItem">
      <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}" />
    </Trigger>
  </Style.Triggers>
</Style>

Tu peux y voir des trigger sur les différents rôles qui vont affecter le style (ControlTemplate) adéquat.

Si maintenant, je reprend le style du rôle TopLevelItem, il y a un trigger sur la propriété IsEnabled dans lequel la couleur du texte est affectée :

Code xml :

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
<!-- TopLevelItem -->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}"
                 TargetType="{x:Type MenuItem}">
  <Border x:Name="Border">
    <Grid>
      <ContentPresenter Margin="6,3,6,3"
                        ContentSource="Header"
                        RecognizesAccessKey="True" />
    </Grid>
  </Border>
  <ControlTemplate.Triggers>
    <Trigger Property="IsHighlighted"
             Value="true">
      <Setter Property="Background"
              TargetName="Border">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0,0"
                               EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
              <GradientStopCollection>
                <GradientStop Color="{StaticResource ControlLightColor}" />
                <GradientStop Color="{StaticResource ControlMouseOverColor}"
                              Offset="1.0" />
              </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
 
        </Setter.Value>
      </Setter>
    </Trigger>
    <Trigger Property="IsEnabled"
             Value="False">
      <Setter Property="Foreground">
        <Setter.Value>
          <SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
        </Setter.Value>
      </Setter>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

En espérant avoir un peu éclairci l'exemple présent sur la msdn

**kheironn** · 12/04/2011, 13h34

Ok, je commence à y voir un peu plus clair... je fais toujours du copier-coller sans tout comprendre, mais, en testant au fur et à mesure je vois le rendu changer... Je suis sûre de rater des subtilités dans l'histoire, mais je ferai avec pour cette initiation. A l'usage je devrai finir par comprendre ce que je fais.

Je vais donc poursuivre mon rendu...

p.s. : j'utilisai cette page comme source : MenuItem ControlTemplate
comme d'habn toujours aussi claire, fidèle à msdn : si tu connais, tu comprends. Sinon, démerde-toi et le ciel te démerdera !

**kheironn** · 12/04/2011, 14h00

Je ne comprends pas très bien la différence entre SubmenuHeaderTemplateKey et SubmenuItemTemplateKey

p.s. : il me semble que le header concerne les items de menu ayant un sous-menu et les item concernent ceux qui n'en ont pas.

**binoo** · 12/04/2011, 14h55

Envoyé par kheironn

il me semble que le header concerne les items de menu ayant un sous-menu et les item concernent ceux qui n'en ont pas.

C'est comme ça que je le comprend aussi en lisant les définitions de SubmenuHeaderTemplateKey et SubmenuItemTemplateKey.

Et ça se confirme bien après un rapide coup d’œil sur le ControlTemplate concernant le SubmenuHeader qui contient la partie Popup spécifique au sous-menu.

Sinon +1 avec toi concernant le côté brut de fonderie de la doc msdn.

**kheironn** · 12/04/2011, 16h01

Et bien avec ces conseils, j'ai pu arriver à quelque chose qui colle avec ma chartre graphique...

**kheironn** · 12/04/2011, 16h30

par contre, j'ai le bout de code suivant :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
                <Border Name="Check" Width="13" Height="13" Visibility="Visible" Margin="6,0,6,0" Background="Transparent">
                    <Path Name="CheckMark" Width="7" Height="7" Visibility="Hidden" SnapsToDevicePixels="False" Stroke="Brown" StrokeThickness="2" Data="M 0 0 L 7 7 M 0 7 L 7 0" />
                </Border>

Le problème est que je voudrais exactement la coche par défaut, avec une couleur perso... si quelqu'un sait comment trouver les valeurs par défaut.

**binoo** · 12/04/2011, 17h18

Il y a l'info dans le premier lien que je t'ai fourni, soit celui ci :
http://msdn.microsoft.com/fr-fr/library/ms752296.aspx

Si tu fait une recherche de CheckMark, tu verras qu'ils appliquent pour la couleur du Path un DynamicResource nommé GlyphColor qui est référencé en bas de la page avec tous les brush.

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

Ext-ce que c'est ceux par défaut ? il faut tester.

**kheironn** · 12/04/2011, 17h37

J'ai trouvé mon bonheur...
ils indiquent une coche en forme de croix, qui n'est pas celle par défaut...
il me reste à trouver comment est paramétrée cette dernière. Pour le moment, j'en ai dessinée une moi-même

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
                <Border Name="Check" Width="13" Height="13" Visibility="Visible" Margin="6,0,6,0" Background="Transparent">
                    <Path Name="CheckMark" Width="9" Height="9" Visibility="Hidden" SnapsToDevicePixels="False" Stroke="Brown" StrokeThickness="2" Data="M 0 5 L 3 9 M 3 9 L 9 0" />
                </Border>

il faut que je trouve comment affiner la branche de droite et ce sera parfait.
j'ai compris que data représente les coordonnées des extrémités de la case à cocher... et donc, on peut faire un petite dessin de son choix...