显示 svg 文件的绑定列表

Question

在我的 WPF 应用程序中，我有一个带有一组固定 SVG 图像的网格（我使用 SharpVectors 库）

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

现在我想要项目控制，我可以在其中将路径列表绑定到 SVG，如下所示：

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

但我不明白如何在 renderers:SvgImageSource 标签中使用字符串路径。

Answer 1

您可以尝试绑定到路径并使用 SvgImageConverterExtension class:

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

Answer 2

为您的 SVG 图片 URI 设置 ItemsSource。然后就可以使用SvgImageConverter进行绑定了。

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

显示 svg 文件的绑定列表

Displaying bound list of svg files

data-binding

wpf

xaml

svg

sharpvectors