This is an evolution of my frequently-referenced Custom Xamarin Demos repo, but strictly for .NET MAUI applications. This is where you will find helpful implementations of edge-case scenarios that fall outside the scope of support.
This project contains DataGrid with automatic load on demand, fetching data from a database using EntityFrameworkCore.
This demo contains a RadChat, directly connected to an entityFramework DBcontext.
Future plans are to also include SignalR and gRPC service sources.
This demo uses conditional logic, with a custom HeaderItem ControlTemplate to only show notification badges on specific tab headers. This is accomplished by combining information from both the TabViewHeaderItem context and the Label.Text value to determine if the Label should be visible for that specific tab.
Create a custom CAPTCHA control using using multiple fonts and colors using .NET MAUI's CanvasView to render different random characters with AttributedText and the DrawText method.
Visit Microsoft's 'draw attributed text' documentation example to learn more.
This example uses .NET MAUI's new DependencyInjection system to register a popup service that can be used anywhere in the app. Please visit the README for information on how it works.
As a sneak peek, here is the service being used in a view model.
public class HomeViewModel
{
private readonly PopupService popupService;
public HomeViewModel(PopupService service)
{
this.popupService = service;
OpenPopupCommand = new Command(OpenPopup);
}
public Command OpenPopupCommand { get; set; }
private void OpenPopup()
{
var popupContent = CreatePopupContent();
// ***** Open the popup ***** //
popupService.OpenPopup(popupContent);
}
...
}This demo shows how to dynamically load signatures and swap between edit-mode with the RadSignaturePad, and view-mode with the Image of the saved signature.
When the app launches, it first checks to see if a signature was already saved. If there was a previous signature, it will load that and start in view-mode. Otherwise, it will start in edit-mode.
If you would like more control over the appearance of your chart legend, create a completely custom legend with minimal effort using a RadItemsControl and the chart's Loaded event. This demo shows you exactly how it's done, visit MainPage to see the code (Jump to code).
In order to print in .NET MAUI, you must use the native platform APIs. On Windows, this also includes manually preparing the print preview. This example shows you how to print a PDF file on Windows, iOS, MacCatalyst, and Android (Jump to code).
The code is in the Helpers folder, with each platform having its's own class file. Here's the result when starting a print on Windows.
This is very document specific, you will need to do different work for different document types as this demo project is simply a place for you to get started.
This demo has a custom ReportViewer for .NET MAUI (Jump to code). That control's platform handler does two things:
- On Windows, it uses the native winUI 3 ReportViewer throught he MAUI handler. This is a pure native Windows implementation.
- On iOS, MacCatalyst, and Android: The HTML5 ReportViewer is used in a WebView thorugh BindableProperties to render reports.
<controls:MauiReportViewer
RestServiceUrl="https://webapifortelerikdemos.azurewebsites.net/api/reports"
ReportName="Barcodes Report.trdp"/>
For more information, see the code in the Handlers folder.
A custom project that demonstrates "tear-able tabs" with RadTabView and .NET MAUI's multi-window features. You can break off a tab from one window and it will be moved to the new window instance (Jump to code).
The buttons in the tab headers also let you move tabs left or right.
This demo shows you how you can leverage .NET MAUI's built-in Dependency Injection to achieve IoC with your views and view models (Jump to code).
This example comes with both the server and client projects. It uses a DataGrid to show results form real-time stock trades (Jump to code).
Please refer to Microsoft gRPC documentation for more information about gRPC in a .NET application.
This is project that has various custom controls and will evolve over time as I add more (Jump to code).
FloatingLabelLabeledCheckBoxColumnChooserPartialRatingSegmentView
Unfocused with RadEntry
Focused with RadEntry
Focused with RadEntry and Text Content
Can be attached to any RadDataGrid to allow the app user to show/hide any column.
<Grid ColumnDefinitions="*, Auto">
<telerik:RadDataGrid x:Name="MyDataGrid"
AutoGenerateColumns="False">
<telerik:RadDataGrid.Columns>
<telerik:DataGridTextColumn PropertyName="Name" HeaderText="Name" />
<telerik:DataGridNumericalColumn PropertyName="Age" HeaderText="Age" />
<telerik:DataGridDateColumn PropertyName="DateOfBirth" HeaderText="DOB" CellContentFormat="{}{0:MM/dd/yyyy}" />
</telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>
<!-- Associate with a DataGrid -->
<dataGrid:ColumnChooser x:Name="Chooser"
AssociatedDataGrid="{x:Reference MyDataGrid}"
Margin="20"
Grid.Column="1" />
</Grid>A rating control that can render fractional values.
<input:PartialRating x:Name="RottenTomatoesRating"/>private void Button_OnClicked(object sender, EventArgs e)
{
var rating = Random.Shared.Next(0,5) + Random.Shared.NextDouble();
RottenTomatoesRating.SetRating(rating);
}
<input:SegmentView x:Name="MySegmentView"
SelectedSegmentTextColor="#036ecb"
SelectedSegmentBackgroundColor="#e0edf8"
BackgroundColor="White"
BorderColor="#e1e1e1"
CornerRadius="4"
FontSize="12"
HeightRequest="30"
Margin="5" />MySegmentView.ItemsSource = [
new SegmentItem() { Text = "Breakfast", ImageSource = ImageSource.FromFile("breakfast.png") },
new SegmentItem() { Text = "Lunch", ImageSource = ImageSource.FromFile("lunch.png") },
new SegmentItem() { Text = "Dinner", ImageSource = ImageSource.FromFile("dinner.png") }
];This demo shows you how you can use FlyoutPage to navigate around an application (Jump to code). It shows you both top level and drill-down details page navigation without using Shell.
On initial launch, the FlyoutPage's Detail property is set to an instance of a ContentPage for authentication.
After signing in, the Detail of the FlyoutPage is replaced with a NavigationPage. The lets the user navigate around the app using the menu on the left.
- That menu is actually a ContentPage hosted by the
FlyputPage.Flyoutproperty. - The area on the right is a "RoutesPage" ContentPage hosted in a NavigationPage which is set to the
FlyoutPage.Detail
Finally, because the FlyoutPage.Detail is a NavigationPage, we can 'drill-down' navigate from the RoutesPage to a "RouteDetailPage" while still technically being on the Routes page that was selected in the menu.
This demo shows you how you can access the XAML part of a .NET MAUI Blazor Hybrid application (Jump to code). It uses a simple RadPopup, but the concept applies to anything else you might want to do on top of the BlazorWebView.