Comment lier des éléments de menu à un ContextMenu dans silverlight, y compris l'icône

Question

J'ai un menu contextuel et je veux que ses éléments de menu soient remplis via une liaison. Le code suivant fonctionne

<Button> 
    <controlsInputToolkit:ContextMenuService.ContextMenu> 
     <controlsInputToolkit:ContextMenu ItemsSource="{Binding MenuItems}"> 
      <controlsInputToolkit:ContextMenu.ItemTemplate> 
       <DataTemplate> 
        <TextBlock Text="{Binding Name}" /> 
       </DataTemplate> 
      </controlsInputToolkit:ContextMenu.ItemTemplate> 
     </controlsInputToolkit:ContextMenu> 
    </controlsInputToolkit:ContextMenuService.ContextMenu> 
</Button> 

mais il y a un problème, le ItemTemplate représente la zone de texte d'un élément de menu et ainsi en ce qui ne marche pas im au courant vous permet de définir l'icône

donc j'ai essayé de faire la la liaison via le ItemContainerStyle comme dans l'exemple ci-dessous

<Button> 
    <controlsInputToolkit:ContextMenuService.ContextMenu> 
     <controlsInputToolkit:ContextMenu ItemsSource="{Binding MenuItems}"> 
      <controlsInputToolkit:ContextMenu.ItemContainerStyle> 
       <Style TargetType="controlsInputToolkit:MenuItem"> 
        <Setter Property="Header" Value="{Binding Name}"/> 
       </Style> 
      </controlsInputToolkit:ContextMenu.ItemContainerStyle> 
     </controlsInputToolkit:ContextMenu> 
    </controlsInputToolkit:ContextMenuService.ContextMenu> 
</Button> 

mais ne marche pas silverlight semblent aimer que

des idées?

Answer 1

Je crée un menu contextuel programmatically et la définition du contenu à la propriété MenuItem.Header semble fonctionner correctement pour les images. Il y a un lot de examples de texte de réglage.

Answer 2

Essayez d'utiliser ce menu open source à la place:

http://sl4popupmenu.codeplex.com

Le modèle permet de lier des images directement. J'espère que cela aide.

Answer 3

J'ai eu la même question, et même si je n'ai pas trouvé la réponse que je voulais, j'ai trouvé une solution de contournement qui répondait bien à mes besoins. Je pensais que vous aimeriez le voir, même après ce long après-coup.

Il semble que si le ItemsSource de la classe ContextMenu contient MenuItem objets, alors l'icône atterrit bien là où elle appartient. Comme moi, j'utilisais un modèle de vue et je n'avais pas de quoi injecter la logique de l'interface utilisateur dans ma classe de modèle de vue. À la place, j'ai implémenté un convertisseur de valeur pour transformer mon modèle de vue en objets MenuItem. Il avait l'air un peu quelque chose comme ceci:

---

XAML:

<UserControl.Resources> 
    <local:DelegatedValueConverter 
     x:Key="LocalContextItemConverter" 
     Converting="OnBindingContextMenu" /> 
</UserControl.Resources> 

... 

<toolkit:ContextMenu 
    ItemsSource="{Binding ContextMenuItems, Converter={StaticResource LocalContextItemConverter}}" /> 

---

C# code-behind

private void OnBindingContextMenu(object sender, ValueConvertingEventArgs e) 
{ 
    var dataitems = e.Value as IEnumerable<NavigationItemViewModel>; 
    if (dataitems != null) 
    { 
     var items = dataitems.Select(data => new MenuItem() 
     { 
      Header = data.Title, 
      Icon = data.Icon, 
      Tag = data 
     }).ToList(); 
     var handler = new RoutedEventHandler(this.OnContextMenuClick); 
     items.ForEach(item => item.Click += handler); 
     e.Result = items 
    } 
} 

private void OnContextMenuClick(object sender, RoutedEventArgs e) 
{ 
} 

---

Discussion

Le DelegatedValueConverter est un peu quelque chose que je décris en détail here, mais ce n'est pas vraiment important. Vous pouvez rouler votre propre convertisseur de valeur et l'utiliser à la place. La propriété Title de mon modèle d'affichage est une chaîne et Icon est une instance de Image. J'utilise la propriété Tag de l'élément de menu pour conserver une référence à mon modèle de vue afin que je puisse faire référence aux données non visuelles lors d'un événement de clic.

Cette solution est pratique car elle fournit encore une certaine séparation entre l'interface utilisateur et le modèle de vue, bien que je préférerais dans ce cas une solution purement déclarative.

J'espère que cela aide!