如何将图像和数据添加到WPF数据网格 [英] How do I add an image and data to a WPF Data Grid

问题描述

我想将图像和数据添加到数据网格中.
我已经编写了将图像添加到第一列的代码，但是我也想在C#的第二列中添加游戏名称.

我的WPF代码:

I would like to add an image and data to a Data Grid.
I have written code to add an image to the first column, but I also want to add the game name in the second column in C#.

My WPF Code:

<Window x:Class="WpfApplication1.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="334" Width="686" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" Loaded="Window_Loaded">
    <Grid>
        <my:DataGrid AutoGenerateColumns="False" Margin="144,60,141,0" Name="dataGrid1" VerticalAlignment="Top"

                        ItemsSource="{Binding}" Height="40">
            <my:DataGrid.Columns>
                <my:DataGridTemplateColumn Header="Icon">
                    <my:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Height="25" Width="50" Source="{Binding}" />
                        </DataTemplate>
                    </my:DataGridTemplateColumn.CellTemplate>
                </my:DataGridTemplateColumn>
                <my:DataGridTextColumn Header="Game Name" Binding="{Binding Path=Position}"/>
                </my:DataGrid.Columns>
        </my:DataGrid>
    </Grid>
</Window>

C#

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
         Loaded += new RoutedEventHandler(Window_Loaded);
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            List<string> imageList = new List<string>();
            imageList.Add(@"D:\play.png");
            dataGrid1.ItemsSource = imageList;
        }
    }
}

如果有人可以帮助我，我将不胜感激

If anyone can help me I would be most grateful

推荐答案

由于您拥有包含图像路径的字符串列表，因此必须使用Converter类来将字符串转换为BitmapImage.

Since you are having a list of strings containing the path of the Images, you have to use a Converter class to convert the string to BitmapImage.

namespace WpfApplication1
{
class ConvertTextToImage:IValueConverter
    {
        #region IValueConverter Members
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if(value!=null)
            {
              return new BitmapImage(new Uri(value.ToString(), UriKind.RelativeOrAbsolute));
            }
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
        #endregion
    }
}

如下使用XAML(从XAML中删除了ItemsSource)

Use the XAML as follows (removed the ItemsSource from the XAML)

<Window x:Class="WpfApplication1.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="clr-namespace:WpfApplication1"

    Title="Window1" Height="334" Width="686" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" Loaded="Window_Loaded">
    <window.resources>
       <local:converttexttoimage x:key="convert" xmlns:x="#unknown" xmlns:local="#unknown" />
    </window.resources>
    <Grid>
        <my:DataGrid AutoGenerateColumns="False" Margin="144,60,141,0" Name="dataGrid1" VerticalAlignment="Top"

                        Height="40">
            <my:DataGrid.Columns>
                <my:DataGridTemplateColumn Header="Icon">
                    <my:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Height="25" Width="50" Source="{Binding Converter={StaticResource convert}}" />
                        </DataTemplate>
                    </my:DataGridTemplateColumn.CellTemplate>
                </my:DataGridTemplateColumn>
                <my:DataGridTextColumn Header="Game Name" Binding="{Binding Path=Position}"/>
                </my:DataGrid.Columns>
        </my:DataGrid>
    </Grid>
</Window

现在应该可以使用.

Should work now.

tou不需要绑定到类型字符串列表，而是需要绑定到模型类型列表.此模型将包含图像和图像名称这两个属性.

创建具有两个属性Image和Name的类(例如GameModel)，然后使用该类(List< gamemodel)而不是< List< string>绑定到您的itemsource.

Instead of binding to a list of type string, tou will need to bind to a list of a model type. This model will consist of two properties image and image name.

Create a class (say GameModel) with two properties Image and Name and then use this (List<gamemodel) to bind to your itemsource instead of <List<string>.

这篇关于如何将图像和数据添加到WPF数据网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！