{"id":14968296,"url":"https://github.com/vincenth-net/csharpformarkup","last_synced_at":"2025-05-15T12:06:43.970Z","repository":{"id":42181941,"uuid":"126183558","full_name":"VincentH-Net/CSharpForMarkup","owner":"VincentH-Net","description":"Concise, declarative C# UI markup for .NET browser / native UI frameworks","archived":false,"fork":false,"pushed_at":"2025-05-12T12:46:37.000Z","size":18331,"stargazers_count":784,"open_issues_count":8,"forks_count":45,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-05-12T14:09:20.065Z","etag":null,"topics":["csharp","ide-support","maui","readability","uno-platform","winui3","wpf","xamarin","xamarin-forms","xaml"],"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/VincentH-Net.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"VincentH-Net"}},"created_at":"2018-03-21T13:33:05.000Z","updated_at":"2025-05-10T19:42:08.000Z","dependencies_parsed_at":"2024-04-22T15:29:55.683Z","dependency_job_id":"5cf6f8ea-2a75-4f38-ad70-26abf2ce2288","html_url":"https://github.com/VincentH-Net/CSharpForMarkup","commit_stats":{"total_commits":335,"total_committers":4,"mean_commits":83.75,"dds":0.09552238805970148,"last_synced_commit":"75bd287880305700e97609e8bb8a784ab367283b"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VincentH-Net%2FCSharpForMarkup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VincentH-Net%2FCSharpForMarkup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VincentH-Net%2FCSharpForMarkup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VincentH-Net%2FCSharpForMarkup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VincentH-Net","download_url":"https://codeload.github.com/VincentH-Net/CSharpForMarkup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337613,"owners_count":22054253,"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":["csharp","ide-support","maui","readability","uno-platform","winui3","wpf","xamarin","xamarin-forms","xaml"],"created_at":"2024-09-24T13:39:40.431Z","updated_at":"2025-05-15T12:06:38.952Z","avatar_url":"https://github.com/VincentH-Net.png","language":"C#","readme":"# C# Markup 2\n*Concise* next-gen C# Markup for .NET UI frameworks\n\n## C# Markup 2 for Uno Platform\nC# Markup 2 supports multiple UI frameworks, including the **excellent** [Uno Platform](https://platform.uno/).\n\nIf you don't know Uno, I recommend you check them out; Uno is one of the best and most mature .NET UI frameworks, it offers an impressive breadth of features that will have your back when you need to create real-world production apps end2end, *fast*.\n## Quick play-around\n```bat\ndotnet new install Uno.Templates\ndotnet new install Modern.CSharp.Templates\n\nmd UnoCSharpMarkup2\ncd UnoCSharpMarkup2\n\ndotnet new unoapp -preset recommended\ndotnet new mcs-uno-markup2 --presentation mvux --allow-scripts yes\n\n```\n\n## Markup options at a glance - good for everyone!\nUno Platform supports XAML but recently has embraced C# UI as well with [Uno C# Markup](https://platform.uno/c-markup/). C# Markup 2 adds another option that goes above and beyond what gen-1 C# Markup variants offer.\n\nIt's good to have options - everyone wins: devs get the experience that they like best, and the UI framework gains more adoption. Check it out and pick what you like!\n\nAs a first impression, here's a quick side-by-side comparison:\n![XAML - C# Markup 2 - Uno C# Markup](img/CSharpMarkup2-UnoCSharpMarkup-XAML.png)\n\nEnjoy a Flutter-like UI development experience with C# Markup 2:\n- Build **.NET applications fully in C#**\n- Unclutter your markup - while reading *and* writing.\u003cbr /\u003e\n  - C# Markup **2** goes above and beyond gen 1 C# Markup approaches (e.g. [Maui](https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/markup/markup) or [Uno](https://aka.platform.uno/csharp-markup)) to eliminate a lot of verbosity: no more endless repetitions of `new `, `HorizontalAlignment = HorizontalAlignment.Center`, `() =\u003e ` or `nameof()`, no more specifying for each and every `TextBlock` binding that yes, you want to bind to the `Text` property...\n  - Separated markup namespaces eliminate intellisense pollution, allow quick discovery and encourage clean separation of markup and logic: no more intellisense lists where you have to search in a sea of irrelevant options for the few that you are interested in. See only Markup API's while editing `MyPage.cs`, see UI framework and other API's while editing `MyPage.logic.cs`.\n- Target browsers and native desktop / mobile\n- Use existing UI frameworks. Mature or bleeding edge is *your* choice: WPF, WinUI 3 for Windows App SDK and Uno Platform. Coming: AvaloniaUI, Maui, possibly Blazor.\n- Use the built-in MVVM support - or any other update model that supports your UI framework (e.g. [Uno's MVUX](https://platform.uno/docs/articles/external/uno.extensions/doc/Overview/Mvux/Overview.html) or [ReactiveUI](https://www.reactiveui.net/))\n- Use for part or all of your application UI\n- Designed to handle large UI fast: practically allocation-free, no reflection, efficient C#\n\nNo XAML / HTML / JavaScript / CSS required. No engine or layers to get in your way.\n \n![Markup Example Flutter Page](img/markup-example-flutter-page.png)\n\n\u003e NuGet\u003cbr /\u003e\n\u003e[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/Modern.CSharp.Templates?color=gold\u0026label=Modern.CSharp.Templates\u0026style=plastic)](https://www.nuget.org/packages/Modern.CSharp.Templates)\u003cbr /\u003e\n\u003e[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/CSharpMarkup.WinUI?color=gold\u0026label=CSharpMarkup.WinUI\u0026style=plastic)](https://www.nuget.org/packages/CSharpMarkup.WinUI)\u003cbr /\u003e\n\u003e[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/CSharpMarkup.WinUI.Uno.Toolkit?color=gold\u0026label=CSharpMarkup.WinUI.Uno.Toolkit\u0026style=plastic)](https://www.nuget.org/packages/CSharpMarkup.WinUI.Uno.Toolkit)\u003cbr /\u003e\n\u003e[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/CSharpMarkup.WinUI.Uno.Extensions.Reactive?color=gold\u0026label=CSharpMarkup.WinUI.Uno.Extensions.Reactive\u0026style=plastic)](https://www.nuget.org/packages/CSharpMarkup.WinUI.Uno.Extensions.Reactive)\u003cbr /\u003e\n\u003e[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/CSharpMarkup.WinUI.Uno.Extensions.Navigation?color=gold\u0026label=CSharpMarkup.WinUI.Uno.Extensions.Navigation\u0026style=plastic)](https://www.nuget.org/packages/CSharpMarkup.WinUI.Uno.Extensions.Navigation)\u003cbr /\u003e\n\u003e[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/CSharpMarkup.WinUI.Uno.Extensions.Navigation.Toolkit?color=gold\u0026label=CSharpMarkup.WinUI.Uno.Extensions.Navigation.Toolkit\u0026style=plastic)](https://www.nuget.org/packages/CSharpMarkup.WinUI.Uno.Extensions.Navigation.Toolkit)\u003cbr /\u003e\n\u003e[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/CSharpMarkup.WinUI.LiveChartsCore.SkiaSharpView?color=gold\u0026label=CSharpMarkup.WinUI.LiveChartsCore.SkiaSharpView\u0026style=plastic)](https://www.nuget.org/packages/CSharpMarkup.WinUI.LiveChartsCore.SkiaSharpView)\n\u003e\n\u003e[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/CSharpMarkup.WPF?color=gold\u0026label=CSharpMarkup.WPF\u0026style=plastic)](https://www.nuget.org/packages/CSharpMarkup.WPF)\n\u003e\n\u003e Chat (if needed, [join DotNetEvolution](https://aka.ms/dotnet-discord) first)\u003cbr /\u003e\n\u003e [![Discord](https://img.shields.io/discord/732297728826277939?label=Discord%20%23csharp-markup%20on%20DotNetEvolution\u0026style=plastic)](https://discord.com/channels/732297728826277939/931198774234189844)\u003cbr /\u003e\n\u003e **The best place to ask questions or help!**\n\n# Getting Started\n\n- **Uno Platform / WinUI 3**: [Getting started with C# Markup 2 for WinUI 3 and Windows App SDK / Uno Platform](#getting-started-for-winui-3-and-windows-app-sdk--uno-platform)\n- **WPF**: [Getting started with C# Markup 2 for WPF](#getting-started-for-wpf)\n\n*Looking for C# Markup 1? Find it [here](https://github.com/VincentH-Net/CSharpForMarkup/tree/csharpformarkup1-archive)*\n\n# News\n*May 7, 2024*\n\u003e ## New C# Markup 2.4 for Uno Platform 5.2 incl .NET Single Project\nToday's release is fully updated to Updated to Uno 5.2 including Uno's [.NET Single Project](https://platform.uno/blog/the-first-and-only-true-single-project-for-mobile-web-desktop-and-embedded-in-net/) and `uno.sdk`!\n\nPlus:\n- Added support for latest `dotnet new unoapp` template\n- Updated to Uno.Extensions.* 4.1\n- Updated to Microsoft.WindowsAppSDK 1.5\n\n*Dec 21, 2023*\n\u003e ## New C# Markup 2 templates for Uno Platform 5\nIn addition to some new C# Markup 2 methods, today's release adds support for the new [C# Markup 2 templates for Uno Platform 5](https://github.com/Applicita/Modern.CSharp.Templates): an updated `mcs-uno-markup2` template, and a new `mcs-uno-view` template.\n\n- Enjoy improved frictionless startup for both existing and new Uno solutions - whether created with Uno's `dotnet new unoapp` template or with the Uno solution wizard for Visual Studio\n- Full support for .NET 8 / .NET 7, as well as model types MVUX / MVVM / none\n- The new `mcs-uno-view` template is used by the convenient `New-View.ps1` script, which is included in `mcs-uno-markup2`\n- Templates are now pre-structured in accordance with best practices for maintainability and code reuse of C# Markup 2 UI.\n\n*Nov 18, 2023*\n\u003e ## 2.3 Release is GA - adds support for .NET 8, Uno 5 plus 5 Uno Libraries!\nThis release is fully updated to the awesome **Uno 5** release and .NET 8 GA. You can use the **Uno Solution Wizard for Visual Studio** and add a C# Markup 2 project to it at any time with one command. All Uno wizard customizations are supported: combine C# Markup 2 with MVUX or MVVM, XAML or Uno C# Markup, use Uno Navigation extensions, and target .NET 8 or .NET 7. All Uno target platforms are supported.\n\nA brand new dotnet new C# Markup 2 project template gets you going in no time - carefully optimized for an optimal developer experience: uncluttered solution explorer view, automatic file grouping of markup and logic files, uncluttered markup source, focused intellisense, clear starting points for markup extensions in your code, plus fast hot reload - both automatic and with a hot reload button overlay in debug mode, for the platforms that your IDE can hot reload but cannot (yet) update the UI automatically.\n\nEnjoy general C# Markup 2 improvements, plus C# Markup 2 API's for 5 additional Uno libraries:\n- Support for Uno's [UI Toolkit](https://platform.uno/uno-toolkit/), [Reactive / MVUX extension](https://platform.uno/docs/articles/external/uno.extensions/doc/Overview/Mvux/Overview.html) and [Navigation extensions](https://platform.uno/docs/articles/external/uno.extensions/doc/Overview/Navigation/NavigationOverview.html)\n- Support for the awesome [LiveCharts2](https://livecharts.dev/)\n- All `ThemeResource`s searchable in C# intellisense, strongly typed\n\nThe [getting started](#getting-started-for-winui-3-and-windows-app-sdk--uno-platform) is fully up to date. Examples in this repo and this readme will be updated soon to show off the new features.\n\nNJoy *concise* C# Markup!\n\n*Nov 1, 2023*\n\u003e ## 2.3 Preview Release adds 5 Uno Libraries!\nEnjoy general C# Markup 2 improvements, plus C# Markup 2 API's for 5 additional Uno libraries:\n- Support for Uno's UI toolkit, Reactive and Navigation extensions\n- Support for the awesome [LiveCharts2](https://livecharts.dev/)\n- All `ThemeResource`s searchable in C# intellisense, strongly typed\n- Automatic UI update on C# hot reload\n- A development tools overlay\n\nYou can try this today - see the NuGets listed above.\nDocumentation of the new features plus a new getting started guide is coming with the **next release** - soon!\n\n*June 27, 2023*\n\u003e ## 2.2 Release \u0026 start of .NET MAUI support\n- [Release 2.2 is out](https://twitter.com/vincenth_net/status/1673330170441224192)! Enjoy this polished release for Windows App SDK, Uno Platform and WPF.\n- As the poll results indicated, C# Markup 2 support for **.NET MAUI** is most wanted.\u003cbr /\u003e\n  Implementation [has started](https://twitter.com/vincenth_net/status/1673383755023523857)!\n\n*March 25, 2023*\n\u003e ## Poll results are in! And the winner is...\nThe March 2023 poll results on what to build next for C# Markup 2 are in!\n\nA surprise addition was the ask for C# Markup 2 for Avalonia UI in the replies; it got a big response that catapulted it into a very close 2nd place.\n\nHere are the results for the [poll](https://twitter.com/vincenth_net/status/1637065646688043012) including the likes for \"Other\" options [Blazor](https://twitter.com/vincenth_net/status/1637119462603145226) and [AvaloniaUI](https://twitter.com/alex8x8/status/1638278598267228163):\n\n![Poll202303](img/poll202303.png)\n\nAnd the winner is: **C# Markup 2 for MAUI**!\u003cbr /\u003e\nWatch and star this repo to catch the release; you can also watch [#CSharpForMarkup tweets](https://twitter.com/search?q=%23CSharpForMarkup\u0026src=typed_query\u0026f=live) for progress. Thanks for your response!\n\n*Feb 28, 2023*\n\u003e ## Major Release - C# Markup 2 version 2.0 for WinUI 3!\nC# Markup 2 version 2.0 for WinUI 3 is here! Completely updated to .NET 7, C# 11 and the latest Windows App SDK and Uno Platform.\nWith many improvements including 6 supported target platforms, C# hot reload support and [dotnet new project templates](https://github.com/Applicita/Modern.CSharp.Templates).\n\n**Brought to you by Applicita**\n\nSpecial thanks go to [Applicita](https://applicita.com/) for making this release possible; it's inspiring to see a company support OSS in this way (Applicita also open-sourced several [other useful libraries](https://github.com/Applicita))\n\nMore on what's new in this release [here](https://github.com/VincentH-Net/CSharpForMarkup/releases/tag/csharpmarkup2-winui-2-0-0).\n\n*Feb 16, 2023*\n\u003e ## A new release of C# Markup 2 for WinUI 3 and Uno Platform is coming in Feb 2023\nUpdated to .NET 7, C# 11 and the latest Windows App SDK and Uno Platform. With many improvements - including C# hot reload support and a dotnet new project template.\nWatch this space!\n\n*April 14, 2022*\n\u003e ## New 0.8 release: adds `ControlTemplate` support and `Style` improvements!\nSee [here](https://github.com/VincentH-Net/CSharpForMarkup/releases/tag/csharpmarkup2-winui-wpf-0-8-2) and [here](https://github.com/VincentH-Net/CSharpForMarkup/releases/tag/csharpmarkup2-winui-wpf-0-8-1) for the full list of improvements\n\n*February 15, 2022*\n\u003e ## New 0.6 release: adds WPF and many improvements!\nSee [here](https://github.com/VincentH-Net/CSharpForMarkup/releases/tag/csharpmarkup2-winui-wpf-0-6-14) for the full list of improvements\n\n*November 30, 2021*\n\u003e## C# Markup 2 announced at UNOCONF 2021!\n\u003e This first preview targets WinUI 3 and Uno Platform - including browser webassembly - with C# 10 and .NET 6. It supports .NET Hot Reload for a fast inner dev loop.\n\u003e\n\u003e See the [C# Markup 2 announcement at UNOCONF 2021](https://youtu.be/UJ7EzQeEQAg?t=2566):\n\u003e [![UNOCONF Announces Csharp Markup 2](img/unoconf-announce-csharp-markup-2.png)](https://youtu.be/UJ7EzQeEQAg?t=2566)\n\n## Getting started for WPF\n1. Clone this repo\n2. Open [CSharpMarkup.Wpf.Examples.sln](src/CSharpMarkup.Wpf.Examples/) and explore the source for the example pages. Note how page markup and page logic are separated in partial class files, and integrated with `Build()`, `Assign()` and `Invoke()`.\n3. **.NET Hot Reload** is supported; edit and save the page markup in VS 2022 while debugging to see instant updates\n4. To learn how to use C# Markup 2, read the [features description](#features) below and experiment in the example app\n5. To build your own app, reference [![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/CSharpMarkup.WPF?color=gold\u0026label=CSharpMarkup.WPF\u0026style=plastic)](https://www.nuget.org/packages/CSharpMarkup.WPF) from a .NET 6 WPF project and create the C# Markup UI windows, pages etc in that project. Note that for existing apps you can reference (WPF / class library) projects that target older .NET versions from the .NET 6 project, so you can add C# Markup UI to your app without having to migrate existing logic and/or WPF UI to .NET 6 and C# 10.\n\n## Getting started for WinUI 3 and Windows App SDK / Uno Platform\n1) First check if your development environment is ready:\n    - [Visual Studio 2022 on Windows](https://platform.uno/docs/articles/get-started-vs-2022.html)\n    - [Other IDE's and OS-es](https://platform.uno/docs/articles/get-started.html)\n\n2) Either choose an existing Uno Platform 5.2 solution, or create a new one with the [Uno Platform Template Wizard](https://platform.uno/docs/articles/getting-started/wizard/using-wizard.html) or the [dotnet new unoapp](https://www.nuget.org/packages/Uno.Templates) template. Feel free to select any options; C# Markup 2 fully supports Uno 5.2 with .NET 8 or .NET 7, [MVUX](https://platform.uno/docs/articles/external/uno.extensions/doc/Overview/Mvux/Overview.html) or MVVM, XAML or Uno C# Markup, on all target platforms.\n\n3) Install the latest [Modern.CSharp.Templates](https://www.nuget.org/packages/Modern.CSharp.Templates) for `dotnet new` to get [these templates for Windows App SDK, Uno Platform and more](https://github.com/Applicita/Modern.CSharp.Templates#readme)\n    ```bat\n    dotnet new install Modern.CSharp.Templates\n    ```\n    To see help about the template parameters:\n    ```bat\n    dotnet new mcs-uno-markup2 -h\n    ```\n\n4) Add a C# Markup 2 project to the Uno Platform solution, e.g.:\n    ```bat\n    cd C:\\Repos\\UnoApp1\n    dotnet new mcs-uno-markup2 --appRootNamespace InnoWvate.UnoApp1 --presentation mvux --allow-scripts Yes\n    ```\n\n    This will:\n    - Add a new project `UnoApp1.Presentation` to the solution, with a working example:\n      - Pages\n      - Models of the specified type (in above example [MVUX](https://platform.uno/docs/articles/external/uno.extensions/doc/Overview/Mvux/Overview.html))\n      - Navigation\n      - A `New-View.ps1` script to quickly add more pages and models\n      - A `Readme.md` with instructions on how to get started quickly\n\n      The Presentation project is pre-structured for maintainability in accordance with best practices for C# Markup UI\n    - Add NuGet package references to the Presentation project\n    - Add a reference to the Presentation project in the `UnoApp1` project\n\n    Note that you can use the `--name` parameter of `dotnet new` to specify the name of your *existing* Uno project, if that differs from the solution folder name (in above example, `UnoApp1`). The specified name will be used with the `.Presentation` suffix for the new project as well.\n\n5)  Open or reload the Uno solution and follow the steps in the `Readme.md` of the Presentation project to get started.\n\nTo learn how to use C# Markup 2, read the [features description](#features) below.\n\nFore a more complete example, see the [example app](src/CSharpMarkup.WinUI.Examples/) in this repo.\n\n# Features\nC# Markup 2 contains a full declarative, fluent API for existing UI frameworks. It surfaces virtually every layout, view and property, including attached properties, and includes **full inline documentation** that links each markup helper / parameter to the inline documentation for the underlying UI object / property.\n\nThe rich UI frameworks that C# Markup 2 surfaces can contain as much as **500+ UI object types**. E.g. layouts, views and styles, but also brushes, rich text elements, drawing primitives, transformations, animations, visual states and more. In addition C# Markup offers powerful and concise **convenience API's** for layout, bindings, convertors, templates and more.\n\n- When targeting **Windows Desktop**, the WinUI API from the Windows App SDK is surfaced (without any dependency on Uno Platform).\n- When targeting **Uno Platform**, the Uno.WinUI API is surfaced (atm only webassembly is tested, but any Uno target platform that can support .NET 6 and C# 10 should work)\n- When targeting **WPF**, the WPF API is surfaced.\n\n## Basic markup anatomy\nLayouts, views, properties and property values look like this:\u003cbr /\u003e\n![Markup Basic Anatomy](img/markup-basic-anatomy.png)\u003cbr /\u003e\nAll properties can be set with extension methods: properties defined on the view type or it's base types, as well as attached properties.\n\n**Properties that are defined directly on the view type** can alternatively be set with named parameters:\u003cbr /\u003e\n![Markup View Defined Properties](img/markup-view-defined-properties.png)\u003cbr /\u003e\nThis is mainly useful for properties that take primitive types.\n\n**Properties that take enum values** have extension methods so the enum name does not have to be repeated\u003cbr /\u003e(as in `TextAlignment: TextAlignment.Center`):\u003cbr /\u003e\n![Markup Property Enum Values](img/markup-property-enum-values.png)\n\n**Attached property** names are prefixed with the defining type plus underscore:\u003cbr /\u003e\n![Markup Attached Properties](img/markup-attached-properties.png)\n\nYou can **set multiple attached property values** for the same defining type **in one call**:\u003cbr /\u003e\n![Markup Attached Properties](img/markup-attached-properties-set-multiple.png)\n\nIn addition to this, there are **convenience overloads** for some view types with just the most commonly used parameters:\u003cbr /\u003e\n![Markup View Convenience Overload](img/markup-view-convenience-overload.png)\n\n## Property value converters\nImplicit converters are provided in the `to` subnamespace for common property value types:\u003cbr /\u003e\n![Markup View Convenience Overload](img/markup-converters.png)\n\nThese are:\n- All converters that accept `string` values, as specified by the UI framework with the [TypeConverter attribute](https://docs.microsoft.com/en-us/dotnet/api/system.componentmodel.typeconverterattribute)\u003cbr /\u003e\n  Note that WinUI 3 Desktop does not use this attribute, but Uno Platform and WPF do.\n- Additional manual converters that also accept other types than `string`, including tuples if more than one value is expected. E.g.:\u003cbr /\u003e\n  ![Markup View Convenience Overload](img/markup-converter-cornerradius-doc.png)\u003cbr /\u003e\n  Allows you to specify:\u003cbr /\u003e\n  `Button() .CornerRadius (2.5)` or\u003cbr /\u003e\n  `Button() .CornerRadius ((2.5, 0, 2.5, 0))`\n\nAn example using `to.Point`:\n```csharp\nButton() .Background (RadialGradientBrush (Center: (50, 50), GradientOrigin: (100, 50)))\n```\n\nAn example using `to.TimeSpan` and `to.Duration`:\n```csharp\nColorAnimation (BeginTime: \"0:0:5\", Duration: 2.5)\n```\n\nIn many cases the inline documentation on the `to.` type describes the supported values and formatting; especially for strings this can avoid guesswork.\n\n## Styles\nStyles can be assigned like this:\u003cbr /\u003e\n![Markup Style Usage](img/markup-style-usage.png)\n\nAnd defined like this:\u003cbr /\u003e\n![Markup Style Definition](img/markup-style-definition.png)\n\nIn WPF you can bind a style setter value (WinUI 3 does not support this):\u003cbr /\u003e\n ![Markup Style Setter Binding](img/markup-style-setter-binding.png)\n\n## Templates\nA `DataTemplate` is passed in as a `Func\u003cUIElement\u003e`:\u003cbr /\u003e\n![Markup Templates](img/markup-datatemplate.png)\n\nA `ControlTemplate` can be created like this:\u003cbr /\u003e\n![Markup Templates](img/markup-controltemplate.png)\n- The `.BindTemplate()` method lets you bind template properties to the templated parent\n- The `targetType` parameter is optional\n- `b` here is a null-valued `static UI_Button` field. In this example it only serves to demonstrate one way to get intellisense when editing binding expressions for a `Button`; see [Binding power](#binding-power) for details.\n\nHere is how you can use a `ControlTemplate` in an implicit or explicit `Style`:\u003cbr /\u003e\n![Markup Templates](img/markup-controltemplate-in-style.png)\n\n## Enums for Grid rows and columns\nYou can use enums instead of numbers for Grid rows and colums. This improves readability and saves you from manually renumbering rows and columns when adding/removing/reordering them\u003cbr /\u003e\n![Markup Enums For Grid Rows Columns](img/markup-enums-for-grid-rows-columns.png)\n\n![Markup Enums For Grid Rows Columns Usage](img/markup-enums-for-grid-rows-columns-usage.png)\n\n## Shorthand helpers\nShorthand helpers are included as an alternative to common combinations of markup helpers:\n\n![Markup Shorthand 1](img/markup-shorthand-1.png)\n\n![Markup Shorthand 2](img/markup-shorthand-2.png) \n\n## Insert layout children: conditional and Spread\n\nAll layouts ignore `null` values in their `children`; this makes it possible to have conditional views depending on the value of an expression at page (re) build time.\n\nThe `Spread` helper allows to insert a variable number of children at a specific position in the `children` list (similar to what Flutter offers).\n\n![Markup Layout Insert Children Conditional Spread](img/markup-layout-insert-children-conditional-spread.png)\n\n## Binding power\nThanks to the C# 10 [CallerArgumentExpression attribute](https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-10#callerargumentexpression-attribute-diagnostics), you don't have to use strings or `nameof()` to specify binding paths *with good performance*. Instead you can use C# expressions and enjoy all the goodness that they bring: full intellisense, compiler checked, renaming support :\u003cbr /\u003e\n![Markup Binding Expression](img/markup-binding-expression.png)\n\n**Note** from the intellisense description in above image that the `pathExpression` parameter supports several **convenience binding syntaxes**, which allows to:\n- Identify the viewmodel part of the expression with parenthesis:\u003cbr /\u003e\n  path expression = `viewmodel.path` || `(viewmodel expression).path`, where `path` can contain `.` e.g.:\n  - `.Bind (vm.SelectedTweet)` binds to \"SelectedTweet\"\n  - `.Bind ((vm.SelectedTweet).Title)` binds to \"Title\"\n  - `.Bind ((vm.SelectedTweet).Author.Name)` binds to \"Author.Name\"\n- Use `?` with null-valued type instances to enjoy C# goodness without needing object instances e.g.:\n  - `.Bind (vm?.SelectedTweet?.Title)` binds to \"Title\"\u003cbr /\u003e\n  Note that using `?` can be necessary because the expression will be evaluated at runtime, even though we don't care about it's value; the [CallerArgumentExpression attribute](https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-10#callerargumentexpression-attribute-diagnostics) supplies an expression string *in addition to* the expression value.\n- You can still pass in string literals\n  - `.Bind (\"SelectedTweet\")` binds to \"SelectedTweet\"\n\nAny surrounding `\"`, `@` or whitespace characters in `pathExpression` are ignored\n\n`Bind` supports almost all functionality that the UI framework offers for binding. In addition, there are many `Bind` overloads that allows to:\n- Omit the property name to bind to the **default property** of a view type:\u003cbr /\u003e![Bind Default Parameter](img/bind-default-parameter.png)\n- Bind with **inline conversion**:\u003cbr /\u003e![Bind Inline Conversion](img/bind-inline-conversion.png)\n- Bind a **command and it's parameter** in one go:\u003cbr /\u003e![Bindcommand](img/bindcommand.png)\n\n## Page anatomy - separate markup and UI logic\nA typical markup page starts like this:\n\n`FlutterPage.cs`:\n```csharp\nusing CSharpMarkup.\u003cUI framework name\u003e;\nusing static CSharpMarkup.\u003cUI framework name\u003e.Helpers;\n\nnamespace Examples;\n\npartial class FlutterPage\n{\n    public void Build() =\u003e Content = \n```\n\nNote the use of `partial class`; this lets you separate the UI markup from **UI logic**:\n\n`FlutterPage.logic.cs`:\n```csharp\nusing \u003cUI framework namespace\u003e.Controls;\n\nnamespace Examples;\n\npublic sealed partial class FlutterPage : Page, IBuild\n{\n    readonly FlutterViewModel vm;\n\n    public FlutterPage()\n    {\n        InitializeComponent(); // Only needed for WinUI\n        DataContext = vm = \u003cobtain viewmodel instance\u003e;\n        Build();\n```\n\n### Namespace separation of markup and UI logic\n**IMPORTANT:**\u003cbr /\u003e\n- In **C# markup files** like **`\u003cpage\u003e.cs`**:\u003cbr /\u003e\nInclude `CSharpMarkup.*` namespace usings but **no UI objectmodel usings** such as `using Microsoft.UI.Xaml;`\u003cbr /\u003e\u003cbr /\u003e\n(by design the type names in the CSharpMarkup namespace are identical to the type names in the UI objectmodel, so including both would cause ambiguities)\u003cbr /\u003e\u003cbr /\u003e\nTry to limit using the UI object model to UI logic files. If you must, you *can* use the UI objectmodel safely in C# markup files; a good practice then is to\ndefine global namespace using aliases, e.g. `global using UI = Microsoft.UI;`\u003cbr /\u003e\u003cbr /\u003e\nFor more guidance, see the comments in the `GlobalUsings.cs` of a project created with `dotnet new mcs-uno-markup2`.\n\n- In **UI logic files** like **`\u003cpage\u003e.logic.cs`**:\u003cbr /\u003e\nDo not use `CSharpMarkup` objects\u003cbr /\u003e\u003cbr /\u003e\nMarkup object instances are not safe to use outside of a markup expression (due to performance features - each markup object type has a single static instance to prevent allocating an extra object for each view).\nThat is why `Assign` and `Invoke` (see [below](#Integrate-UI-markup-with-UI-logic)) pass the UI object contained in the markup object to the logic, instead of the markup object itself.\n\n## Integrate UI markup with UI logic\nWith `Assign` and `Invoke` you can integrate UI markup with UI logic:\n\n`SearchPage.cs`:\u003cbr /\u003e\n![Markup Logic Assign 1](img/markup-logic-assign-1.png)\n\n`SearchPage.logic.cs`:\u003cbr /\u003e\n![Markup Logic Assign 2](img/markup-logic-assign-2.png)\n\n`SearchPage.cs`:\u003cbr /\u003e\n![Markup Logic Invoke 1](img/markup-logic-invoke-1.png)\n\n`SearchPage.logic.cs`:\u003cbr /\u003e\n![Markup Logic Invoke 2](img/markup-logic-invoke-2.png)\n\n\u003e **Note**:\u003cbr /\u003e\n\u003e In `SearchPage.cs`, `StackPanel` and `TextBox` are **markup** object types, while\u003cbr /\u003e\n\u003e in `SearchPage.logic.cs` they are the corresponding **UI framework** object types\n\n# Development workflow tips\n\n## Improve markup colorization in Visual Studio\nThere is no C# Markup IDE extension (yet...) to properly colorize markup, however C# Markup readability can be improved with this workaround in Visual Studio options:\n\nUnder `Fonts and Colors`, copy the color of `User Types - Classes` to `User Members - Methods` (with the `Custom...` button). Now the markup color for views and properties will no longer be the same.\n\n![Improve Markup Colors In Vs](img/improve-markup-colors-in-vs.png)\n","funding_links":["https://github.com/sponsors/VincentH-Net"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvincenth-net%2Fcsharpformarkup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvincenth-net%2Fcsharpformarkup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvincenth-net%2Fcsharpformarkup/lists"}