Bouton faisant émerger une Combobox

Version imprimable

14/06/2010, 09h49
Invité

Bouton faisant émerger une Combobox

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 :)
14/06/2010, 10h37
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

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:

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.

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

Code:

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:

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:

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>

23/06/2010, 16h41
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 :

Citation:

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 :)
23/06/2010, 16h53
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. :aie:

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

Pour tester, j'ai créé un nouveau projet afin de simplifier les choses.

Code behind :

Code:

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
namespace SilverlightApplicationMenuItems
{
    public partial class MainPage : UserControl
    {
        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" });
        }
    }
}

Code XAML :

Code:

1
2
3
4
<Grid x:Name="LayoutRoot" Background="White">
        <splitButton:MenuButton x:Name="MnuButton" Content="Bouton" Width="60" Height="60" Margin="0,0,15,0" BorderBrush="Green" splitButton:MenuButton.ButtonMenuItemsSource="{Binding MesMenuItems}" >
        </splitButton:MenuButton>
    </Grid>