Click here to Skip to main content
15,391,859 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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]);
        }
Posted
Comments
Greg Utas 14-Apr-22 7:50am
   
I think the ladder would normally be displayed vertically, with asks above and bids below, with the number of bids or asks to the right of those numbers. The price of the last trade would be displayed separately. A histogram of volumes at each price is also useful but relies on historical data.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900