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

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>