{"id":13691815,"url":"https://github.com/dotnet/Microsoft.Maui.Graphics.Controls","last_synced_at":"2025-05-02T16:30:32.519Z","repository":{"id":38066184,"uuid":"322394142","full_name":"dotnet/Microsoft.Maui.Graphics.Controls","owner":"dotnet","description":"Experimental Microsoft.Maui.Graphics.Controls - Build drawn controls (Cupertino, Fluent and Material)","archived":true,"fork":false,"pushed_at":"2023-10-29T02:29:29.000Z","size":16138,"stargazers_count":651,"open_issues_count":33,"forks_count":64,"subscribers_count":50,"default_branch":"main","last_synced_at":"2024-09-29T21:02:42.488Z","etag":null,"topics":["controls","cupertino","dotnet","dotnet-maui","drawn","drawn-controls","fluent","hacktoberfest","material","xamarin"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dotnet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-12-17T19:35:04.000Z","updated_at":"2024-09-17T02:39:05.000Z","dependencies_parsed_at":"2024-01-30T00:14:49.079Z","dependency_job_id":null,"html_url":"https://github.com/dotnet/Microsoft.Maui.Graphics.Controls","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnet%2FMicrosoft.Maui.Graphics.Controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnet%2FMicrosoft.Maui.Graphics.Controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnet%2FMicrosoft.Maui.Graphics.Controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnet%2FMicrosoft.Maui.Graphics.Controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dotnet","download_url":"https://codeload.github.com/dotnet/Microsoft.Maui.Graphics.Controls/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224319366,"owners_count":17291828,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["controls","cupertino","dotnet","dotnet-maui","drawn","drawn-controls","fluent","hacktoberfest","material","xamarin"],"created_at":"2024-08-02T17:00:50.720Z","updated_at":"2024-11-12T17:32:09.054Z","avatar_url":"https://github.com/dotnet.png","language":"C#","funding_links":[],"categories":["Components","UI"],"sub_categories":["Get Started"],"readme":"# Microsoft.Maui.Graphics.Controls: Pixel-Perfect Drawn Controls for .NET MAUI\n\n[![Build Status](https://dev.azure.com/devdiv/DevDiv/_apis/build/status/MAUI.Graphics.Controls?repoName=dotnet%2FMicrosoft.Maui.Graphics.Controls\u0026branchName=main)](https://dev.azure.com/devdiv/DevDiv/_build/latest?definitionId=14477\u0026repoName=dotnet%2FMicrosoft.Maui.Graphics.Controls\u0026branchName=main)\n\nMicrosoft.Maui.Graphics.Controls is a **.NET MAUI experiment** that offers cross-platform, pixel-perfect, drawn controls, with three built-in themes: **Cupertino**, **Fluent** and **Material**.\n\n\u003cimg src=\"images/graphicscontrols-platforms.png\" Width=\"100%\" /\u003e \n\n**NOTE:** Want to see all of this in action? Have a look at this [video](https://www.youtube.com/watch?v=hLcpAgWCHf4)\n\n#### Microsoft.Maui.Graphics\n\nThis project uses [Microsoft.Maui.Graphics](https://github.com/dotnet/Microsoft.Maui.Graphics) to draw the controls.  Microsoft.Maui.Graphics is a cross-platform graphics library for iOS, Android, Windows, macOS and Linux completely built in C#.\n\nThis library allows you to use a common API across multiple platforms allowing you to share your drawing code between them, or mix and match graphics implentations within a single application.\n\n## How To Use This Library\nAt the moment this library is experimental. Because of this we are distributing it as a NuGet package on a separate feed (aka nightly).\n\nIf you want to try it out, add the nightly feed to your [NuGet sources](https://docs.microsoft.com/nuget/consume-packages/install-use-packages-visual-studio#package-sources) or [add a NuGet.config file](https://docs.microsoft.com/nuget/reference/nuget-config-file) like below and install the `Microsoft.Maui.Graphics.Controls` package.\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cconfiguration\u003e\n  \u003cpackageSources\u003e\n    \u003cclear /\u003e\n    \u003cadd key=\"maui-graphics-controls-nightly\" value=\"https://aka.ms/maui-graphics-controls-nightly/index.json\" /\u003e\n    \u003cadd key=\"NuGet.org\" value=\"https://api.nuget.org/v3/index.json\" /\u003e\n  \u003c/packageSources\u003e\n\u003c/configuration\u003e\n```\n\nAfter adding the Microsoft.Maui.Graphics.Controls package, modify the MauiProgram class to register the drawn control handlers:\n\n```csharp\npublic static class MauiProgram\n{\n    public static MauiApp CreateMauiApp()\n    {\n        var appBuilder = MauiApp.CreateBuilder();\n\n        appBuilder\n            .UseMauiApp\u003cApp\u003e()\n            .ConfigureGraphicsControls();\n\n        return appBuilder.Build();\n    }\n}\n```\n\n## What controls are available?\n\nCurrently, the following controls are available:\n\n| Control | Cupertino | Fluent | Material |\n| --- | :---: | :---: | :---: |\n| Button | ✅ | ✅ | ✅ |\n| CheckBox | ✅ | ✅ | ✅ |\n| DatePicker | ✅ | ✅ | ✅ |\n| Editor | ✅ | ✅ | ✅ |\n| Entry | ✅ | ✅ | ✅ |\n| ProgressBar | ✅ | ✅ | ✅ |\n| RadioButton | ✅ | ✅ | ✅ |\n| Slider | ✅ | ✅ | ✅ |\n| Stepper | ✅ | ✅ | ✅ |\n| Switch | ✅ | ✅ | ✅ |\n| TimePicker | ✅ | ✅ | ✅ |\n\nThe controls above have the same properties and events as they exist in Xamarin.Forms/.NET MAUI today.\n\n## Features\n\nThe main features are:\n\n#### Drawn controls\n\nThe supported controls are fully drawn by using the **Microsoft.Maui.Graphics** library. This means you will get pixel perfect rendering on all supported platforms. Have a look at the `Stepper` control showing the `IsEnabled` state in the image below.\n\n\u003cimg src=\"images/graphicscontrols-isenabled.gif\" Width=\"220\" /\u003e \n\n### Different Looks\nEach control implements 3 looks: **Cupertino**, **Material** and **Fluent**. As you might have gotten from the names, these mimic the native look of iOS, Android and Windows respectively.\n\nOn top of that, you can easily add your own custom look and theming to each control as you wish.\n\n#### Easy to extend\n\n_Do you want to extend a drawn control?_ Create your own control class, inherit from the drawn control and override the **Draw** method. This allows you to implement your own drawing logic entirely.\n\n```\npublic class CustomControl : GraphicsView\n{\n    public override void Draw(ICanvas canvas, RectangleF dirtyRect)\n    {\n        base.Draw(canvas, dirtyRect);\n    }\n}\n```\n\nHowever, if you just want to customize one part of a control, you just have to overwrite the method that draws the layer for this control.\n\n```\npublic class CustomSlider : Slider\n{\n    protected override void DrawSliderThumb(ICanvas canvas, RectangleF dirtyRect)\n    {\n        base.DrawSliderThumb(canvas, dirtyRect);\n    }\n}\n```\n\nAdditionally you can also add completely new layers, delete existing layers or reorganize the priority when drawing the layers to achieve the exact look and feel you're after.\n\n#### Dark Theme support\n\nAll controls, in the different visual modes (Cupertino, Fluent and Material) supports both light and dark theme. Below you can see an example of various controls switching between the two modes.\n\n\u003cimg src=\"images/graphicscontrols-darktheme.gif\" Width=\"220\" /\u003e \n\n#### RTL support (Work in progress)\n\nAll controls support Right-To-Left (RTL) out of the box. Have a look at the `Stepper` control showing both RTL and LTR in the image below.\n\n\u003cimg src=\"images/graphicscontrols-rtl.png\" Width=\"220\" /\u003e \n\n#### Mobile \u0026 Desktop support\n\nThe implemented controls are useable on both mobile and desktop platforms. In the image below you can see an example of the controls running on macOS.\n\n\u003cimg src=\"images/graphicscontrols-mac.gif\" Width=\"600\" /\u003e \n\n#### Accessibility support\n\nBuilding an accessible application ensures that the application is usable by people who approach the user interface with a range of needs and experiences.\n\nWith these controls you will be able to set properties to influence the native accessibility features on each platform. This way we can make apps the best experience for everyone.\n\n(Work in progress)\n\n#### Performance\n\nSome native controls are complex. For example, Entry using Visual Material is made up of different elements. When using it, each of the different elements must be instantiated (the text box, the placeholder text, etc.). Using the drawn control, create an instance of a Canvas and draw the content. The time required to instantiate etc is shorter.\n\n## Goals\n\n* Have pixel-perfect drawn controls working on all the .NET MAUI supported platforms.\n* High performance and customization options controls.\n\n## Contributing\n\nAs an experimental project, there are several active areas of development and we're looking for your feedback to help set the direction for this project. Please check it out and let us know any feedback you have on the project by logging issues in this repo.\n\nIf you want to help develop this library, have a look at the issues that are labeled `help wanted`, `community` or `good first issue`.\n\nThank you!\n\n## Copyright and license\n\nAll code is released under the [MIT license](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotnet%2FMicrosoft.Maui.Graphics.Controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdotnet%2FMicrosoft.Maui.Graphics.Controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotnet%2FMicrosoft.Maui.Graphics.Controls/lists"}