TL;DR: Let’s harness the potential of .NET MAUI DataGrid for real-time trading apps. The blog outlines the steps to set up the project, install required tools, design the UI, bind a data source, and update data dynamically, providing a seamless user experience across platforms.
Modern traders require access to real-time data that is not only accurate but also visually engaging and easy to analyze. With the rise of cross-platform frameworks like .NET MAUI, developers are empowered to build robust, high-performing apps for iOS, Android, Windows, and macOS using a single codebase.
Syncfusion .NET MAUI DataGrid simplifies this process by providing a powerful and feature-rich grid control. In this blog, we will learn to build a real-time trading app using .NET MAUI DataGrid.
Why choose .NET MAUI for your trading app?
.NET MAUI (multi-platform app UI) is Microsoft’s cutting-edge framework for developing cross-platform apps. As an evolution of Xamarin.Forms, it brings significant enhancements in performance, development simplicity, and seamless platform integration.
Here’s why .NET MAUI is the ideal choice for building a trading app:
- Single codebase: Develop your app once and deploy it seamlessly across multiple platforms, including iOS, Android, Windows, and macOS.
- Rich UI capabilities: Design visually appealing and user-friendly interfaces tailored for trading workflows.
- High performance: Engineered for real-time data processing, perfect for rapid updates and responsiveness.
Why choose Syncfusion .NET MAUI DataGrid?
Our .NET MAUI DataGrid is a robust, high-performance control designed to efficiently manage large datasets, making it a premier choice for trading apps. Its key features include:
- Real-time data updates: The grid refreshes automatically when the data source changes, ensuring traders always have up-to-date information.
- Customizable columns: Support data presentation flexibility and align with specific requirements like financial metrics or stock details.
- Sorting and filtering: Enables quick analysis of financial data by organizing and narrowing down relevant information effortlessly.
- High performance: Guarantees smooth scrolling and rendering, even with extensive datasets, ensuring a seamless user experience for traders.
Prerequisites
Before you dive in, ensure you have the following tools installed:
- .NET 8 SDK or later
- Visual Studio 2022 with the .NET MAUI workload
- Syncfusion .NET MAUI controls (You can get a trial or licensed version from our website)
Building a real-time trading app using .NET MAUI DataGrid
Let’s follow these steps to create a real-time trading app using the .NET MAUI DataGrid control:
Step 1: Set up your .NET MAUI project
- First, open Visual Studio and choose Create a new project option.
- Select the . NET MAUI App option and get started by clicking Next.
- Set up your project by specifying its name and location, then click Create.
Step 2: Install the .NET MAUI DataGrid package
To add the .NET MAUI DataGrid control to your project:
- Open the NuGet package manager within Visual Studio.
- Then, search for the Syncfusion.Maui.DataGrid NuGet package.
- Install the package into your project.
Step 3: Create the user interface
The .NET MAUI DataGrid can display and manage stock-related data in a tabular format. It is connected to a collection of stock data from a StockViewModel, with each column mapped to a specific property in the Stock model.
Automatic column generation is disabled by setting the AutoGenerateColumnsMode to None, which ensures that columns are defined manually. We’ve employed the following column types to present data effectively:
- Text columns for displaying text values.
- Numeric columns for numerical data.
- Date columns for dates.
- Template columns for custom rendering and layouts.
Refer to the following example code.
<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.Columns>
<sfgrid:DataGridTextColumn MappingName="Symbol"/>
<sfgrid:DataGridTextColumn MappingName="CompanyName"/>
<sfgrid:DataGridNumericColumn MappingName="Price"/>
<sfgrid:DataGridTemplateColumn MappingName="Change}">
<sfgrid:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Label x:Name="label" FontSize="14" FontAttributes="Bold"
x:DataType="local:Stock"
Text="{Binding Change, StringFormat='{0:F2}'}"
TextColor="{Binding Change,
Converter={StaticResource textForegroundConverter}}"/>
</DataTemplate>
</sfgrid:DataGridTemplateColumn.CellTemplate>
</sfgrid:DataGridTemplateColumn>
<sfgrid:DataGridTemplateColumn MappingName="ChangePercentage}">
<sfgrid:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Label x:Name="label" FontSize="14" FontAttributes="Bold"
x:DataType="local:Stock"
Text="{Binding ChangePercentage, StringFormat='{0:P2}'}"
TextColor="{Binding ChangePercentage, Converter={StaticResource textForegroundConverter}}" />
</DataTemplate>
</sfgrid:DataGridTemplateColumn.CellTemplate>
</sfgrid:DataGridTemplateColumn>
<sfgrid:DataGridTextColumn MappingName="Volume"/>
<sfgrid:DataGridTemplateColumn MappingName="MarketCap}">
<sfgrid:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Label x:Name="label" FontSize="14" x:DataType="local:Stock"
Text="{Binding MarketCap, Converter={StaticResource MarketCapConverter}}" />
</DataTemplate>
</sfgrid:DataGridTemplateColumn.CellTemplate>
</sfgrid:DataGridTemplateColumn>
<sfgrid:DataGridNumericColumn MappingName="Bid"/>
<sfgrid:DataGridNumericColumn MappingName="Ask"/>
<sfgrid:DataGridDateColumn MappingName="Time" />
</sfgrid:SfDataGrid.Columns>
</sfgrid:SfDataGrid>
Step 4: Bind the data source to the .NET MAUI DataGrid
Real-time data binding is essential for building a trader grid and reflecting live market updates. Whether you connect to a live data feed or simulate it, DataGrid needs to manage frequent updates efficiently.
The following code examples demonstrate how to accomplish this using a mock data service with a Model and ViewModel.
Stock.cs (Model)
public class Stock
{
private double _price;
private double _change;
private double _changePercentage;
private int _volume;
private double _marketCap;
private double _bid;
private double _ask;
private string _time;
public string Symbol { get; set; }
public string CompanyName { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double ChangePercentage { get; set; }
public int Volume { get; set; }
public double MarketCap { get; set; }
public double Bid { get; set; }
public double Ask { get; set; }
public string Time { get; set; }
}
ViewModel (StockViewModel)
public class StockViewModel
{
public ObservableCollection<Stock> Stocks { get; set; }
public StockViewModel()
{
Stocks = new ObservableCollection<Stock>(GenerateStocks());
}
private static ObservableCollection<Stock> GenerateStocks()
{
return new ObservableCollection<Stock>
{
new Stock { Symbol = "AAPL", CompanyName = "Apple", Price = 150.00, Volume = 5000000 },
new Stock { Symbol = "GOOGL", CompanyName = "Alphabet", Price = 200.00, Volume = 3000000 },
new Stock { Symbol = "MSFT", CompanyName = "Microsoft", Price = 310.00, Volume = 4000000 },
new Stock { Symbol = "AMZN", CompanyName = "Amazon", Price = 300.00, Volume = 1500000 },
};
}
}
Step 5: Update the real-time stock data periodically
Let’s configure the timer to execute the UpdateStockData method periodically. This method updates the properties of each stock to simulate dynamic market conditions. The timer starts, triggering updates to stock properties every 800 milliseconds.
Each update adjusts prices, recalculates related metrics, and notifies the UI about the changes. Changes made to stock properties are immediately synchronized with the user interface, ensuring the .NET MAUI DataGrid displays the latest data without manual refreshing actions.
Refer to the following code example.
public class StockViewModel
{
public ObservableCollection<Stock> Stocks { get; set; }
private readonly System.Timers.Timer _timer;
private readonly Random _random = new();
private static readonly long[] ranges = { 1_000_000, 1_000_000_000, 1_000_000_000_000 };
public StockViewModel()
{
Stocks = new ObservableCollection<Stock>(GenerateStocks());
_timer = new System.Timers.Timer(800);
_timer.Elapsed += (s, e) => UpdateStockData();
_timer.Start();
}
private void UpdateStockData()
{
foreach (var stock in Stocks)
{
double oldPrice = stock.Price;
stock.Price += (_random.NextDouble() * 4 - 2);
stock.Change = stock.Price - oldPrice;
stock.ChangePercentage = (stock.Change / stock.Price);
stock.MarketCap = CalculateMarketCap(stock.Price);
stock.Volume += (int)_random.NextInt64(1000);
stock.Bid = stock.Price - _random.NextDouble();
stock.Ask = stock.Price + _random.NextDouble();
stock.Time = DateTime.Now.ToString("HH:mm:ss");
}
}
}
Refer to the following image.
GitHub reference
For more details, refer to the building a real-time trading app using the .NET MAUI DataGrid GitHub demo.
Conclusion
Thank you for reading! In this blog, we’ve leveraged the Syncfusion .NET MAUI DataGrid control to enable developers to create cutting-edge, cross-platform trading app with real-time data updates and robust UI capabilities, making it an indispensable tool for modern traders. Feel free to try the steps outlined in this blog and share your thoughts in the comments below.
For our customers, the latest version of Essential Studio® is available from the License and Downloads page. If you’re not a Syncfusion® customer, try our 30-day free trial to evaluate our components.
If you have any questions or need assistance, you can reach us through our support forum, support portal, or feedback portal. We’re always here to help!
Top comments (0)