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: Add csharp markup code example #986

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

docs: Add csharp markup code example #986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
56af614
docs: Add csharp markup code example
eriklimakc Dec 19, 2023
e2fc9d8
chore: Add csharp markup examples
eriklimakc Dec 21, 2023
ba45838
docs: Adjustments in tabs
eriklimakc Dec 21, 2023
c949834
chore: Update table content
eriklimakc Dec 21, 2023
41857a5
chore: tweaks
eriklimakc Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 13 additions & 3 deletions doc/controls/AutoLayoutControl.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,26 @@ uid: Toolkit.Controls.AutoLayoutControl
public partial class AutoLayout : Control
```

### XAML
### Usage

# [**XAML**](#tab/xaml)
```xml
xmlns:utu="using:Uno.Toolkit.UI"
...

<utu:AutoLayout>
contents
<!-- Content -->
</utu:AutoLayout>
```
# [**C#**](#tab/csharp)
```cs
using Uno.Toolkit.UI;
...
new AutoLayout()
.Children(
// Content
)
```
***

### Inheritance

Expand Down
95 changes: 86 additions & 9 deletions doc/controls/CardAndCardContentControl.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,26 +66,49 @@ The Card control comes with all the built-in properties of a `Control`, and also
> Consider using [CardContentControl](#cardcontentcontrol) if you need full control over the content layout.

### Usage
# [**XAML**](#tab/xaml)
```xml
xmlns:utu="using:Uno.Toolkit.UI"
...

<!-- ElevatedCardStyle -->
<utu:Card HeaderContent="Elevated card"
SubHeaderContent="With title and subtitle"
Style="{StaticResource ElevatedCardStyle}" />
SubHeaderContent="With title and subtitle"
Style="{StaticResource ElevatedCardStyle}" />

<!-- FilledCardStyle -->
<utu:Card HeaderContent="Filled card"
SubHeaderContent="With title and subtitle"
Style="{StaticResource FilledCardStyle}" />
SubHeaderContent="With title and subtitle"
Style="{StaticResource FilledCardStyle}" />

<!-- OutlinedCardStyle -->
<utu:Card HeaderContent="Outlined card"
SubHeaderContent="With title and subtitle"
Style="{StaticResource OutlinedCardStyle}" />
SubHeaderContent="With title and subtitle"
Style="{StaticResource OutlinedCardStyle}" />
```

# [**C#**](#tab/csharp)
```cs
using Uno.Toolkit.UI.Markup;

// ElevatedCardStyle
new Card()
.HeaderContent("Elevated card")
.SubHeaderContent("With title and subtitle")
.Style(Theme.Card.Styles.Elevated),
// FilledCardStyle
new Card()
.HeaderContent("Elevated card")
.SubHeaderContent("With title and subtitle")
.Style(Theme.Card.Styles.Filled),
// OutlinedCardStyle
new Card()
.HeaderContent("Elevated card")
.SubHeaderContent("With title and subtitle")
.Style(Theme.Card.Styles.Outlined)
```
***

### Examples
![](../assets/card-samples.png)

Expand Down Expand Up @@ -134,7 +157,9 @@ The `CardContentControl` is based on `ContentControl` and allows you to customiz
public partial class CardContentControl : ContentControl
```

### XAML
### Usage

# [**XAML**](#tab/xaml)
```xml
xmlns:utu="using:Uno.Toolkit.UI"
...
Expand All @@ -144,12 +169,24 @@ xmlns:utu="using:Uno.Toolkit.UI"
<utu:CardContentControl>
<utu:CardContentControl.ContentTemplate>
<DataTemplate>
content
<!-- Content -->
</DataTemplate>
</utu:CardContentControl.ContentTemplate>
</utu:CardContentControl>
```

# [**C#**](#tab/csharp)
```cs
new CardContentControl()
...

new CardContentControl()
.ContentTemplate(() =>
// Content
)
```
***

### Inheritance
Object &#8594; DependencyObject &#8594; UIElement &#8594; FrameworkElement &#8594; Control &#8594; ContentControl &#8594; CardContentControl

Expand All @@ -168,6 +205,7 @@ The Card control comes with all the built-in properties of a `ContentControl`, a
| IsClickable | bool | Gets or sets a value indicating whether the control will respond to pointer and focus events. |

### Usage
# [**XAML**](#tab/xaml)
```xml
xmlns:utu="using:Uno.Toolkit.UI"
...
Expand Down Expand Up @@ -205,7 +243,46 @@ xmlns:utu="using:Uno.Toolkit.UI"
</utu:CardContentControl.ContentTemplate>
</utu:CardContentControl>
```

# [**C#**](#tab/csharp)
```cs
// ElevatedCardContentControlStyle
new CardContentControl()
.Style(Theme.CardContentControl.Styles.Elevated)
.ContentTemplate(() =>
new Grid()
.Children(
new TextBlock()
.Text("Elevated card")
.MaxLines(1)
.Style(Theme.TextBlock.Styles.HeadlineMedium)
)
),
// FilledCardContentControlStyle
new CardContentControl()
.Style(Theme.CardContentControl.Styles.Filled)
.ContentTemplate(() =>
new Grid()
.Children(
new TextBlock()
.Text("Filled card")
.MaxLines(1)
.Style(Theme.TextBlock.Styles.HeadlineMedium)
)
),
//OutlinedCardContentControlStyle
new CardContentControl()
.Style(Theme.CardContentControl.Styles.Outlined)
.ContentTemplate(() =>
new Grid()
.Children(
new TextBlock()
.Text("Outlined card")
.MaxLines(1)
.Style(Theme.TextBlock.Styles.HeadlineMedium)
)
)
```
***
### Examples
![](../assets/cardcontentcontrol-samples.png)

