使用转换器在 WPF Datagrid Column 中显示 Canvas 图像答案

【问题标题】：DIsplay Canvas image in WPF Datagrid Column using converter使用转换器在 WPF Datagrid Column 中显示 Canvas 图像
【发布时间】：2023-04-01 17:35:01
【问题描述】：

我是一个尝试学习 WPF/C# 的初学者，基本上我想要以下内容：

在多个位置显示画布（通常是基于值的数据网格列）
使用将获取正确画布（基于值和参数）并将其作为图像源返回的转换器*
我不想将画布转换为图像文件并返回文件路径

了解这就是我想象的方式，如果您有更好的解决方案，不包括在文件夹中包含图像文件并使用路径，它将对我有所帮助

我有以下 XAML：（文件：MyApp.Views.MainView.xaml）

    <Window.Resources>
        <conv:ValueToImageConvertor x:Key="_ValueToImageConvertor" />
    </Window.Resources>

    <DataGridTemplateColumn Header="Icon">
        <DataGridTemplateColumn.CellTemplate >
            <DataTemplate>
                <Image Name="img" Source="{Binding SomeValue,Converter={StaticResource _ValueToImageConvertor} ConverterParameter=SomeParameter}" />
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>

这是我存储画布的资源字典：（文件：MyApp.Resources.ImagesDictionary.xaml）

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MyApp.Resources">


    <Viewbox x:Key="i_img1" Width="24" Height="24">
        <Canvas Width="24" Height="24">
            <Path Data="XXXXXXX" Fill="Black" />
        </Canvas>
    </Viewbox>

    <Viewbox x:Key="i_img2" Width="24" Height="24">
        <Canvas Width="24" Height="24">
            <Path Data="YYYYY" Fill="Black" />
        </Canvas>
    </Viewbox>

</ResourceDictionary>

我想做一个转换器：（文件：MyApp.Converters.ValueToImageConverter.cs）

 public class ValueToImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
             //Based on value and parameter get specific canvas and display it
             //get canvas and convert it as image source without creating file

        }
    }

正如我上面提到的，也许这是一个非常糟糕的方法。我是正在努力学习的新手。请帮我。谢谢。

【问题讨论】：

我可能会将 ViewBox 和 Canvas 以及 Path 放在 DataTemplate 中，并让转换器返回一个 PathGeometry：<Path Data="{Binding SomeValue, Converter={StaticResource Blah}...
好主意，但如果我在画布中有多个路径怎么办？
你没有提到。那是行不通的。如果你想要任意内容，你需要一个 DataTemplateSelector。 DataTemplate 可以实例化任何可视内容。顺便说一句，对于您的方案，您需要将x:Shared="False" 放在资源上，否则您将只能在给定时间在一个地方使用每个资源。此外，您显然不能将任意视觉元素填充到图像中。你会想要<ContentControl Content="{Binding SomeValue,Converter={StaticResource _ValueToImageConvertor}...

标签： wpf image canvas datagrid converters

【解决方案1】：

好的，伙计们，我做到了。方法如下：

1) 我有资源字典文件（“Resources/ImagesDictionary.xaml”）

<Viewbox x:Key="i_male" x:Shared="False">
    <Canvas Width="24" Height="24">
        <Path  Data="XXXXXX" Fill="Black" />
    </Canvas>
</Viewbox>

<Viewbox x:Key="i_female" x:Shared="False">
    <Canvas Width="24" Height="24">
        <Path Data="YYYYY" Fill="Black" />
    </Canvas>
</Viewbox>

2) 文件中图像的主要 xaml 数据网格列（“Views/wndUsers.xaml”）

    <Window.Resources>
      <conv:ValueToImageConverter x:Key="_ValueToImageConverter" />
    </Window.Resources>

<DataGridTemplateColumn Header="Sex" Width="SizeToCells" IsReadOnly="True">
    <DataGridTemplateColumn.CellTemplate >
         <DataTemplate >
              <ContentControl Content="{Binding Sex, Converter={StaticResource 
_ValueToImageConverter}, ConverterParameter=0}"/>
         </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

3) 转换器ValueToImageConverter文件("Converters/ValueToImageConverter")

public class ValueToImageConverter : IValueConverter
{
    private ResourceDictionary _resDictionary = new ResourceDictionary();

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        _resDictionary.Source = new Uri("Resources/ImagesDictionary.xaml", UriKind.Relative);

        switch (parameter)
        {
            case "0":
                return (bool)value == true ? _resDictionary["i_female"] : _resDictionary["i_male"];

            default:
                return null;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

现在您可以在需要基于值和参数的图像的任何地方使用此转换器

【讨论】：