在WPF中使用矢量图作为图标

Question

在WPF中使用矢量图作为图标

3

我在我的MVVM应用程序中有以下用于MenuItems的基类

public class StandardMenuItem : MenuItemBase, IExecutableItem
{
    ...
    public Image Icon { get; private set; }
    ...
}

我的最初想法是使用Image作为我在MenuItems上显示的图标。现在我已经开始在应用程序前端使用这些MenuItems，并发现了一个很棒的矢量图形库，我想要使用它代替。

<ResourceDictionary x:Class="resources_icons_xaml"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <Canvas x:Key="appbar_acorn" Width="48" Height="48" Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0">
        <Path Width="22.3248" Height="25.8518" Canvas.Left="13.6757" Canvas.Top="11.4012" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 16.6309,18.6563C 17.1309,8.15625 29.8809,14.1563 29.8809,14.1563C 30.8809,11.1563 34.1308,11.4063 34.1308,11.4063C 33.5,12 34.6309,13.1563 34.6309,13.1563C 32.1309,13.1562 31.1309,14.9062 31.1309,14.9062C 41.1309,23.9062 32.6309,27.9063 32.6309,27.9062C 24.6309,24.9063 21.1309,22.1562 16.6309,18.6563 Z M 16.6309,19.9063C 21.6309,24.1563 25.1309,26.1562 31.6309,28.6562C 31.6309,28.6562 26.3809,39.1562 18.3809,36.1563C 18.3809,36.1563 18,38 16.3809,36.9063C 15,36 16.3809,34.9063 16.3809,34.9063C 16.3809,34.9063 10.1309,30.9062 16.6309,19.9063 Z "/>
    </Canvas>
    ...
<ResourceDictionary/>

我的问题在于，通过代码使用这些矢量图形似乎不是很直观。我知道如何在XAML中包含这样的图形。

<!-- Include Resource Dictionary -->
<MenuItem Header="Show Difference Details" 
          ToolTip="Launch the grouped data file and analysis window." 
          IsEnabled="{Binding GroupedDataIsDifferent}"
          Caliburn:Message.Attach="[Event Click] = [Action ShowDifferenceDetailsAsync()]">
    <MenuItem.Icon>
        <Rectangle Width="16" Height="16">
            <Rectangle.Fill>
                <VisualBrush Stretch="Uniform" Visual="{StaticResource appbar_column_two}" />
            </Rectangle.Fill>
        </Rectangle>
    </MenuItem.Icon>
</MenuItem>

但是这不是我的问题。我的问题是：

我如何在菜单项的图标/图像中使用来自资源字典的矢量图形？
如果对第一个问题的答案是“你不能”，那么我该如何在代码中将矢量图形转换为Icon？

感谢您的时间。

编辑。我希望能够使用代码获取图形。因此，对于我的菜单项，我有一个方法：

public StandardMenuItem WithIcon(Assembly source, string path)
{
    var manager = IoC.Get<IResourceManager>();
    var iconSource = manager.GetBitmap(path, source.GetAssemblyName());
    if (source != null)
    {
        IconSource = path;
    }
    return this;
}

我现在的问题是获取我想要的矢量图像的正确路径。假设在我的解决方案中，我的矢量图像位于“Graphics/Icons.xaml”中，并且资源名为“appbar_acorn”，我该如何引用它？

- MoonKnight

是的，你可以使用相同的方法，可能使用转换器通过键引用。使用这种方法，您可能不需要将视图内容保留在视图模型中。 - pushpraj

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pushpraj · Accepted Answer

这里是您需要翻译的内容：

请将Icon属性更改为字符串。

例如：

public string Icon { get; private set; }

将图标值分配为您想要使用的图标的键。

Icon = "appbar_acorn";

在资源中定义转换器。

<l:StringToResourceConverter x:Key="StringToResourceConverter" />

l:指转换器的命名空间，例如xmlns:l="clr-namespace:CSharpWPF"

用法:

<MenuItem Icon="{Binding Icon,Converter={StaticResource StringToResourceConverter}}"
          Header="Menu"/>

这里是转换器类

result

结果如下

namespace CSharpWPF
{
    class StringToResourceConverter: IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return Application.Current.FindResource(value);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

您可能需要调整画布上的图标大小和位置，在上面的示例中，我删除了Canvas.Left="13.6757" & Canvas.Top="11.4012"，但是菜单图标仍然有点大。