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>