是否有任何干净的方法可以通过 WPF/Xaml 中的包 url 使用矢量图像答案

【问题标题】：Is there any clean way to use vector images via pack url in WPF/Xaml是否有任何干净的方法可以通过 WPF/Xaml 中的包 url 使用矢量图像
【发布时间】：2016-09-16 16:35:16
【问题描述】：

我想出了如何从 svg 文件 (.svg->Inkscape->pdf->ai->ExpressionDesign->xaml) 中获取 xaml。

转换给我一个带有 DrawingBrush 的资源字典或一个带有画布的 Xaml 文件。

现在我正在寻找一种通过包 url 使用矢量图像的干净方式，以便我可以从我的 ViewModel 中以一种干净的方式使用它。这是一个 xaml 片段，它与包含指向（资源）.png 文件的包 URL 的 ImagePath(string) 很好地配合使用。矢量图像有什么相似之处吗？

// View Model: 
MainMenuEntry.ImagePath = "pack://application:,,,/MyBeautifulApp.Wpf.MainGui;component/CommonResources/OpenFile16x16.png"

// .Xaml File
<DataTemplate>
    <Button Command ="{Binding ClickCommand}" Margin="3,0,0,0">
        <Button.Template>
            <ControlTemplate>
                <Image Source="{Binding ImagePath}" Width="16" Height="16"  Stretch="Uniform" VerticalAlignment="Center" />
            </ControlTemplate>
        </Button.Template>
    </Button>
</DataTemplate>

我发现它工作的唯一方法是使用 DrawingBrush（在 ResourceDictionary 中）将 ImageSource 绑定到 StaticResource，但这对我可能有位图文件或矢量的视图模型没有帮助图片。必须有任何理智的方法来处理像 html 中的 svg 这样的矢量图？

【问题讨论】：

不确定您所说的“干净”方式是什么意思。我这样做的方式是 AI -> XAML Conversion -> 资源。如果它是单个路径，那么我只需将其设为样式模板。如果是多个，我使用different template 方法。然后它全部位于资源字典中，并通过 StaticResource 调用，无论是来自 XAML 还是代码隐藏，都像魅力一样工作。
用干净我的意思是简单的像伪代码“pack://application:,,,/MyBeautifulApp.Wpf.MainGui;component/CommonResources/OpenFileVectorGraphic.xaml”，我可以像 png 一样绑定。猜猜我现在将为视图模型创建一个 MenuItemCommand 类，该类具有位图/矢量图标的多个属性，或者具有一个对象属性和一个样式/模板，该样式/模板根据属性返回的类型（packpath string/xaml graph）动态构建适当的项目)。
啊，如果你真的想使用 Image.Source，你可以将你的 XAML Vector 移植到 DrawingImage 资源中，并且仍然可以<Image Source="{StaticResource DrawingImage]" ... />

标签： .net wpf xaml vector-graphics

【解决方案1】：

出于组织目的，为您的资产创建一个单独的类库项目。在 ResourceDictionary 中定义 XAML 矢量图形

资产/类别/my-asset.xaml：

<ResourceDictionary 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d">
<VisualBrush x:Key="my-asset" Stretch="Uniform">
    <VisualBrush.Visual>
        <Canvas Width="48.822" Height="53.243">
                 <Path {...} />
            </Canvas>
        </VisualBrush.Visual>
    </VisualBrush>
</ResourceDictionary>

定义一个包含对所有资产的引用的 ResourceDictionary：

资产/Assets.xaml

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" >
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Category/my-asset.xaml" />
        {...}
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

在您的 App.xaml 中加载 Assets.xaml

<Application x:Class="MyApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/ClientAssets;component/Assets/Assets.xaml" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

有了这个，你可以在任何你喜欢的地方使用你的图形作为矩形中的画笔。

<Rectangle Grid.Row="2" Fill="{StaticResource my-asset}" Height="16" Width="16" />

【讨论】：