c# - Usando un archivo XAML como fuente de imagen vectorial

wpf vector-graphics

Question

Me gustaría poder usar gráficos vectoriales, preferiblemente definidos en XAML, como la Fuente de un control de Imagen, al igual que actualmente puedo usar una imagen raster como un PNG. De esa manera, podría mezclar y combinar fácilmente entre imágenes de mapa de bits y de vector, de esta manera:

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

Module.xaml probablemente tendría <DrawingImage> como su elemento raíz en lugar de <UserControl> .

En realidad, lo que realmente estoy buscando es esto, por lo que mi ViewModel podría seleccionar una imagen rasterizada o vectorial a su discreción:

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

es posible? ¿Puede Image.Source cargar clases XAML desde un URI dado? ¿O solo es capaz de cargar recursos de mapa de bits?

Answer 1

1) Agregue el DrawingImage.xaml al proyecto y establezca sus propiedades en ''BuildAction = Content'' y ''Copy Always''. O bien, puede cargar dinámicamente el XAML desde afuera, ya que la lógica que voy a explicar también funcionará para loose-xaml.

2) Escriba un convertidor para convertir el uri XAML a UIELement, en su caso, siempre será 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) Escribe el XAML de la siguiente manera

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

Answer 2

Incruste el recurso XAML (DrawingImage) con el tipo ''Recurso''. Entonces no es un archivo separado y puede ser referenciado directamente a través de un URI, como en su ejemplo original, PERO el URI no es trivial. Tienes que descubrir la sintaxis URI del "paquete" de Microsoft y usar eso.

Answer 3

Puede simplemente hacer referencia a sus gráficos vectoriales como StaticResources:

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

Almacena las imágenes en un ResourceDictionary como DrawImage''s. Expression Blend puede ayudarte a generar estas cosas:

<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>