Expand Down
75 changes: 70 additions & 5 deletions doc/controls/ChipAndChipGroup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ sealed class ChipRemovingEventArgs : EventArgs
```

### Usage
# [**XAML**](#tab/xaml)
```xml
xmlns:utu="using:Uno.Toolkit.UI"
...
Expand All @@ -71,14 +72,38 @@ xmlns:utu="using:Uno.Toolkit.UI"
<utu:Chip Content="Filter Chip" IsChecked="True" Style="{StaticResource FilterChipStyle}" />
<utu:Chip Content="Suggestion Chip" IsChecked="True" Style="{StaticResource SuggestionChipStyle}" />

<!-- with icon -->
<!-- With icon -->
<utu:Chip Content="Chip" Style="{StaticResource MaterialChipStyle}">
<utu:Chip.Icon>
<Image Source="ms-appx:///Assets/Avatar.png" />
</utu:Chip.Icon>
</utu:Chip>
```

# [**C#**](#tab/csharp)
```cs
new Chip()
.Content("Assist Chip")
.Style(Theme.Chip.Styles.Assist),
new Chip()
.Content("Input Chip")
.Style(Theme.Chip.Styles.Input),
new Chip()
.Content("Filter Chip")
.Style(Theme.Chip.Styles.Filter),
new Chip()
.Content("Suggestion Chip")
.Style(Theme.Chip.Styles.Suggestion),

// With icon
new Chip()
.Content("Chip")
.Style(Theme.Chip.Styles.Default)
.Icon(
new Image()
.Source("ms-appx:///Assets/Avatar.png")
)
```
***
## Lightweight Styling

Key|Type|Value
Expand Down Expand Up @@ -162,18 +187,29 @@ ElevatedChipBackground|SolidColorBrush|SurfaceBrush
public partial class ChipGroup : ItemsControl
```

### XAML
### Usage
# [**XAML**](#tab/xaml)
```xml
xmlns:utu="using:Uno.Toolkit.UI"
...

<utu:ChipGroup .../>
-or-
<utu:ChipGroup>
oneOrMoreItems
<!-- One or more Items -->
</utu:ChipGroup>
```
# [**C#**](#tab/csharp)
```cs
new ChipGroup()
...

new ChipGroup()
.Items(
// One or more Items
)
```
***
### Inheritance
Object &#8594; DependencyObject &#8594; UIElement &#8594; FrameworkElement &#8594; Control &#8594; ItemsControl &#8594; ChipGroup

Expand Down Expand Up @@ -226,7 +262,8 @@ class ChipItemRemovingEventHandler : ChipItemEventHandler
}
```

### Usage
#### Usage
# [**XAML**](#tab/xaml)
```xml
xmlns:utu="using:Uno.Toolkit.UI"
...
Expand Down Expand Up @@ -258,3 +295,31 @@ xmlns:utu="using:Uno.Toolkit.UI"
SelectionMode="Multiple"
Style="{StaticResource SuggestionChipGroupStyle}" />
```
# [**C#**](#tab/csharp)
```cs
// example with binding
new ChipGroup()
.ItemsSource(() => vm.ChipsList)
.Style(Theme.ChipGroup.Styles.Suggestion)
.ItemTemplate<ToDoItem>(item => new TextBlock()
.Text(() => item.Name)
),

// single selection with binding
new ChipGroup()
.ItemsSource(() => vm.ChipsList)
.SelectedItem(x => x.Bind(() => vm.SelectedItem).TwoWay())
.SelectionMode(ChipSelectionMode.Single)
.Style(Theme.ChipGroup.Styles.Suggestion),

// multi-selection with binding
new ChipGroup()
.ItemsSource(() => vm.ChipsList)
.SelectedItems(x => x.Bind(() => vm.SelectedItems).TwoWay())
.SelectionMode(ChipSelectionMode.Multiple)
.Style(Theme.ChipGroup.Styles.Suggestion)
```

> [!IMPORTANT]
> ItemClick Event are currently not supported in C# Markup.
***
14 changes: 14 additions & 0 deletions doc/controls/Divider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ DividerSubHeaderMargin|Thickness|0,4,0,0
DividerHeight|Double|1

## Usage
# [**XAML**](#tab/xaml)
```xml
xmlns:utu="using:Uno.Toolkit.UI"
...
Expand All @@ -36,3 +37,16 @@ xmlns:utu="using:Uno.Toolkit.UI"
SubHeaderForeground="Black" />
<TextBlock Text="Asd" />
```
# [**C#**](#tab/csharp)
```cs
new TextBlock()
.Text("Asd"),
new Divider(),
new TextBlock()
.Text("Asd"),
new Divider()
.Foreground(Colors.Gray)
.SubHeader("Separator")
.SubHeaderForeground(Colors.Black)
```
***