WPF DataGrid Dymanic Column binding

Question

I am new to WPF and got one problem. I am using DataGrid where row are fix (only 3 row) but column can be added at run time.

Row 1 :- Stock Name
Row 2 :- Current Price
Row 3 :- Old Price

and the Row 2 and 3 will get updated at runtime every second. i have class as below :-

class Stock
{
String name;
double currentPrice;
double oldPrice;
} 

class StockCollaction
{

List<Stock> list = new List<Stock>();

public void addStock(Stock stock)
{
list.add(stock);
}

public void update()
{
....
}
.....
}

I want to create DataGrid like below (Where each column need to bind with model, instead of row):-

please guide me how can i get it done, any specific link to refer will be a great help, i think i have to use MVVM.

Answer 1

In order to update the stock prices and add new stocks at runtime, Stock should implement INotifyPropertyChanged and use ObservableCollection instead of List<Stock>.

Expose the stock list via a public property, from the post you can also learn how to set the DataContext and ItemsSource of the DataGrid. This is how StockCollection class looks like

public class StockCollection
{
    private ObservableCollection<Stock> stocks;
    public ObservableCollection<Stock> Stocks
    {
        get 
        { 
            return stocks; 
        }
    }
    //...add(), update() and other methods/properties
}

Now the XAML code.

Using the built-in DataGrid you add a new row, not a new column for a stock. You could find a 3rd party DataGrid that supports inverted axes, as Mike suggested in his comment, or - this is a funny part in learning WPF - you rotate the DataGrid by applying a RotateTransform.

In my code sample I define 2 DataGrid, one is normal, one is rotated 90 degrees. The code is modified from another post. You need to play with DataGrid.ColumnHeaderStyle, DataGrid.LayoutTransform and DataGrid.CellStyle to rotate the DataGrid.

<StackPanel Margin="100">
            <DataGrid x:Name="dataGrid1" Width="200" Height="120" AutoGenerateColumns="False"
                  ItemsSource="{Binding Stocks}"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Top"
                  HorizontalScrollBarVisibility="Hidden"
                  VerticalScrollBarVisibility="Hidden">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Old Price" Binding="{Binding Path=OldPrice}"/>
                    <DataGridTextColumn Header="Current Price" Binding="{Binding Path=CurrentPrice}"/>
                    <DataGridTextColumn Header="Name" Binding="{Binding Path=Name}" Width="*"/>
                </DataGrid.Columns>
            </DataGrid>
            <Grid Height="100"></Grid>
            <DataGrid x:Name="dataGrid2" Width="100" Height="500" AutoGenerateColumns="False"
                  ItemsSource="{Binding Stocks}"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Top"
                  HorizontalScrollBarVisibility="Hidden"
                  VerticalScrollBarVisibility="Hidden">
                <DataGrid.ColumnHeaderStyle>
                    <Style TargetType="{x:Type DataGridColumnHeader}">
                        <Setter Property="LayoutTransform">
                            <Setter.Value>
                                <TransformGroup>
                                    <RotateTransform Angle="90"/>
                                </TransformGroup>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Width" Value="120"/>
                        <Setter Property="Height" Value="30"/>
                    </Style>
                </DataGrid.ColumnHeaderStyle>
                <DataGrid.LayoutTransform>
                    <TransformGroup>
                        <RotateTransform Angle="-90"/>
                    </TransformGroup>
                </DataGrid.LayoutTransform>
                <DataGrid.CellStyle>
                    <Style TargetType="{x:Type DataGridCell}">
                        <Setter Property="LayoutTransform">
                            <Setter.Value>
                                <TransformGroup>
                                    <RotateTransform Angle="90"/>
                                </TransformGroup>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Width" Value="120"/>
                        <Setter Property="Height" Value="30"/>
                    </Style>
                </DataGrid.CellStyle>
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Old Price" Binding="{Binding OldPrice}" />
                    <DataGridTextColumn Header="Current Price" Binding="{Binding CurrentPrice}"/>
                    <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
                </DataGrid.Columns>
            </DataGrid>
        </StackPanel>