Home Forums WPF controls Xceed DataGrid for WPF displaying an image in a cell

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • User (Old forums)
    Member
    Post count: 23064
    #25540 |

    I’ve been looking on the forums for a while and registered to ask:

    How can I display a System.Drawing.Bitmap or System.Drawing.Image in a DataGrid or DataGridControl cell?

    I have a test program in which I bind three columns’ display members to the three fields of a test object consisting of two strings and a System.Drawing.Bitmap object.

    When I set the DataGrid property ItemsSource to a list of the objects, the first two columns show the strings properly, and the third column shows the type name of the bitmap object that is loaded.

    Could anyone point me in the direction of what I need to do to get the image to display?

    Imported from legacy forums. Posted by ormaith (had 6159 views)

    Xceed Support
    Member
    Post count: 5658

    You can change the CellContentTemplate to an ImageSource to have it displayed.

    Imported from legacy forums. Posted by Jenny [Xceed] (had 216 views)

    User (Old forums)
    Member
    Post count: 23064

    How so- the example I find at http://doc.xceedsoft.com/products/XceedWpfDataGrid/Providing%20a%20CellContentTemplate.html illustrates how to accomplish this for a static image, but I am looking to use a property of a greater object as the image so that different files can be loaded to that Image object as needed.

    I suppose you can assume my newness with the CellContentTemplate functionality.

    I hope I am not too frustrating.

    Imported from legacy forums. Posted by ormaith (had 370 views)

    User (Old forums)
    Member
    Post count: 23064

    These test object will mirror the design idea I have for a production implementation. There is a domain data object of simple types (strings, numbers, boolean) that we wish to represent in a DataGridControl. The object TwoStrings takes that role:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;

    namespace DataGridViewTester
    {
    /// <summary>
    /// Test class that holds two strings.
    /// </summary>
    public class TwoStrings
    {
    private string mTextOne;
    private string mTextTwo;

    public string TextOne
    {
    get { return mTextOne; }
    set { mTextOne = value; }
    }

    public string TextTwo
    {
    get { return mTextTwo; }
    set { mTextTwo = value; }
    }

    public TwoStrings()
    {
    mTextOne = mTextTwo = “”;
    }

    public TwoStrings(string one, string two)
    {
    mTextOne = one;
    mTextTwo = two;
    }
    }
    }

    With the domain object, we want a few more columns to be displayed in a DataGridControl with images in them. I create another object, with the first as a property, and 1 to n Image properties.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows.Media.Imaging;

    namespace DataGridViewTester
    {
    public class StringsPlusImage
    {
    private TwoStrings mStrings;
    private BitmapImage mPicture;

    public TwoStrings Strings
    {
    get { return mStrings; }
    set { mStrings = value; }
    }

    public BitmapFrame Picture
    {
    get { return BitmapFrame.Create(mPicture.UriSource); }
    }

    public StringsPlusImage()
    {
    mStrings = new TwoStrings();
    mPicture = null;
    }

    public StringsPlusImage(TwoStrings twoStrings, BitmapImage picture)
    {
    mStrings = twoStrings;
    mPicture = picture;
    }
    }
    }

    Here is the XAML for my test application main window (Window1.xaml)

    <Window x:Class=”DataGridViewTester.Window1″
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
    xmlns:xcdg=”http://schemas.xceed.com/wpf/xaml/datagrid&#8221;
    Title=”DataGridView Test” Height=”300″ Width=”650″>

    <Grid>

    <Grid.RowDefinitions>
    <RowDefinition Height=”Auto”/>
    <RowDefinition Height=”Auto”/>
    </Grid.RowDefinitions>

    <xcdg:DataGridControl
    ItemsSource=”{Binding mDataRows}”
    Grid.Row =”0″
    x:Name=”mDataGridView”
    AutoCreateColumns=”False”
    SelectionMode=”Single”
    Margin=”10,10,10,10″
    Height=”200″
    HorizontalAlignment=”Stretch”>

    <xcdg:DataGridControl.View>
    <xcdg:TableView
    ShowRowSelectorPane=”False”>
    <xcdg:TableView.FixedHeaders>
    <xcdg:ClearHeadersFooters/>
    <DataTemplate>
    <xcdg:ColumnManagerRow />
    </DataTemplate>
    </xcdg:TableView.FixedHeaders>
    </xcdg:TableView>
    </xcdg:DataGridControl.View>

    <xcdg:DataGridControl.Columns>
    <xcdg:Column
    FieldName=”TextOne”
    DisplayMemberBinding=”{Binding Path=Strings.TextOne}”
    Title=”Text One” />
    <xcdg:Column
    FieldName=”TextTwo”
    DisplayMemberBinding=”{Binding Path=Strings.TextTwo}”
    Title=”Text Two”/>
    <xcdg:Column
    FieldName=”Image”
    Title=”Image”>
    <xcdg:Column.CellContentTemplate>
    <DataTemplate>
    <Image Source=”{Binding Path=Picture}” Height=”15″/>
    </DataTemplate>
    </xcdg:Column.CellContentTemplate>
    </xcdg:Column>

    </xcdg:DataGridControl.Columns>

    </xcdg:DataGridControl>

    <Image
    x:Name=”LowerImage”
    Grid.Row=”1″
    Height=”20″
    Margin=”10,10,10,10″
    Source=”{Binding Path=mThePicture}”
    HorizontalAlignment=”Left”/>

    </Grid>

    </Window>

    And the accompanying C# partial class:

    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 DataGridViewTester
    {
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
    public BitmapImage mThePicture;
    public List<StringsPlusImage> mDataRows;

    public Window1()
    {
    InitializeComponent();

    Xceed.Wpf.DataGrid.Licenser.LicenseKey = “DGF12-N1BDU-37875-DN2A”;

    // Picture.bmp is a 20 x 20 bmp
    mThePicture = new BitmapImage(new Uri(“C:\\Picture.bmp”));

    PopulateDataGrid();

    //LowerImage.Source = mThePicture;
    }

    public void PopulateDataGrid()
    {
    mDataRows = new List<Strin

    Imported from legacy forums. Posted by ormaith (had 678 views)

    User (Old forums)
    Member
    Post count: 23064

    try binding to the UriSource of the image

    Imported from legacy forums. Posted by Colin (had 395 views)

    User (Old forums)
    Member
    Post count: 23064

    and change fieldname to Picture
    so your template looks like this…
    <xcdg:Column FieldName=”Picture” Title=”Image”>
    <xcdg:Column.CellContentTemplate>
    <DataTemplate>
    <Image Source=”{Binding Path=UriSource}” />
    </DataTemplate>
    </xcdg:Column.CellContentTemplate>
    </xcdg:Column>

    the FieldName property of column actually tells the column which property to bind against.
    Then you bind against the UriSource property of the Picture (so Picture.UriSource) in the DataTemplate

    Imported from legacy forums. Posted by Colin (had 333 views)

    User (Old forums)
    Member
    Post count: 23064

    Okay- I’ll give this a shot. I had thought that the FieldName property of a Column was the name one wanted to give that Column.

    Imported from legacy forums. Posted by ormaith (had 270 views)

    User (Old forums)
    Member
    Post count: 23064

    That did it Colin. Thank you so very much for your post. This frustrated me to no end last Friday. I was all over WPF forums looking at data binding with images and nothing I tried worked. I think the crux was me not understanding that FieldName stood for the property to which to bind. Of course, I’m quite new to WPF and I think every article that I reviewed for help assumed a programmer should already have known that.

    I am very grateful. I hope you are glad to have relieved a jackleg coder’s brain. :$

    Imported from legacy forums. Posted by ormaith (had 435 views)

    User (Old forums)
    Member
    Post count: 23064

    Does the icon property return the name of your image as a string?

    Imported from legacy forums. Posted by Lee (had 452 views)

    User (Old forums)
    Member
    Post count: 23064

    Also, I was a little confused is the property you are binding to is Picture or UriSource?

    Thanks
    Lee

    Imported from legacy forums. Posted by Lee (had 7072 views)

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.