Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: Adding csharp markup code examples #1309

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

docs: Adding csharp markup code examples #1309

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c79352a
docs: Adding csharp markup code examples
eriklimakc Dec 18, 2023
98a6d04
chore: Code snippet format
eriklimakc Dec 18, 2023
64c7465
chore: Uniformize tab code snippet
eriklimakc Dec 18, 2023
066d1b3
chore: tweaks
eriklimakc Dec 18, 2023
b8d2a3b
chore: Tab snippets improvements
eriklimakc Dec 18, 2023
be370d8
chore: tweaks
eriklimakc Dec 18, 2023
2d493fc
chore: Tweaks
eriklimakc Dec 18, 2023
931cbd5
docs: Fixing snippets format
eriklimakc Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 123 additions & 41 deletions doc/material-controls-extensions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Collaborator

@kazo0 kazo0 Dec 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can link back to the Getting Started section that mentions C# Markup with an xref here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huum, I removed the Using C# Markup section from that page, since all the C# Markup code is now integrated in the tabs with the Xaml ones, and added a similar note to that page instead:

Uno.Themes/doc/material-getting-started.md

Lines 37 to 38 in 931cbd5

> [!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.

Do you think it's better to bring back that section?

@kazo0


## 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: `<BitmapIcon />`, `<FontIcon />`, `<PathIcon />` or `<SymbolIcon />`.
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: `BitmapIcon`, `FontIcon`, `PathIcon` or `SymbolIcon`.

Here are supported control with samples:

* TextBox:

```xml
eriklimakc marked this conversation as resolved.
Show resolved Hide resolved
# [**XAML**](#tab/xaml)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# [**XAML**](#tab/xaml)
### [**XAML**](#tab/xaml)


<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
<um:ControlExtensions.Icon>
<SymbolIcon Symbol="SolidStar" />
</um:ControlExtensions.Icon>
</ComboBox>
```


# [**C#**](#tab/csharp)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# [**C#**](#tab/csharp)
### [**C#**](#tab/csharp)


new TextBox()
eriklimakc marked this conversation as resolved.
Show resolved Hide resolved
.Style(Theme.TextBox.Styles.Filled)
.ControlExtensions
(
icon:
new SymbolIcon()
.Symbol(Symbol.SolidStar)
)

***
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
***
***


* ComboBox:

```xml
# [**XAML**](#tab/xaml)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# [**XAML**](#tab/xaml)
### [**XAML**](#tab/xaml)


<ComboBox Style="{StaticResource MaterialComboBoxStyle}">
<um:ControlExtensions.Icon>
<SymbolIcon Symbol="SolidStar" />
</um:ControlExtensions.Icon>
</ComboBox>
```

# [**C#**](#tab/csharp)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# [**C#**](#tab/csharp)
### [**C#**](#tab/csharp)


new ComboBox()
.Style(Theme.ComboBox.Styles.Default)
.ControlExtensions
(
icon:
new SymbolIcon()
.Symbol(Symbol.SolidStar)
)

***

## Alternate Content

Expand All @@ -37,17 +67,36 @@ It's control specific and for now, you can only use it with the ToggleButton con

### Alternate Content on ToggleButton

```xml
<ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
<!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
<PathIcon Data="{StaticResource Icon_more_horizontal}" />

<!-- This is the alternate content - which is when the control state is CHECKED -->
<um:ControlExtensions.AlternateContent>
<PathIcon Data="{StaticResource Icon_more_vertical}" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>
```
# [**XAML**](#tab/xaml)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# [**XAML**](#tab/xaml)
#### [**XAML**](#tab/xaml)


<ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
<!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
<PathIcon Data="{StaticResource Icon_more_horizontal}" />
<!-- This is the alternate content - which is when the control state is CHECKED -->
<um:ControlExtensions.AlternateContent>
<PathIcon Data="{StaticResource Icon_more_vertical}" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>

# [**C#**](#tab/csharp)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# [**C#**](#tab/csharp)
#### [**C#**](#tab/csharp)


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<Geometry>("Icon_more_horizontal"))
)
// This is the alternate content - which is when the control state is CHECKED
.ControlExtensions
(
alternateContent:
new PathIcon()
.Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
)

***

## Elevation

Expand Down Expand Up @@ -97,34 +146,67 @@ 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:

```xml
<StackPanel Spacing="8">
<Button Content="Elevation 0"
um:ControlExtensions.Elevation="0"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 1"
um:ControlExtensions.Elevation="1"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 2"
um:ControlExtensions.Elevation="2"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 3"
um:ControlExtensions.Elevation="3"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 4"
um:ControlExtensions.Elevation="4"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 5"
um:ControlExtensions.Elevation="5"
Style="{StaticResource MaterialElevatedButtonStyle}" />
</StackPanel>
```

The above XAML will produce the following result:
# [**XAML**](#tab/xaml)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# [**XAML**](#tab/xaml)
### [**XAML**](#tab/xaml)


<StackPanel Spacing="8">
<Button Content="Elevation 0"
um:ControlExtensions.Elevation="0"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 1"
um:ControlExtensions.Elevation="1"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 2"
um:ControlExtensions.Elevation="2"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 3"
um:ControlExtensions.Elevation="3"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 4"
um:ControlExtensions.Elevation="4"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 5"
um:ControlExtensions.Elevation="5"
Style="{StaticResource MaterialElevatedButtonStyle}" />
</StackPanel>


# [**C#**](#tab/csharp)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# [**C#**](#tab/csharp)
### [**C#**](#tab/csharp)


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:

![Uno Material Elevation Buttons with Tint Enabled](assets/material-elevation-buttons.png)

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:

![Uno Material Elevation Buttons with Tint Disabled](assets/material-elevation-buttons-shadow-only.png)

Expand Down
Loading
Loading