How to bind WPF DataGrid to ObservableCollection

Question

Can you give me a tip how to bind a WPF DataGrid to ObservableCollection. I had seen some posts and didn't find a direct answer. There and everywhere intricate problems are described but my problem rather is not sophisticated. I have an observable collection and WPF DataGrid. Both of them are in WPF application which is a client of a duplex contract WCF service. Here is an ObservableCollection:

private ObservableCollection<MyClass> _myCollection = new ObservableCollection<MyClass>();
public ObservableCollection<MyClass> DownloadsCollection
{
    get { return this._downloadsCollection; }
}

Here is a XAML markup with DataGrid:

<Window x:Class="DownloadManager_Client.MainWindow"
. . . . . . . .>

    <DataGrid Name="dgDownloadsInfo" Grid.Row="2" Grid.Column="0" AutoGenerateColumns="False" CanUserAddRows="False"
              CanUserDeleteRows="False" CanUserReorderColumns="False" CanUserResizeColumns="False"
              CanUserResizeRows="False" CanUserSortColumns="False" SelectionMode="Single" SelectionChanged="dgDownloadsInfo_SelectionChanged">
          <DataGrid.Columns>
                <DataGridTextColumn Header="DownloadId" Visibility="Hidden"/>
                <DataGridTextColumn Header="Target URL" FontFamily="Arial" />
                <DataGridTextColumn Header="Content Size" FontFamily="Arial"/>
                <DataGridTextColumn Header="Path to Save" FontFamily="Arial"/>
                <DataGridTextColumn Header="Bytes Downloaded" FontFamily="Arial"/>
                <DataGridTextColumn Header="Percent (%)" FontFamily="Arial"/>
                <DataGridTextColumn Header="Status" FontFamily="Arial"/>
          </DataGrid.Columns>
    </DataGrid>
. . . . . . . .
</Window>

And here is myClass class. It implemented in WCF service. Client receives instances of MyClass in callbacks from WCF service with duplex contract. After each instance of MyClass has been received then it is put in the ObservableCollection to substitute previous one with the same unique identifier.

[DataContract]
public class MyClass
{
    #region Properties

    /// <summary>
    /// Downloading unique ID.
    /// </summary>
    [DataMember]
    public Guid UniqueId { get; set; }
    /// <summary>
    /// Target URL.
    /// </summary>
    [DataMember]
    public String TargetUrl { get; set; }
    /// <summary>
    /// Path to Save.
    /// </summary>
    [DataMember]
    public String PathToSave { get; set; }
    /// <summary>
    /// Percentage.
    /// </summary>
    [DataMember]
    public Int32 Percentage { get; set; }
    /// <summary>
    /// Downloaded bytes number.
    /// </summary>
    [DataMember]
    public Int64 DownloadedBytesQuantity { get; set; }
    /// <summary>
    /// Content size.
    /// </summary>
    [DataMember]
    public Int64 RealContentLength { get; set; }
    /// <summary>
    /// Downloading status.
    /// </summary>
    [DataMember]
    public String Status { get; set; }

    #endregion
}

How can I bind DataGrid to ObservableCollection in my example? Give a hint on this topic. I bag your pardon for my poor English.

What is the problem? Have you read http://stackoverflow.com/questions/15087131/bind-an-observablecollection-to-a-wpf-datagrid-gris-stay-empty? And in which class does your ObservableCollection property located? — Eugene Podskal, Jul 02 '14 at 19:08
ObservableCollection is located in the class of Main Window of WPF application which is the client of WCF service and so is the DataGrid. — user3769902, Jul 02 '14 at 19:13
I have the same issue.. For some reason the data contract class is not working with observablecollection. I changed to simple class and it worked... @user3769902 — Mr. Blond, Apr 11 '15 at 10:36

Nahuel Ianni · Answer 1 · 2014-07-02T19:25:53.340

11

You should be able to do so by using the ItemsSource property of the grid and referencing your collection (probably located in your view model), like this:

ItemsSource="{Binding Path=DownloadsCollection}"

