Discussion :

[Mythrandil]

Bonjour à tous.

Je coince sur un petit truc sans trouver de solution précise.

Voici ce que j'aimerais faire :


Un menu de sélection de couleurs mais avec des menuItem je n'y suis pas arrivé (Je précise que l'image ci-dessus est un montage).

Une idée de comment je pourrais faire ?

Merci d'avance.

[Thomas Lebrun]

Il suffit que tu définisses un MenuItem qui contient un MenuItem composé d'une Grid

[Mythrandil]

J'ai essayé mais le rendu n'est pas franchement joli, en particulier quand on survole le menu, la totalité passe en surbrillance :



Je joins le code concerné :

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
<MenuItem Header="Choose parameter color">
 
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition />
                                                        <ColumnDefinition />
                                                        <ColumnDefinition />
                                                        <ColumnDefinition />
                                                    </Grid.ColumnDefinitions>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition/>
                                                        <RowDefinition/>
                                                    </Grid.RowDefinitions>
 
                                                    <MenuItem Grid.Row="0" Grid.Column="0" x:Name="menu_UnderlineWhite" Click="menu_UnderlineWhite_Click">
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="White" Stroke="Black" />
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem Grid.Row="0" Grid.Column="1" x:Name="menu_UnderlineBlue" Click="menu_UnderlineBlue_Click" >
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="LightBlue" />
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem Grid.Row="0" Grid.Column="2" x:Name="menu_UnderlineYellow" Click="menu_UnderlineYellow_Click">
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="Yellow" />
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem Grid.Row="0" Grid.Column="3"  x:Name="menu_UnderlineRed" Click="menu_UnderlineRed_Click">
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="IndianRed" />
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem  Grid.Row="1" Grid.Column="0" x:Name="menu_UnderlineGreen" Click="menu_UnderlineGreen_Click">
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="GreenYellow" />
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem Grid.Row="1" Grid.Column="1"  x:Name="menu_UnderlinePurple" Click="menu_UnderlinePurple_Click">
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="MediumPurple" Opacity="50"/>
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem  Grid.Row="1" Grid.Column="2" x:Name="menu_UnderlineOrange" Click="menu_UnderlineOrange_Click">
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="Orange" Opacity="50"/>
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem  Grid.Row="1" Grid.Column="3" x:Name="menu_UnderlinePink" Click="menu_UnderlinePink_Click">
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="Pink" Opacity="50"/>
                                                        </MenuItem.Header>
                                                    </MenuItem>
 
                                                </Grid>
                                            </MenuItem>

[ikeas]

je me demande si tu pourrais pas utiliser un selecteur de couleur que tu peux trouver sur code project par exemple et le coller dans un menu item ?

[Mythrandil]

Je cherche juste à proposer quelques couleurs à l'utilisateur pas besoin d'un système complexe ou l'utilisateur peut choisir sa couleur dans un spectre, etc.

Moi les petits carrés ça me va ^^

[ikeas]

a mon avis il faut changer le content container du menu item (actuellement un stackpanel) en wrap panel
en bidouillant le style ca doit pouvoir marcher

[Mythrandil]

Là je vais avoir besoin d'explications.

[ikeas]

en fait le container par defaut pour les items dans un menuitem c'est un stackpanel il faut donc le remplacer par un wrap panel
comme je l'ai jamais fait je regarde si je peux te trouver une solution

[ikeas]

voila la solution

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
 
<MenuItem Header="Colors2" >
                        <MenuItem.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel Width="150" />
                            </ItemsPanelTemplate>
                        </MenuItem.ItemsPanel>
 
                        <MenuItem Grid.Row="0" Grid.Column="1" x:Name="menu_UnderlineBlue"  >
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="LightBlue" />
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem Grid.Row="0" Grid.Column="2" x:Name="menu_UnderlineYellow">
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="Yellow" />
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem Grid.Row="0" Grid.Column="3"  x:Name="menu_UnderlineRed" >
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="IndianRed" />
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem  Grid.Row="1" Grid.Column="0" x:Name="menu_UnderlineGreen" >
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="GreenYellow" />
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem Grid.Row="1" Grid.Column="1"  x:Name="menu_UnderlinePurple">
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="MediumPurple" Opacity="50"/>
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem  Grid.Row="1" Grid.Column="2" x:Name="menu_UnderlineOrange">
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="Orange" Opacity="50"/>
                                                        </MenuItem.Header>
                                                    </MenuItem>
                                                    <MenuItem  Grid.Row="1" Grid.Column="3" x:Name="menu_UnderlinePink" >
                                                        <MenuItem.Header>
                                                            <Rectangle Height="10" Width="10" Fill="Pink" Opacity="50"/>
                                                        </MenuItem.Header>
                                                    </MenuItem>
                    </MenuItem>

tu agrandi le width du wrap panel pour avoir plus ou moins de carre sur la ligne
et tu joue sans doute avec les width des header pour reduire la taille (jai pas essayé)

par contre si je puis me permettre un conseil utilise plutot le routed message click sur le menu item color2 pour reccup le sous menu item qui a ete clique ca sera plus simple que de mettre des click partout

[Mythrandil]

C'est impeccable, merci.