Displaying bound list of svg files-CodePudding

In my WPF application I have a grid with a fixed set of SVG Images (I use SharpVectors library)

<Image Grid.Column="0" Grid.Row="0" Source="{svgc:SvgImage Source=Resources/0.svg}" Stretch="Fill"/>
<Image Grid.Column="1" Grid.Row="0" Source="{svgc:SvgImage Source=/Resources/1.svg}" Stretch="Fill"/>
<Image Grid.Column="2" Grid.Row="0" Source="{svgc:SvgImage Source=Resources/2.svg}" Stretch="Fill"/>
<Image Grid.Column="1" Grid.Row="0" Source="{svgc:SvgImage Source=/Resources/3.svg}" Stretch="Fill"/>

Now I want to have item control where I would bind a list of paths to the SVGs, something like this:

<ItemsControl DataContext="{Binding DataContext}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Stretch="Fill" Width="100" Height="100">
                <Image.Source>
                    <renderers:SvgImageSource/> <!-- What should be used here as a path??? -->
                </Image.Source>
            </Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

But I don't get it how to use string path in the renderers:SvgImageSource tag.

CodePudding user response：

Set an ItemsSource for your SVG image URIs. Then you can use the SvgImageConverter for binding.

<ItemsControl ItemsSource="{Binding YourSvgUriItems}">
   <ItemsControl.Resources>
      <svgc:SvgImageConverter x:Key="SvgImageConverter"/>
   </ItemsControl.Resources>
   <ItemsControl.ItemTemplate>
      <DataTemplate>
         <Image Stretch="Fill" Width="100" Height="100"
                Source="{Binding Converter={StaticResource SvgImageConverter}}"/>
      </DataTemplate>
   </ItemsControl.ItemTemplate>
</ItemsControl>

CodePudding user response：

You could try to bind to the path and use the SvgImageConverterExtension class:

<Image Stretch="Fill" Width="100" Height="100">
    <Image.Source>
        <Binding Path="YourUriProperty">
            <Binding.Converter>
                <converters:SvgImageConverterExtension />
            </Binding.Converter>
        </Binding>
    </Image.Source>
</Image>