Question

我希望能够使用最好在XAML中定义的矢量图形作为图像控件的源，就像我目前可以像PNG一样使用光栅图像。这样我就可以轻松地在位图和矢量图像之间进行混合和匹配，如下所示：

<StackPanel>
    <Image Source="Images/Namespace.png"/>
    <Image Source="Images/Module.xaml"/>
</StackPanel>

Module.xaml很可能将<DrawingImage>作为其根元素而不是<UserControl>。

实际上，我真正想要的是这个，所以我的ViewModel可以自行选择光栅或矢量图像：

<Image Source="{Binding ImageUri}"/>

这可能吗？ Image.Source可以从给定的URI加载XAML类吗？或者只能加载位图资源？

Answer 1

您可以简单地将矢量图形引用为StaticResources：

<Image Source="{StaticResource MyImage}" />

将图像存储在ResourceDictionary中作为DrawImage。 Expression Blend可以帮助您生成这些内容：

<ResourceDictionary
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

   <DrawingImage x:Key="MyImage">
      <DrawingImage.Drawing>
         <DrawingGroup>
            <DrawingGroup.Children>
               <GeometryDrawing Brush="Black" Geometry="M 333.393,... 100.327 Z "/>
               <GeometryDrawing Brush="Black" Geometry="F1 M 202.309,... Z "/>
                      :
            </DrawingGroup.Children>
         </DrawingGroup>
     </DrawingImage.Drawing>
   </DrawingImage>

</ResourceDictionary>

Answer 2

1）将DrawingImage.xaml添加到项目中，并将其属性设置为“BuildAction = Content”和“Copy Always”。或者你可以从外部动态加载XAML，因为我要解释的逻辑也适用于loose-xaml。

2）编写一个转换器将XAML uri转换为UIELement，在你的情况下它将始终是DrawingImage

public class FileToUIElementConverter :IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        FileStream fileStream = new FileStream((string)parameter, FileMode.Open); 
        return XamlReader.Load(fileStream) as DrawingImage;
    }

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

3）按如下所示编写XAML

<Window.Resources>
    <local:FileToUIElementConverter x:Key="uriToUIElementConverter"/>
</Window.Resources>
<Grid>
    <Image Stretch="Fill" Source="{Binding Converter={StaticResource uriToUIElementConverter},ConverterParameter=ImageDrawing.xaml}"/>
</Grid>

Answer 3

使用“资源”类型嵌入XAML资源（DrawingImage）。它不是一个单独的文件，可以通过URI直接引用，就像在原始示例中一样 - 但URI非常重要。您必须弄清楚Microsoft的“pack”URI语法并使用它。

使用XAML文件作为矢量图像源

3 个答案: