如何在 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

我创建一个上下文菜单以编程方式并设置内容MenuItem.Header 属性似乎适用于图像。有很多的示例设置文本的。

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

---

讨论

此处详细描述，但这并不重要。您可以推出自己的值转换器并使用它。

我的视图模型的 Title 属性是一个字符串，Icon 是 Image 的实例。我使用菜单项的 Tag 属性来保留对视图模型的引用，以便我可以在单击事件期间引用其中的非可视数据。

这个解决方案很方便，因为它仍然在 UI 和视图模型之间提供了一些分离，尽管在这种情况下我更喜欢纯声明性的解决方案。

我希望这有帮助！