How to Build a Real Time Trader Grid App in .NET MAUI DataGrid?

In this article, we will demonstrate how to build a real-time trader grid app with .NET MAUI DataGrid.

xaml
The code below demonstrates how to set up a real-time trader grid app with SfDataGrid.

 <ContentPage.BindingContext>
     <local:StockViewModel x:Name="viewModel" />
 </ContentPage.BindingContext>

 <ContentPage.Resources>
     <local:TextForegroundConverter x:Key="textForegroundConverter" />
     <local:MarketCapConverter x:Key="MarketCapConverter" />
 </ContentPage.Resources>
 
 <sfgrid:SfDataGrid x:Name="dataGrid"
                    x:DataType="local:StockViewModel"
                    ItemsSource="{Binding Stocks}"
                    AutoGenerateColumnsMode="None"
                    ColumnWidthMode="Fill"
                    HeaderRowHeight="58"
                    NavigationMode="Row"
                    RowHeight="52"
                    SelectionMode="Multiple"
                    HorizontalScrollBarVisibility="Always"
                    VerticalScrollBarVisibility="Always">

     <sfgrid:SfDataGrid.DefaultStyle>
         <sfgrid:DataGridStyle HeaderRowFontAttributes="Bold" />
     </sfgrid:SfDataGrid.DefaultStyle>

     <sfgrid:SfDataGrid.Columns>

         <sfgrid:DataGridTextColumn CellTextAlignment="Center"
                                    HeaderTextAlignment="Center"
                                    MappingName="Symbol"
                                    HeaderText="Symbol" />

         <sfgrid:DataGridTextColumn CellTextAlignment="Center"
                                    HeaderTextAlignment="Center"
                                    MappingName="CompanyName"
                                    HeaderText="Company Name" />


         <sfgrid:DataGridNumericColumn CellTextAlignment="Center"
                                       HeaderTextAlignment="Center"
                                       HeaderText="Price"
                                       MappingName="Price"
                                       Format="F2" />

         <sfgrid:DataGridTemplateColumn CellTextAlignment="Center"
                                        HeaderTextAlignment="Center"
                                        HeaderText="Change"
                                        MappingName="Change}">

             <sfgrid:DataGridTemplateColumn.CellTemplate>
                 <DataTemplate>
                     <Label x:Name="label"
                            FontSize="14"
                            FontAttributes="Bold"
                            VerticalOptions="FillAndExpand"
                            HorizontalOptions="FillAndExpand"
                            VerticalTextAlignment="Center"
                            HorizontalTextAlignment="Center"
                            x:DataType="local:Stock"
                            Text="{Binding Change, StringFormat='{0:F2}'}"
                            TextColor="{Binding Change, Converter={StaticResource textForegroundConverter}}"/>
                 </DataTemplate>
             </sfgrid:DataGridTemplateColumn.CellTemplate>
         </sfgrid:DataGridTemplateColumn>

         <sfgrid:DataGridTemplateColumn CellTextAlignment="Center"
                                        HeaderTextAlignment="Center"
                                        HeaderText="Change%"
                                        MappingName="ChangePercentage}">

             <sfgrid:DataGridTemplateColumn.CellTemplate>
                 <DataTemplate>
                     <Label x:Name="label"
                            FontSize="14"
                            FontAttributes="Bold"
                            VerticalOptions="FillAndExpand"
                            HorizontalOptions="FillAndExpand"
                            VerticalTextAlignment="Center"
                            HorizontalTextAlignment="Center"
                            x:DataType="local:Stock"
                            Text="{Binding ChangePercentage, StringFormat='{0:P2}'}"
                            TextColor="{Binding ChangePercentage, Converter={StaticResource textForegroundConverter}}" />
                 </DataTemplate>
             </sfgrid:DataGridTemplateColumn.CellTemplate>
         </sfgrid:DataGridTemplateColumn>

         <sfgrid:DataGridTextColumn CellTextAlignment="Center"
                                    HeaderTextAlignment="Center"
                                    HeaderText="Volume"
                                    MappingName="Volume">
         </sfgrid:DataGridTextColumn>

         <sfgrid:DataGridTemplateColumn CellTextAlignment="Center"
                                        HeaderTextAlignment="Center"
                                        HeaderText="Market Cap"
                                        MappingName="MarketCap}">

             <sfgrid:DataGridTemplateColumn.CellTemplate>
                 <DataTemplate>
                     <Label x:Name="label"
                            FontSize="14"
                            VerticalOptions="FillAndExpand"
                            HorizontalOptions="FillAndExpand"
                            VerticalTextAlignment="Center"
                            HorizontalTextAlignment="Center"
                            x:DataType="local:Stock"
                            Text="{Binding MarketCap, Converter={StaticResource MarketCapConverter}}" />
                 </DataTemplate>
             </sfgrid:DataGridTemplateColumn.CellTemplate>
         </sfgrid:DataGridTemplateColumn>

         <sfgrid:DataGridNumericColumn CellTextAlignment="Center"
                                       HeaderTextAlignment="Center"
                                       HeaderText="Bid"
                                       MappingName="Bid"
                                       Format="F2" />

         <sfgrid:DataGridNumericColumn CellTextAlignment="Center"
                                       HeaderTextAlignment="Center"
                                       HeaderText="Ask"
                                       MappingName="Ask"
                                       Format="F2" />

         <sfgrid:DataGridDateColumn CellTextAlignment="Center"
                                    HeaderTextAlignment="Center"
                                    HeaderText="Time"
                                    MappingName="Time" />

     </sfgrid:SfDataGrid.Columns>

 </sfgrid:SfDataGrid>

C#
The code below represents the MarketCap Converter logic using IValueConverter.

public class MarketCapConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double marketCap)
        {
            if (marketCap >= 1_000_000_000_000) // Trillions
                return $"${marketCap / 1_000_000_000_000:F1} Trillion";
            else if (marketCap >= 1_000_000_000) // Billions
                return $"${marketCap / 1_000_000_000:F1} Billion";
            else if (marketCap >= 1_000_000) // Millions
                return $"${marketCap / 1_000_000:F1} Million";
            else if (marketCap >= 1_000) // Thousands
                return $"${marketCap / 1_000:F1} Thousand";
            else
                return $"${marketCap:N2}"; // Show exact number
        }
        return "N/A";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value; // Not needed in this case
    }
}

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to build a real-time trader grid app in .NET MAUI DataGrid.

You can refer to our .NET MAUI DataGrid feature tour page to learn about its other groundbreaking feature representations.

Explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI DataGrid and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!