WPF将控件绑定到未知属性

Question

I'm quite new to WPF, and I'm trying to use a dataGrid . Some of the data I'm trying to display is an image. First I tried to just bind the data like this:

DataGrid.ItemsSource = <some collection>

this resulted with a column containing the path to the Image, not displaying the image.

I started googling around, and I came up with the following:
I created a data template:

<DataTemplate x:Key="ImageDataTemplate">
    <Image Source="{Binding Image}"/>
</DataTemplate>

I added to the AutoGeneratingColumn event a function, and there I put the following code:

if (typeof(System.Windows.Media.ImageSource).IsAssignableFrom(e.PropertyType))
{
    DataGridTemplateColumn dgtc = new DataGridTemplateColumn();
    dgtc.Header = e.Column.Header;
    dgtc.CellTemplate = this.FindResource("ImageDataTemplate") as DataTemplate;

    e.Column = dgtc;
}

witch works fine, as long I call all Image properties in my classes Image is there a way to be a bit more flexible? (I want a few images in a class, or having a meaning full name for the image property, and I don't like almost duplicated code)

Answer 1

Maybe you could use a DataTemplateSelector?

Have a look at this article: http://tech.pro/tutorial/807/wpf-tutorial-how-to-use-a-datatemplateselector

Answer 2

That is a very misleading title you have there, seeing the word 'unknown' is nowhere in your question. Either way, the DataGrid is a somewhat complicated control and you seem to be looking at it from a WinForms point of view, by manipulating it using C# code, rather than simply defining how you want it to look in XAML, as is customary in WPF.

I would strongly recommend that you read some tutorials on how to use it in a WPF way before you continue... there are many such tutorials out there, but the WPF DataGrid Control one on WPF Tutorials.NET is a good one to start with.

In short, you can define what the contents of each column will look like in XAML... from the linked tutorial:

<DataGrid ItemsSource="{Binding Customers}" AutoGenerateColumns="False" >
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Image" Width="SizeToCells" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding Image}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Answer 3

I personally would set the AutoGenerateColumns property of the datagrid to false , and manually create the columns in XAML.

AutoGenerateColumns isn't that useful IMO. You often have properties in your model you don't wont to show in a column, and if it ends up by a handler for the AutoGeneratingColumn event, you just lose the benefit of not writing code for columns display.

Answer 4

You can bind your data grid to an observable collection and construct the collection like this...

public class ViewModel : INotifyPropertyChanged
{
    public ObservableCollection<ImageContainer> MyImageCollection { get; set; }
    public ViewModel()
    {
        MyImageCollection = new ObservableCollection<ImageContainer>();
        MyImageCollection.Add(new ImageContainer{Source = xxx});
    }
    #region INotifyPropertyChanged Implementation
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string name)
    {
        var handler = System.Threading.Interlocked.CompareExchange(ref PropertyChanged, null, null);
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
    #endregion
}
public class ImageContainer : INotifyPropertyChanged
{
    private BitmapImage _source;
    public BitmapImage Source
    {
        [DebuggerStepThrough]
        get { return _source; }
        [DebuggerStepThrough]
        set
        {
            if (value != _source)
            {
                _source = value;
                OnPropertyChanged("Source");
            }
        }
    }
    #region INotifyPropertyChanged Implementation
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string name)
    {
        var handler = System.Threading.Interlocked.CompareExchange(ref PropertyChanged, null, null);
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
    #endregion
}

This fragment of code defines an observable collection of images and the bound container for each image. As shown, the View Model constructor makes an instance of the collection and starts populating it with images. The container class does not HAVE to implement INPC, but I don't know what you're doing with the images, so INPC (INotifyPropertyChanged) is included anyway.

The corresponding Xaml would look like this...

    <DataGrid ItemsSource="{Binding MyImageCollection}" AutoGenerateColumns="False" >
        <DataGrid.Columns>
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Source}" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>

If you are reading the images from disk, a popular variant is to bind to the FileInfo class and use a converter to return the image. This approach makes the View Model less cluttered, but either design will give what you're looking for.

Afterthought: if you are using the data grid solely for displaying your image collection, consider using an Items Control instead. Doing this may avoid the data grid's overhead.