如何將菜單項綁定到Silverlight中的ContextMenu，包括圖標

Question

我有一個上下文菜單，我希望它的菜單項通過綁定來填充。 下面的代碼工作

<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> 

但是有一個問題，ItemTemplate中表示菜單項的文本區域，因此儘可能即時知道犯規讓你設置圖標

，所以我想這樣做的通過ItemContainerStyle如下面的例子

<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> 

但Silverlight的犯規結合似乎喜歡

什麼想法？

Answer 1

我創建一個上下文菜單programmatically並將內容設置爲MenuItem.Header屬性似乎對圖像工作得很好。有設置文字的examples的lot。

Answer 2

嘗試使用這個開源菜單代替：

http://sl4popupmenu.codeplex.com

模板允許直接將圖像的結合。 希望這有助於。

Answer 3

我有同樣的問題，雖然我沒有找到我想要的答案，但我找到了一個解決方案，很好地滿足了我的需求。我想你可能會喜歡看到它，即使是這種事後很久。

看來如果ContextMenu類的ItemsSource包含MenuItem對象，那麼該圖標很好地在它所屬的位置出現。我和你一樣，正在使用視圖模型，並沒有將UI邏輯注入到視圖模型類中。

我做的是實現一個值轉換器，將我的視圖模型轉換爲MenuItem對象。它看起來有點像這樣：

---

XAML：

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

... 

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

---

C＃代碼隱藏

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) 
{ 
} 

---

討論

DelegatedValueConverter是我詳細描述的一點東西here，但它並不重要。你可以推出自己的價值轉換器，並使用它。

我的視圖模型的Title屬性是一個字符串，而Icon是Image的一個實例。我使用菜單項的Tag屬性來保留對視圖模型的引用，以便在單擊事件期間引用其中的非可視化數據。

該解決方案很方便，因爲它仍然在UI和視圖模型之間提供了一些分離，儘管在這種情況下我更喜歡純粹聲明的解決方案。

我希望這有助於！