Discussion :

[Invité]

Bonjour à tous,

Je travaille actuellement sur un projet Silverlight.
Sur une de mes pages, l'utilisateur doit cliquer sur un bouton parmi une série (4 actuellement).

Le clic sur le bouton charge une ComboBox placée en dessous.
L'utilisateur doit donc ensuite choisir l'élément qu'il veut dans la ComboBox.

En résumé, les boutons permettent de choisir une catégorie et la combobox l'élément souhaité.

En faisant une démonstration, les utilisateurs ont souligné que cette interface était un peu lourde. Le fait de devoir cliquer sur le bouton, puis d'aller sur la liste ne leur semblent pas très intuitif.

En fait, il voudrait que le clic sur un des boutons fassent directement émerger une liste dans laquelle on choisirait l'élément désiré. Il est vrai que cela semble plus clair à l'utilisation.

Par contre, j'hésite encore sur la façon pour réaliser cela. Avant de partir sur une solution complexe, j'aurais aimé avoir votre avis sur la question (y'a peut être un moyen très simple pour arriver à ce résultat).

Merci d'avance

[Samuel Blanchard]

Bonjour,

Je ne suis pas sure de bien comprendre ta demande.
Est-ce un SlipButton/MenuButton dont tu parles ?

http://blogs.msdn.com/b/delay/archiv...f-support.aspx

[Invité]

Bonjour,

Oui, c'est exactement ça

Le MenuButton convient parfaitement pour ce que je veux faire.

J'ai par contre un soucis dans le remplissage de la liste :

Actuellement, mon code donne ceci :

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
<ItemsControl x:Name="LstFunctions" >
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                        <splitButton:MenuButton x:Name="MnuButton" Tag="{Binding FunctionID}" Width="60" Height="60" Margin="0,0,15,0" BorderBrush="Green" ToolTipService.ToolTip="{Binding FunctionName}" >
                            <splitButton:MenuButton.Content>
                                <Image Source="{Binding FunctionID, Converter={StaticResource StringToImageConverter}}" Width="45" Height="45" Margin="4,4,4,4" />
                            </splitButton:MenuButton.Content>
                            <splitButton:MenuButton.ButtonMenuItemsSource>
                                <my1:MenuItem Header="Font..." />
                                <my1:MenuItem Header="Paragraph..." />
                                <my1:MenuItem Header="Tabs..." />
                            </splitButton:MenuButton.ButtonMenuItemsSource>
                        </splitButton:MenuButton>
                    </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

En résumé, j'ai une liste de Fonctions que je binde à un ItemControl afin de faire apparaitre un MenuButton par Fonction.

Par contre, je vois pas trop comment faire pour remplir automatiquement la liste d'un MenuItem à partir d'une liste en utilisant le databinding.

[Samuel Blanchard]

Malheureusement je ne pense pas que cela soit possible car en regardant dans le generic.xaml du controle on voit ceci :

Code :

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

1
2
3
<toolkit:ContextMenuService.ContextMenu>
  <toolkit:ContextMenu ItemsSource="{Binding ButtonMenuItemsSource,   RelativeSource={RelativeSource TemplatedParent}}"   Foreground="{TemplateBinding Foreground}" FlowDirection="{TemplateBinding   FlowDirection}"/>
</toolkit:ContextMenuService.ContextMenu>

L'ItemsSource est bien fixé mais pas d'ItemTemplate à l'horizon...

Il faudra donc passé par une collection de MenuItem intermédiaire de ce type :

Coté cs :

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
 
 
        public MainPage()
        {
            InitializeComponent();
 
            // nous permet de faire du Binding coté Xaml de MesMenuItems
            this.LayoutRoot.DataContext = this;
            // ajouter dynamiquement nos MenuItems
            this.AddMenuItems();
 
        }
 
        public ObservableCollection<MenuItem> MesMenuItems
        {
            get { return (ObservableCollection<MenuItem>)GetValue(MesMenuItemsProperty); }
            set { SetValue(MesMenuItemsProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for MesMenuItems.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MesMenuItemsProperty =
            DependencyProperty.Register("MesMenuItems", typeof(ObservableCollection<MenuItem>), typeof(MainPage), new PropertyMetadata(new ObservableCollection<MenuItem>()));
 
public void AddMenuItems()
{
 
// on ajoute dynamiquement les MenuItems
this.MesMenuItems.Add( new MenuItem(){ Header = "Header 01" } );
this.MesMenuItems.Add( new MenuItem(){ Header = "Header 01" } );

Coté Xaml

Code :

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

1
2
3
4
<splitButton:MenuButton x:Name="MnuButton" Tag="{Binding FunctionID}" Width="60" Height="60" Margin="0,0,15,0" BorderBrush="Green" ToolTipService.ToolTip="{Binding FunctionName}" MenuButton.ButtonMenuItemsSource="{Binding MesMenuItems}" >
...
</splitButton:MenuButton>

[Invité]

Merci pour ton aide.

J'ai testé ta solution avec une collection intermédiaire de MenuItems.

J'ai repris tout ton code mais j'ai une erreur systèmatiquement :

Détails de l’erreur de la page Web
Message*: Unhandled Error in Silverlight Application La propriété Set 'SplitButton.SplitButton.ButtonMenuItemsSource' a levé une exception. [Line: 11 Position: 175] à System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
à SilverlightApplicationMenuItems.MainPage.InitializeComponent()
à SilverlightApplicationMenuItems.MainPage..ctor()
à SilverlightApplicationMenuItems.App.Application_Startup(Object sender, StartupEventArgs e)
à MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
à MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, String eventName)
Ligne*: 1
Caractère*: 1
Code*: 0
URI*: http://localhost:13747/Silverlight.js

As-tu testé ou mis en pratique ta solution ?

Merci encore

[Samuel Blanchard]

Désolé je n'ai pas testé mon code, je te l'ai juste mis pour que tu vois globalement comment on pouvait s'y prendre.

Tu peux nous montrer le code ou est-il exactement le même que le mien ?