Then add a binding on your columns to show the info (properties) of your MyClass objects in the collection.

For a more detailed tutorial on how to do it, check this link.

Edit:

You can simply try something like this to see if everything works right and then move to custom columns:

<DataGrid ItemsSource="{Binding DownloadsCollection}" />

edited Jul 02 '14 at 19:25

answered Jul 02 '14 at 19:09

Nahuel Ianni

3,177
4
23
30

this way? – user3769902 Jul 02 '14 at 19:17
1

Yes, but don't forget to bind the values on the columns. Either that or make the grid auto generate columns (another one of its properties), and delete your own declaration for them. – Nahuel Ianni Jul 02 '14 at 19:23
Please write how to bind the values on the columns. No, no I'm clear in it. Thanks. – user3769902 Jul 02 '14 at 19:30
It should like like this: Check the link I have on the post, it explains everything you need to know. – Nahuel Ianni Jul 02 '14 at 19:33

score 5 · Answer 2 · edited Oct 14 '17 at 21:16

<DataGrid x:Name="employeeGrid" HorizontalAlignment="Center" VerticalAlignment="Center" AlternatingRowBackground="LightBlue" AlternationCount="2" AutoGenerateColumns="False" ItemsSource="{Binding}">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Emp #" Binding="{Binding EmpId}"/>
        <DataGridTextColumn Header="First Name" Binding="{Binding FirstName}"/>
        <DataGridTextColumn Header="Last Name" Binding="{Binding LastName}"/>
    </DataGrid.Columns>
</DataGrid>

Following goes in your corresponding .cs file:

employeeGrid.ItemsSource = employeeDetails;

score 1 · Answer 3 · edited May 23 '17 at 11:54

1

Datagrid binding in WPF check this answer. Basically you need to add ItemSource binding so your grid knows the datacontext.

Than you need to add binding for datagrid columns, so it knows what to display. Hope this helped.

Furthermore, you may want to add setter for your DownloadsCollection and binding mode if necessary. It is helpful if you need some updates.

edited May 23 '17 at 11:54

Community

1
1

answered Jul 02 '14 at 19:10

makambi

1,100
3
13
30

I don't need to set ObservableCollection itself. I need to set only its items. Thanks. – user3769902 Jul 02 '14 at 19:46
Sorry, I dont get it) You need to set `DownloadsCollection` as datacontext. DataGrid itself is smart enough to iterate though datacontext and use binding to display `items`. Is it what you need? – makambi Jul 02 '14 at 21:31

score 0 · Answer 4 · answered May 31 '17 at 21:26

You can have your dynamic data grid fill like this:

ObservableCollection<CaseItem> data = new ObservableCollection<CaseItem>();
this.CasesDataGrid.ItemsSource = data;

But don't forget to bind the columns with the each item of your class.

XAML code would be something like this:

<DataGrid x:Name="CasesDataGrid" Grid.Row="1" Grid.Column="0" AutoGenerateColumns="False" SelectionUnit="FullRow" SelectionMode="Extended" CanUserAddRows="False" GridLinesVisibility="Horizontal">
<DataGrid.Columns>
<DataGridTextColumn Width="*" Header="ID" Binding="{Binding CaseID}"/>
<DataGridTextColumn Width="*" Header="Date" Binding="{Binding CaseDate}"/>
<DataGridTextColumn Width="*" Header="Plate" Binding="{Binding CasePlate}"/>
<DataGridTextColumn Width="*" Header="Candidate" Binding="{Binding CaseCandidate}"/>
<DataGridTextColumn Width="*" Header="Base" Binding="{Binding CaseBase}"/>
<DataGridTextColumn Width="*" Header="Speed" Binding="{Binding CaseSpeed}"/>
<DataGridTextColumn Width="*" Header="Photo" Binding="{Binding CasePhoto}"/>
</DataGrid.Columns>
</DataGrid>

Hope it's useful to you.

How to bind WPF DataGrid to ObservableCollection

4 Answers4

Linked

Related