diff --git a/doc/material-controls-extensions.md b/doc/material-controls-extensions.md
index 15ae35018..7a3242e81 100644
--- a/doc/material-controls-extensions.md
+++ b/doc/material-controls-extensions.md
@@ -4,31 +4,61 @@ uid: Uno.Themes.Material.Extensions
# Material Control Extensions
+> [!NOTE]
+> Uno Material also has support for C# Markup through a [Uno.Material.WinUI.Markup](https://www.nuget.org/packages/Uno.Material.WinUI.Markup) NuGet Package. To get started with Uno Material in your C# Markup application, add the `Uno.Material.WinUI.Markup` NuGet package to your **App Code Library** project and your platform heads.
+
## Icon
-This feature allows for the addition of icon on the supported controls. Those icons could be any of the [`IconElement`](https://docs.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.iconelement)s: `
-
-
-
- ```
+# [**XAML**](#tab/xaml)
+```xml
+
+
+
+
+```
+
+# [**C#**](#tab/csharp)
+```cs
+new TextBox()
+ .Style(Theme.TextBox.Styles.Filled)
+ .ControlExtensions
+ (
+ icon:
+ new SymbolIcon()
+ .Symbol(Symbol.SolidStar)
+ )
+```
+***
* ComboBox:
- ```xml
-
-
-
-
- ```
+# [**XAML**](#tab/xaml)
+```xml
+
+
+
+
+```
+# [**C#**](#tab/csharp)
+```cs
+new ComboBox()
+ .Style(Theme.ComboBox.Styles.Default)
+ .ControlExtensions
+ (
+ icon:
+ new SymbolIcon()
+ .Symbol(Symbol.SolidStar)
+ )
+```
+***
## Alternate Content
@@ -37,17 +67,36 @@ It's control specific and for now, you can only use it with the ToggleButton con
### Alternate Content on ToggleButton
+# [**XAML**](#tab/xaml)
```xml
```
+# [**C#**](#tab/csharp)
+```cs
+new ToggleButton()
+ .Style(Theme.ToggleButton.Styles.Icon)
+ // This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
+ .Content
+ (
+ new PathIcon()
+ .Data(StaticResource.Get("Icon_more_horizontal"))
+ )
+ // This is the alternate content - which is when the control state is CHECKED
+ .ControlExtensions
+ (
+ alternateContent:
+ new PathIcon()
+ .Data(StaticResource.Get("Icon_more_vertical"))
+ )
+```
+***
## Elevation
@@ -97,6 +146,7 @@ Within the `ControlTemplate` of the `ElevatedButtonStyle`, instead of performing
Applying the surface tint for elevated controls is optional and must be explicitly enabled through the use of the `IsTintEnabled` attached property. Below is an example of how an elevated control may appear with or without a surface tint:
+# [**XAML**](#tab/xaml)
```xml
```
-The above XAML will produce the following result:
+# [**C#**](#tab/csharp)
+```cs
+new StackPanel()
+ .Spacing(8)
+ .Children(
+ new Button()
+ .Content("Elevation 0")
+ .ControlExtensions(elevation: 0)
+ .Style(Theme.Button.Styles.Elevated),
+ new Button()
+ .Content("Elevation 1")
+ .ControlExtensions(elevation: 1)
+ .Style(Theme.Button.Styles.Elevated),
+ new Button()
+ .Content("Elevation 2")
+ .ControlExtensions(elevation: 2)
+ .Style(Theme.Button.Styles.Elevated),
+ new Button()
+ .Content("Elevation 3")
+ .ControlExtensions(elevation: 3)
+ .Style(Theme.Button.Styles.Elevated),
+ new Button()
+ .Content("Elevation 4")
+ .ControlExtensions(elevation: 4)
+ .Style(Theme.Button.Styles.Elevated),
+ new Button()
+ .Content("Elevation 5")
+ .ControlExtensions(elevation: 5)
+ .Style(Theme.Button.Styles.Elevated)
+ )
+```
+***
+
+The above code will produce the following result:
-If we were to alter the XAML above and set `um:ControlExtensions.IsTintEnabled="False"` on each of the buttons, we would see elevated buttons without tints:
+If we were to alter the code above and set `IsTintEnabled` to `False` (XAML: `um:ControlExtensions.IsTintEnabled="False"` or C#: `ControlExtensions(isTintEnabled: false)`) on each of the buttons, we would see elevated buttons without tints:
diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md
index 7fd1561fe..566238d0e 100644
--- a/doc/material-getting-started.md
+++ b/doc/material-getting-started.md
@@ -34,24 +34,41 @@ Initialization of the Uno.Material resources is handled by the specialized `Mate
| ColorOverrideSource | string | (Optional) Gets or sets a Uniform Resource Identifier that provides the source location of a ResourceDictionary containing overrides for the default Uno.Material Color resources |
| FontOverrideSource | string | (Optional) Gets or sets a Uniform Resource Identifier that provides the source location of a ResourceDictionary containing overrides for the default Uno.Material font resources |
+> [!NOTE]
+> Uno Material also has support for C# Markup through a [Uno.Material.WinUI.Markup](https://www.nuget.org/packages/Uno.Material.WinUI.Markup) NuGet Package. To get started with Uno Material in your C# Markup application, add the `Uno.Material.WinUI.Markup` NuGet package to your **App Code Library** project and your platform heads.
+
> [!NOTE]
> As of [Uno Platform 4.7](https://platform.uno/blog/uno-platform-4-7-new-project-template-performance-improvements-and-more/), the solution template of an Uno app has changed. There is no longer a Shared project (.shproj), it has been replaced with a regular cross-platform library containing all user code files, referred to as the **App Code Library** project. This also implies that package references can be included in a single location without the previous need to include those in all project heads.
1. Create a new Uno project using the `Uno Platform App` template.
2. In the Solution Explorer panel, right-click on your app's **App Code Library** project (`PROJECT_NAME.csproj`) and select `Manage NuGet Packages...`
-3. Install the [`Uno.Material.WinUI`](https://www.nuget.org/packages/Uno.Material.WinUI)
-4. Add the following Material resources to `AppResources.xaml`:
-
- ```xml
-
-
-
-
-
-
- ```
+3. Install the [`Uno.Material.WinUI`](https://www.nuget.org/packages/Uno.Material.WinUI) for XAML or [`Uno.Material.WinUI.Markup`](https://www.nuget.org/packages/Uno.Material.WinUI.Markup) for C# Markup.
+4. Add the following Material resources to `AppResources`:
+
+# [**XAML**](#tab/xaml)
+```xml
+
+
+
+
+
+```
+# [**C#**](#tab/csharp)
+```cs
+using Uno.Material;
+
+public sealed class AppResources : ResourceDictionary
+{
+ public AppResources()
+ {
+ // Load Uno.Material resources
+ this.Build(r => r.Merged(
+ new MaterialTheme()));
+ }
+}
+```
+***
### Installing Uno.Material on previous versions of Uno Platform
@@ -68,7 +85,7 @@ If your application is based on the older solution template that includes a shar
- `PROJECT_NAME.Skia.Gtk.csproj`
- `PROJECT_NAME.Skia.WPF.csproj`
- `PROJECT_NAME.Windows.csproj` (or `PROJECT_NAME.UWP.csproj` for existing projects)
-4. Add the following resources inside `App.xaml`:
+4. Add the following resources inside the `App.xaml` file:
```xml
@@ -107,132 +124,161 @@ Follow this link to get [more Information about the DSP tooling](xref:Uno.Materi
Use this when you want to specify MANUALLY each colors.
-1. In the application's **App Code Library** project (`PROJECT_NAME.csproj`), add a new Resource Dictionary named `MaterialColorsOverride.xaml`
+1. In the application's **App Code Library** project (`PROJECT_NAME.csproj`), add a new Resource Dictionary named `MaterialColorsOverride.xaml` for XAML or a new class inheriting from `ResourceDictionary` named `ColorPaletteOverride.cs` for C# Markup.
2. Save the new override file within the **App Code Library**, for example, under `Styles/Application`.
3. Replace the content with:
-
- ```xml
-
-
-
-
-
-
- #6750A4
- #D0BCFF
- #FFFFFF
- #EADDFF
- #21005E
-
-
- #353FE5
- #B6A8FB
-
-
- #625B71
- #FFFFFF
- #E5DFF9
- #1B192C
-
-
- #2BB27E
- #9CFFDF
-
-
- #7D5260
- #FFFFFF
- #FFD8E4
- #370B1E
-
-
- #B3261E
- #FFFFFF
- #F9DEDC
- #370B1E
-
-
- #FFFBFE
- #1C1B1F
-
-
- #FFFBFE
- #1C1B1F
- #E7E0EC
- #A5A0AC
- #313033
- #F4EFF4
- #5946D2
-
-
- #79747E
- #C9C5D0
-
-
-
-
-
- #D0BCFF
- #371E73
- #4F378B
- #EADDFF
- #6750A4
-
-
- #353FE5
- #D4CBFC
-
-
- #CCC2DC
- #332D41
- #474459
- #E5DFF9
-
-
- #2BB27E
- #9CFFDF
-
-
- #EFB8C8
- #492532
- #633B48
- #FFD8E4
-
-
- #F2B8B5
- #601410
- #8C1D18
- #F9DEDC
-
-
- #1C1B1F
- #E6E1E5
-
-
- #1C1B1F
- #E6E1E5
- #49454F
- #CAC4D0
- #E6E1E5
- #313033
- #C7BFFF
-
-
- #938F99
- #57545D
-
-
-
-
- ```
-
-4. In `AppResources.xaml`, update `
+
+
+
+
+ #6750A4
+ #D0BCFF
+ #FFFFFF
+ #EADDFF
+ #21005E
+
+ #353FE5
+ #B6A8FB
+
+ #625B71
+ #FFFFFF
+ #E5DFF9
+ #1B192C
+
+ #2BB27E
+ #9CFFDF
+
+ #7D5260
+ #FFFFFF
+ #FFD8E4
+ #370B1E
+
+ #B3261E
+ #FFFFFF
+ #F9DEDC
+ #370B1E
+
+ #FFFBFE
+ #1C1B1F
+
+ #FFFBFE
+ #1C1B1F
+ #E7E0EC
+ #A5A0AC
+ #313033
+ #F4EFF4
+ #5946D2
+
+ #79747E
+ #C9C5D0
+
+
+
+
+ #D0BCFF
+ #371E73
+ #4F378B
+ #EADDFF
+ #6750A4
+
+ #353FE5
+ #D4CBFC
+
+ #CCC2DC
+ #332D41
+ #474459
+ #E5DFF9
+
+ #2BB27E
+ #9CFFDF
+
+ #EFB8C8
+ #492532
+ #633B48
+ #FFD8E4
+
+ #F2B8B5
+ #601410
+ #8C1D18
+ #F9DEDC
+
+ #1C1B1F
+ #E6E1E5
+
+ #1C1B1F
+ #E6E1E5
+ #49454F
+ #CAC4D0
+ #E6E1E5
+ #313033
+ #C7BFFF
+
+ #938F99
+ #57545D
+
+
+
+```
+# [**C#**](#tab/csharp)
+```cs
+namespace PROJECT_NAME.Styles;
+public sealed partial class ColorPaletteOverride : ResourceDictionary
+{
+ public ColorPaletteOverride()
+ {
+ this.Build
+ (
+ r => r
+ .Add(Uno.Themes.Markup.Theme.Colors.Primary.Default, light: "#6750A4", dark: "#D0BCFF")
+ .Add(Uno.Themes.Markup.Theme.Colors.Primary.Inverse, light: "#D0BCFF", dark: "#6750A4")
+ .Add(Uno.Themes.Markup.Theme.Colors.Primary.Container, light: "#EADDFF", dark: "#4F378B")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Default, light: "#FFFFFF", dark: "#371E73")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Container, light: "#21005E", dark: "#EADDFF")
+ .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Default, light: "#625B71", dark: "#CCC2DC")
+ .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Container, light: "#E5DFF9", dark: "#474459")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Default, light: "#FFFFFF", dark: "#332D41")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Container, light: "#1B192C", dark: "#E5DFF9")
+ .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Default, light: "#7D5260", dark: "#EFB8C8")
+ .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Container, light: "#FFD8E4", dark: "#633B48")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Default, light: "#FFFFFF", dark: "#492532")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Container, light: "#370B1E", dark: "#FFD8E4")
+ .Add(Uno.Themes.Markup.Theme.Colors.Error.Default, light: "#B3261E", dark: "#F2B8B5")
+ .Add(Uno.Themes.Markup.Theme.Colors.Error.Container, light: "#F9DEDC", dark: "#8C1D18")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnError.Default, light: "#FFFFFF", dark: "#601410")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnError.Container, light: "#370B1E", dark: "#F9DEDC")
+ .Add(Uno.Themes.Markup.Theme.Colors.Background.Default, light: "#FFFBFE", dark: "#1C1B1F")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnBackground.Default, light: "#1C1B1F", dark: "#E6E1E5")
+ .Add(Uno.Themes.Markup.Theme.Colors.Surface.Default, light: "#FFFBFE", dark: "#1C1B1F")
+ .Add(Uno.Themes.Markup.Theme.Colors.Surface.Variant, light: "#E7E0EC", dark: "#49454F")
+ .Add(Uno.Themes.Markup.Theme.Colors.Surface.Inverse, light: "#313033", dark: "#E6E1E5")
+ .Add(Uno.Themes.Markup.Theme.Colors.Surface.Tint, light: "#5946D2", dark: "#C7BFFF")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Default, light: "#1C1B1F", dark: "#E6E1E5")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Variant, light: "#A5A0AC", dark: "#CAC4D0")
+ .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Inverse, light: "#F4EFF4", dark: "#313033")
+ .Add(Uno.Themes.Markup.Theme.Colors.Outline.Default, light: "#79747E", dark: "#938F99")
+ .Add(Uno.Themes.Markup.Theme.Colors.Outline.Variant, light: "#C9C5D0", dark: "#57545D")
+ );
+ }
+}
+```
+***
+4. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
+# [**XAML**](#tab/xaml)
+```xml
+
+ ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont
+ ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont
+ ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont
+
+```
+# [**C#**](#tab/csharp)
+```cs
+namespace PROJECT_NAME.Styles;
+
+public sealed class MaterialFontsOverride : ResourceDictionary
+{
+ public MaterialFontsOverride()
+ {
+ this.Build(r => r
+ .Add("MaterialLightFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont")
+ .Add("MaterialMediumFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont")
+ .Add("MaterialRegularFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont"));
+ }
+}
+```
+***
- ```xml
-
-
- ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont
- ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont
- ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont
-
-
- ```
-
-5. In `AppResources.xaml`, update `