How do I design a price ladder / depth of market ladder

See more:

XAML

WPF

C#6.0

Hi I'm trying to design a price ladder/Depth of market ladder, as used in trading. The prices are in the middle column, with bids on left, and asks on right column. As live data is updated the ladder move up or down. I'm using vs wpf c#. So far I've use 2 data grids, 1 above the other. Grid 2 has the bids, and grid 1 has the asks. There linked to an observable collection. I have to sort grid 1 and use code to keep the bottom row showing. It all works, just seems clunky. I tried using 1 data grid but I couldn't keep the middle row displayed when live data was updating. I like to ask is there a better control for this, or even a way for me to design a user control. I've googled loads and I cant find any pointers for this. Thankyou

What I have tried:

my code for the datagrids

<pre>    <DataGrid x:Name="myDataGrid" HeadersVisibility="All" VerticalScrollBarVisibility="Disabled" ColumnHeaderHeight="10"  Grid.Column="0" Grid.Row="2" Grid.RowSpan="1" Grid.ColumnSpan="2" ItemsSource="{Binding Path=BidBookOrders, AsyncState=true}" AutoGenerateColumns="False"  Margin="10,10,10,10" VirtualizingPanel.VirtualizationMode="Recycling"   RowHeight="20">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Bids" Width="50" Binding="{Binding BQuantity}">
                    <DataGridTextColumn.CellStyle>
                        <Style TargetType="DataGridCell">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <MultiBinding Converter="{StaticResource bidColorConverter}">
                                        <Binding Path="BQuantity"/>
                                    </MultiBinding>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </DataGridTextColumn.CellStyle>
                </DataGridTextColumn>

                <DataGridTextColumn Header="Price" Width="55" Binding="{Binding Price, UpdateSourceTrigger=PropertyChanged}">
                    <!--<DataGridTextColumn.CellStyle>
                        <Style TargetType="DataGridCell">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <MultiBinding Converter="{StaticResource priceColorConvertor}">
                                        <Binding Path="Price"/>
                                        <Binding Path="BestAsk"/>
                                        <Binding Path="BestBid"/>

                                    </MultiBinding>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </DataGridTextColumn.CellStyle>-->
                </DataGridTextColumn>

                <DataGridTextColumn Header="Asks" Width="50"></DataGridTextColumn>

                <DataGridTextColumn Header="Total" Width="50" Binding="{Binding Total}"></DataGridTextColumn>

                <DataGridTemplateColumn  Width="100">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <ProgressBar Grid.Row="0" Background="White" Grid.Column="0"  Minimum="0" Maximum="100" Value="{Binding CenTage,Mode=OneWay}" >
                                </ProgressBar>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>




        <DataGrid x:Name="AskDataGrid" ScrollViewer.ScrollChanged="control_ScrollChanged" VerticalScrollBarVisibility="Disabled" CanUserAddRows="False" Grid.Column="0" Grid.Row="0" Grid.RowSpan="1" Grid.ColumnSpan="2" ItemsSource="{Binding Path=AskBookOrders, AsyncState=true}" AutoGenerateColumns="False"  Margin="10,10,10,10" VirtualizingPanel.VirtualizationMode="Recycling"   RowHeight="20" CanUserResizeColumns="False" CanUserSortColumns="true">
            <DataGrid.CellStyle>
                <Style/>
            </DataGrid.CellStyle>
            <DataGrid.Columns>

                <DataGridTextColumn Header="Bids" Width="50">
                </DataGridTextColumn>

                <DataGridTextColumn Header="Price" Width="55" Binding="{Binding Price}">
                    <!--<DataGridTextColumn.CellStyle>
                        <Style TargetType="DataGridCell">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <MultiBinding Converter="{StaticResource priceColorConvertor}">
                                        <Binding Path="Price"/>
                                        <Binding Path="BestAsk"/>
                                        <Binding Path="BestBid"/>

                                    </MultiBinding>
                                </Setter.Value> 
                            </Setter>
                        </Style>
                    </DataGridTextColumn.CellStyle>-->
                </DataGridTextColumn>


                <DataGridTextColumn Header="Asks" Width="50" Binding="{Binding AQuantity}">
                    <DataGridTextColumn.CellStyle>
                        <Style TargetType="DataGridCell">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <MultiBinding Converter="{StaticResource askColorConverter}">
                                        <Binding Path="AQuantity"/>
                                    </MultiBinding>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </DataGridTextColumn.CellStyle>
                </DataGridTextColumn>

                <DataGridTextColumn Header="Total" Width="50" Binding="{Binding Total}"></DataGridTextColumn>

                <DataGridTemplateColumn  Width="100">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <ProgressBar Grid.Row="0"  Background="White" Foreground="LightPink" Grid.Column="0"  Minimum="0" Maximum="100" Value="{Binding CenTage,Mode=OneWay}" >
                                </ProgressBar>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>


            </DataGrid.Columns>
        </DataGrid>

and code to keep bottom row displayed

<pre lang="text"><pre>  private void control_ScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            
            if (e.ExtentHeight < e.ViewportHeight)
                return;
            
            if (AskDataGrid.Items.Count <= 0)
                return;
            
            if (e.ExtentHeightChange == 0.0 && e.ViewportHeightChange == 0.0)
                return;
           
            var oldExtentHeight = e.ExtentHeight - e.ExtentHeightChange;
            var oldVerticalOffset = e.VerticalOffset - e.VerticalChange;
            var oldViewportHeight = e.ViewportHeight - e.ViewportHeightChange;
            if (oldVerticalOffset + oldViewportHeight + 5 >= oldExtentHeight)
                AskDataGrid.ScrollIntoView(AskDataGrid.Items[AskDataGrid.Items.Count - 1]);
        }