Populate WPF DataGrid dynamically

My program needs to take input from a fire alarm panel over a serial connection and populate a list based on it. When a new device is reported from the panel, the statement is parsed and the device is added to the device List.

That part of my program all works fine and dandy. The problem now is displaying the list of fire alarm devices to the user.

I am hoping to do this using a DataGrid (unless there's a better way?) but am not able to find a lot of helpful documentation on WPF DataGrids that is relevant to me. Most of what's out there seems to be displaying data from a database. Mine however, needs to update every time the panel spits out a new device description and the device List in my program is appended.

I see I can set AutoGenerateColumns to true and initially display my list just fine. BUT, I would like to customize the column headers. Also this doesn't upda开发者_如何学JAVAte when the List is appended so I'm not sure how to "refresh" it.

When AutoGenerateColumns is false, I get no data displayed. When the program runs it shows me the correct number of rows corresponding to the number of items in my list, but no data. Wondering how/if I need to link each column with its corresponding device data member?

Lastly, how do you format a DataGrid to look pretty through re-sizes? I can set column width and all that, but what I want is a few of the columns to be fixed width, and the middle column to expand to fill remaining available area.

This is my first stab at WPF. Any help would be greatly appreciated!

---

Personaly i dont like DataGrid much. Yes they are easier to bind and they offer built-in resize and sorting options but they are not as flexible as an ItemsControl with a good DataTemplating on your Objects. Let me explain myself.

I tend to populate my ItemsControl with an ObservableCollection. Then, i use a DataTemplate in order to tell my ItemsControl how to display my custom items.

Your CustomObjects can be Modeles objects if your doing MVVM. If your list is binded to an ObservableCollection, the Added and Removed items will appear dynamicly into your list, which is what i belive your trying to do. For the column size, you could put a Grid specifying GridColumns width to fixed Width for some columns and * for others so they fill the remaining space.

Here's an alternative to the GridView I use a ScrollViewer around my ItemControl so if the ItemsControl get too big, you can scroll it. The ItemsControl's ItemSource is binded to your FireAlarms's ObservableCollection. The WrapPanel in the ItemsControl will contain each DataTemplate. It's Width is binded to his parent (or ancestor if you will) which is an ItemsControl

<ScrollViewer
    Grid.Row="x"
    Grid.Column="y"
    VerticalScrollBarVisibility="Auto"
    Margin="5">

    <ItemsControl
    BorderBrush="DarkBlue"
    BorderThickness="2"
    ItemsSource="{Binding Path=FireAlarms}"
    ItemTemplate="{StaticResource FireAlarmsTemplate}"
    >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel 
                        Orientation="Horizontal"
                        Width="{Binding RelativeSource=
                            {RelativeSource FindAncestor,
                            AncestorType={x:Type ItemsControl}},
                            Path=ActualWidth}"
                        >
                </WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>

Ok then you need a DataTemplate. You can put the DataTemplate in your windows's ressource or in a DataDictionnary. Lets say you have a class :

FireAlarm
{
    Public String AlarmInfo1;
    Public String AlarmInfo2;
    Public String AlarmInfo3;
}

Here could be a nice DataTemplate to start with :

<DataTemplate x:Key="FireAlarms">
    <Border 
        BorderBrush="SteelBlue" 
        Background="LightBlue" 
        BorderThickness="2" 
        Margin="10" 
        Padding="10">
        <StackPanel 
            Orientation="Vertical"
            >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition Width="5"></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>


                <Label 
                    Grid.ColumnSpan="3"
                    Grid.Row="0"
                    Content="{Binding Path=AlarmName}"
                    Margin="5,-5,5,10"
                    FontWeight="Bold"
                    FontSize="16"
                    HorizontalContentAlignment="Center"
                    HorizontalAlignment="Center">
                </Label>

                <TextBlock  
                    Text="Alarm information 1" Grid.Row="1" Grid.Column="0" />
                <TextBox 
                    Text="{Binding Path=AlarmInfo1}"
                    Grid.Column="2"
                    Grid.Row="1"
                    >
                </TextBox>

                <TextBlock 
                    Text="Alarm information 2" Grid.Row="2" Grid.Column="0" />
                <TextBox 
                    Text="{Binding Path=AlarmInfo2}"
                    Grid.Column="2"
                    Grid.Row="2"
                    >
                </TextBox>

                <TextBlock  
                    Text="Alarm information 3" Grid.Row="3" Grid.Column="0" />
                <TextBox 
                    Text="{Binding Path=AlarmInfo3}"
                    Grid.Column="2"
                    Grid.Row="3"
                    >
                </TextBox>
            </Grid>
        </StackPanel>
    </Border>
</DataTemplate>

Ok I hope this is usefull for you. My Template will generate 1 square per alarm. If you'd rather have it in a Table like a GridView, you could modify this using a verticaly oriented stack panel and use a grid with variable // invariable column width but since you asked for anything usefull, i tough i'd guive you something fun to work with!

Enjoy!

---

Some time back I wrote a post Create DataGrid in WPF using code take a look at it, it will help you in creating data grid in dynamic scenarios like yours

---

If you a dynamic grid (meaning the number and design of the columns are unknown at design time), I do it with code-behind with binding. I generally use the MVVM pattern (if you not familiar with this, I really recommend reading into it since it is THE pattern when working with WPF).

1) You have to set Auto-Generate columns to false of course and give grid a name (here myDataGrid)

GridViewDataColumn newColumn= new GridViewDataColumn();
myDataGrid.Columns.Add(newColumn)

This will add the column to your grid. Now the column will be empty. Now it depends on your data how to fill it with data. If you bind to a known property on the items, do:

 newColumn.Binding = new Binding("knownPropertyName");

In most cases though, you do not know the propertyname and bind to an element in the collection. Then it would like more:

 myDoubleCollection.Add(someDoubleValue); //do this for each item in the itemssource of the grid
   int index=myDoubleCollection.Count-1;
   newColumn.Binding = new Binding(string.Format("myDoubleCollection[{0}]",index));

So this works also. Another thing to keep in mind is the deletion of columns. This requires some extra work.

---

That's a lot of questions rolled into one! I suggest you do a bit more background research before asking questions. I would recommend that your read this codeproject article I wrote about the WPF DataGrid a while back:

http://www.codeproject.com/KB/WPF/WPFDataGridExamples.aspx

It will answer most of your questions for you!

---

Take a look at the MVVM pattern, it'll be a huge help as you create this application.

What you want is an ObservableCollection in the ViewModel. You'll bind the ItemsSource property of the datagrid to this collection. Then have your columns bind to various properties on to display them. Whenever this ObservableCollection has an item appended, your front end should update automatically.

To have a column autosize, set the Width="*".

Here's a sample of a datagrid with MVVM

<DataGrid ItemsSource="{Binding FireAlarmCollection}" SelectedItem="{Binding SelectedFireAlarm, Mode=TwoWay}" AutoGenerateColumns="True" CanUserSortColumns="True" HorizontalScrollBarVisibility="Visible" CanUserResizeColumns="True">
</DataGrid>

As you continue your effort, post separate questions for each issue.