用图像填充整个 MenuButton
Filling an entire MenuButton with an Image
我正在尝试创建一个 WPF 菜单,它由 5 个简单的按钮组成,这些按钮全部由一个图像填充。我创建了以下 XAML:
<Menu x:Name="menuMain" Height="40" Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<MenuItem x:Name="menuItemPrint" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemClear" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemSettings" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemScanner" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemMode" Width="40" Height="40" Click="menuItemMode_Click">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
</Menu>
但具体结果如下所示:
它只显示了图像的左上四分之一,它似乎也因为一些奇怪的原因而被抵消了?网上几乎所有的答案都涉及设置图片的大小,我就是这样做的(.PNG大小正好是40x40,MenuItems和Images也是。
我试过更改对齐方式,将填充设置为 'Stretch' 并调整边距,但似乎没有任何帮助。
郑重声明,我正在尝试实现的目标如下所示(尽管最好带有一个不太丑陋的绿色复选标记。请原谅我的编辑技巧)。
尝试覆盖菜单项模板。这似乎对我有用。
<Menu Height="40">
<MenuItem Height="40" Width="40">
<MenuItem.Template>
<ControlTemplate>
<Image Source="source path here" />
</ControlTempalte>
</MenuItem.Template>
</MenuItem>
</Menu>
不使用 Icon
属性,而是使用 Header
并设置一个 margin
偏移量。
<MenuItem x:Name="menuItemPrint" Width="40" Height="40">
<MenuItem.Header>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40" Margin="-7"/>
</MenuItem.Header>
</MenuItem>
我正在尝试创建一个 WPF 菜单,它由 5 个简单的按钮组成,这些按钮全部由一个图像填充。我创建了以下 XAML:
<Menu x:Name="menuMain" Height="40" Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<MenuItem x:Name="menuItemPrint" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemClear" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemSettings" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemScanner" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemMode" Width="40" Height="40" Click="menuItemMode_Click">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
</Menu>
但具体结果如下所示:
它只显示了图像的左上四分之一,它似乎也因为一些奇怪的原因而被抵消了?网上几乎所有的答案都涉及设置图片的大小,我就是这样做的(.PNG大小正好是40x40,MenuItems和Images也是。
我试过更改对齐方式,将填充设置为 'Stretch' 并调整边距,但似乎没有任何帮助。
郑重声明,我正在尝试实现的目标如下所示(尽管最好带有一个不太丑陋的绿色复选标记。请原谅我的编辑技巧)。
尝试覆盖菜单项模板。这似乎对我有用。
<Menu Height="40">
<MenuItem Height="40" Width="40">
<MenuItem.Template>
<ControlTemplate>
<Image Source="source path here" />
</ControlTempalte>
</MenuItem.Template>
</MenuItem>
</Menu>
不使用 Icon
属性,而是使用 Header
并设置一个 margin
偏移量。
<MenuItem x:Name="menuItemPrint" Width="40" Height="40">
<MenuItem.Header>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40" Margin="-7"/>
</MenuItem.Header>
</MenuItem>