Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/syncfusion/maui-toolkit
Syncfusion Toolkit for .NET MAUI offers high-quality UI controls to help you build rich, high-performance applications for iOS, Android, macOS, and Windows from a single codebase
https://github.com/syncfusion/maui-toolkit
android desktop dotnet ios maui mobile multi-platform syncfusion toolkit user-interface winui
Last synced: 1 day ago
JSON representation
Syncfusion Toolkit for .NET MAUI offers high-quality UI controls to help you build rich, high-performance applications for iOS, Android, macOS, and Windows from a single codebase
- Host: GitHub
- URL: https://github.com/syncfusion/maui-toolkit
- Owner: syncfusion
- License: mit
- Created: 2024-10-03T09:49:37.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-01-06T03:50:21.000Z (6 days ago)
- Last Synced: 2025-01-06T18:11:58.665Z (5 days ago)
- Topics: android, desktop, dotnet, ios, maui, mobile, multi-platform, syncfusion, toolkit, user-interface, winui
- Language: C#
- Homepage: https://www.syncfusion.com
- Size: 6.07 MB
- Stars: 291
- Watchers: 12
- Forks: 48
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-dotnet-maui - Syncfusion .NET MAUI Toolkit - source library offering high-quality, customizable UI components, controls, and file-format libraries for building rich, interactive applications across iOS, Android, macOS, and Windows.|[](https://github.com/syncfusion/maui-toolkit/stargazers)|[](https://github.com/syncfusion/maui-toolkit/commits) (UI)
- awesome-maui - Syncfusion .NET MAUI Toolkit - [](https://github.com/syncfusion/maui-toolkit) [](https://github.com/syncfusion/maui-toolkit/stargazers)  - The Syncfusion Toolkit for .NET MAUI is an open-source library offering high-quality, customizable UI components, controls, and file-format libraries for building rich, interactive applications across iOS, Android, macOS, and Windows. (UI / Get Started)
README
# Syncfusion® Toolkit for .NET MAUI
The Syncfusion® Toolkit for .NET MAUI is a high-performance collection of UI controls designed to streamline cross-platform app development across Android, iOS, macOS, and Windows. With this toolkit, developers can deliver beautiful, feature-rich applications with minimal effort, cutting down development time while ensuring a seamless and engaging user experience across platforms.
The Syncfusion® Toolkit is built with community collaboration in mind, aiming to incorporate user feedback and contributions. It is the perfect companion for developers looking to build engaging cross-platform applications faster and more efficiently using the Syncfusion® ecosystem.
[](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit)
[](https://www.nuget.org/stats/packages/Syncfusion.Maui.Toolkit?groupby=Version)
[](./LICENSE.txt)
[](https://dotnet.microsoft.com/download/dotnet/9.0)
## Getting Started ##
* [Install .NET MAUI](https://dot.net/maui)
* [Syncfusion .NET MAUI Toolkit Documentation](https://help.syncfusion.com/maui-toolkit/introduction/overview)
* [Development Guide](./.github/DEVELOPMENT.md)
## Controls list
| **Category** | **Control** | **Description** |
|----------------------|-----------------------|---------------------------------------------------------------------------------------------------------|
| Data Visualization | Cartesian Charts | Versatile data representation using line, bar, and area charts. |
| | Circular Charts | Display proportions and comparisons using pie and doughnut charts. |
| | Pyramid Charts | Visualize hierarchical data, perfect for business and analytics applications. |
| | Funnel Charts | Represent processes and data flow, often used in sales and analytics. |
| | Polar Charts | Showcase categories in a circular format, ideal for unordered data. |
| Calendars | Calendar | The calendar supports month, year, decade, and century views, multiple selection modes, and customizable appearance. |
| Editors | Numeric Entry | Advanced control for numeric input with support for various formats and validation. |
| | Numeric Up Down | Adjust values with up/down buttons and culture-specific formatting. |
| Navigation | Navigation Drawer | Slide-in menu for navigation, positionable on any side of the app with customizable animations. |
| | Tab View | Organize app content with customizable tabs, enabling easy navigation across sections. |
| | Bottom Sheet | Slides up from the bottom of the screen to display additional content or functionality. |
| Layout | Carousel | Smooth, touch-enabled sliding galleries for showcasing images or featured content. |
| | Text Input Layout | Enhances input fields with floating labels and validation, improving user interaction. |
| Buttons | Chips | Interactive tags for filtering, labeling, or visual options, perfect for e-commerce or task management. |
| | Segmented Control | Quickly switch between views or categories, ideal for apps with multiple layout options. |
| | Button | Customizable button control with icon support, background images, and visual state styling. |
| Notification | Pull to Refresh | Allows users to refresh live data by pulling down, ideal for real-time data syncing. |
| Miscellaneous | Effects View | Add visual enhancements like shadows, blurs, or highlights to make UI elements stand out. |
| | Shimmer | Indicates loading content with customizable wave directions, great for data-heavy apps. |
## Installation
You can install the [Syncfusion Toolkit for .NET MAUI](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit) via NuGet:
```
dotnet add package Syncfusion.Maui.Toolkit
```
Alternatively, add it directly in your `.csproj` file:
```xml
```
## Configure Syncfusion® Toolkit
In order to use the Syncfusion® .NET MAUI Toolkit you need to call the extension method in your MauiProgram.cs file as follows:
**MauiProgram.cs**
```csharp
using Syncfusion.Maui.Toolkit.Hosting;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp()
// Initialize the Syncfusion .NET MAUI Toolkit by adding the below line of code
.ConfigureSyncfusionToolkit()
// After initializing the Syncfusion .NET MAUI Toolkit, optionally add additional fonts
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
// Continue initializing your .NET MAUI App here
return builder.Build();
}
}
```
### XAML usage
In order to make use of the toolkit within XAML you can use this namespace:
```xml
xmlns:toolkit="http://schemas.syncfusion.com/maui/toolkit"
```
## Usage Example
Here’s a quick example to get you started with one of the controls, such as the Cartesian Chart:
The following XAML code demonstrates how to set up a basic `SfCartesianChart` using the Syncfusion® MAUI Toolkit. This code snippet should be included in the `MainPage.xaml` file of your MAUI project. It sets up the necessary namespaces, binds the `ViewModel` to the `ContentPage`, and configures the `SfCartesianChart` with `CategoryAxis` for the X-axis and `NumericalAxis` for the Y-axis. The creation of the `ViewModel` will be explained in the following section.
**MainPage.xaml**
```xml
```
Define a simple data model C# class named `Person` to represent a data point, such as a person with a name and height, in your application.
**Person.cs**
```csharp
///
/// Represents a person with a name and height.
///
public class Person
{
///
/// Gets or sets the name of the person.
///
public string Name { get; set; }
///
/// Gets or sets the height of the person.
///
public double Height { get; set; }
}
```
Next, create a ViewModel class in C# and initialize it with a list of `Person` objects:
**ViewModel.cs**
```csharp
///
/// ViewModel class that provides a list of Person objects for data binding.
///
public class ViewModel
{
///
/// Gets or sets the list of Person objects.
///
public List Data { get; set; }
///
/// Initializes a new instance of the ViewModel class with sample data.
///
public ViewModel()
{
// Initialize the Data property with a list of Person objects
Data = new List()
{
new Person { Name = "David", Height = 170 },
new Person { Name = "Michael", Height = 96 },
new Person { Name = "Steve", Height = 65 },
new Person { Name = "Joel", Height = 182 },
new Person { Name = "Bob", Height = 134 }
};
}
}
```
## Support
For any other queries, reach our [Syncfusion support team](https://mauitoolkit.syncfusion.com).
## Contributing
Contributions are welcome! If you'd like to contribute, please check out our [contributing guide](./.github/CONTRIBUTING.md) for details on how to get started. Whether you find a bug, have a feature request, or want to submit code, we appreciate your help in improving the toolkit.
See the [Development Guide](./.github/DEVELOPMENT.md) for more details about this repository and project structure.
## About Syncfusion®
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion® has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
Today, we provide 1800+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [Angular](https://www.syncfusion.com/angular-ui-components?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [React](https://www.syncfusion.com/react-ui-components?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [Vue](https://www.syncfusion.com/vue-ui-components?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget)), mobile ([.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), and [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget) and [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget)).
___
[[email protected]](mailto:[email protected]?Subject=Syncfusion%20Maui%toolkit%20-%20NuGet) | [www.syncfusion.com](https://www.syncfusion.com?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget) | Toll Free: 1-888-9 DOTNET