带有图像的 WPF 菜单项

Posted 2023-02-19

【中文标题】带有图像的 WPF 菜单项

【英文标题】：WPF menu item with image

【发布时间】：2010-12-18 08:06:39

【问题描述】：

如何定义 MenuItem.Icon 以便将 MenuItemHeader 文本放置在菜单项图像下方？感谢帮助！

【参考方案1】：

大致如下：

<ContextMenu>
    <MenuItem Header="Reports">
        <MenuItem.Icon>
            <Image Source="/XSoftArt.WPFengine;component/Images/export32x32xp.png"/>
        </MenuItem.Icon>
    </MenuItem>
</ContextMenu>

【讨论】：

这是正确答案，谢谢！ Ray Burns 提供的解决方案将图片绘制在错误的位置。

如果需要，还将图像的构建操作属性设置为“内容”，并将复制到输出目录设置为“如果较新则复制”或“始终”。

我对这个答案投了反对票，因为 OP 明确表示他想在图像下方（垂直）显示文本。这将在文本前面显示图标。

【参考方案2】：

最简单的方法是不使用 Icon 属性，而是将图标放在 Header 中：

<Menu>
  <MenuItem>
    <MenuItem.Header>
      <StackPanel>
        <Image Width="20" Height="20" Source="/XSoftArt.WPFengine;component/Images/export32x32xp.png" />
        <ContentPresenter Content="Reports" />
      </StackPanel>
    </MenuItem.Header>
  </MenuItem>
  <MenuItem Header="Export" />
  <MenuItem Header="New record" />
</Menu>

对于这种简单的情况，<ContentPresenter Content="Reports" /> 可以替换为<TextBlock Text="Reports" />，因为无论如何 ContentPresenter 将使用它来呈现字符串。对于更复杂的Header=，您可以使用ContentPresenter，如图所示。

【讨论】：

下面的答案比较简单，使用Icon属性？

@AlexHopeO'Connor 如果您阅读 OP 在文本中而不是标题中提出的问题，下面的答案也是错误的。另外，您可能已经注意到，下面的答案与 OP 自己提供的代码没有任何不同。他清楚地询问如何在图像下方显示文本，而不是图像在它旁边，BELOW。这就是为什么这个答案在标题内设置一个堆栈面板，其默认方向为垂直。

我试过这个并且得到一个错误，类似于“对象属于可视树中的另一个对象”。直接将图像分配给下面的图标对我有用。

这是一个很好的解决方案，因为它在标题中结合了图像和文本，使菜单复选标记（在左侧菜单中）仍然可见。下面的解决方案不允许这样做。

@Sebastian - 4年后，我只能假设我那天的意思，我试图说OP提到他正在使用MenuItem.Icon，下面的答案只是显示了用法MenuItem.Icon 所以它基本上是 OP 所说的当前正在使用的，但他不希望图像位于文本的左侧，而是位于文本的下方。因此，对于 OP 的实际问题，高票数的答案是完全错误的。

【参考方案3】：

在 StackPanel 的情况下，使用 Label 而不是 TextBlock 因为只有 Label 允许您在菜单上使用助记符，例如_报告。