Skip to content

Commit 70e35dc

Browse files
author
eriklimakc
committed
docs: Add csharp markup code example
1 parent 17419d0 commit 70e35dc

File tree

4 files changed

+194
-76
lines changed

4 files changed

+194
-76
lines changed

‎doc/controls/AutoLayoutControl.md

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,26 @@ uid: Toolkit.Controls.AutoLayoutControl
1515
public partial class AutoLayout : Control
1616
```
1717

18-
### XAML
18+
### Usage
19+
20+
# [**XAML**](#tab/xaml)
1921
```xml
2022
xmlns:utu="using:Uno.Toolkit.UI"
2123
...
22-
2324
<utu:AutoLayout>
24-
contents
25+
<!-- Content -->
2526
</utu:AutoLayout>
2627
```
28+
# [**C#**](#tab/csharp)
29+
```cs
30+
using Uno.Toolkit.UI;
31+
...
32+
new AutoLayout()
33+
.Children(
34+
// Content
35+
)
36+
```
37+
***
2738

2839
### Inheritance
2940
Object &#8594; DependencyObject &#8594; UIElement &#8594; FrameworkElement &#8594; Control

‎doc/controls/CardAndCardContentControl.md

Lines changed: 86 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -66,26 +66,49 @@ The Card control comes with all the built-in properties of a `Control`, and also
6666
> Consider using [CardContentControl](#cardcontentcontrol) if you need full control over the content layout.
6767

6868
### Usage
69+
# [**XAML**](#tab/xaml)
6970
```xml
7071
xmlns:utu="using:Uno.Toolkit.UI"
7172
...
7273

7374
<!-- ElevatedCardStyle -->
7475
<utu:Card HeaderContent="Elevated card"
75-
SubHeaderContent="With title and subtitle"
76-
Style="{StaticResource ElevatedCardStyle}" />
76+
SubHeaderContent="With title and subtitle"
77+
Style="{StaticResource ElevatedCardStyle}" />
7778

7879
<!-- FilledCardStyle -->
7980
<utu:Card HeaderContent="Filled card"
80-
SubHeaderContent="With title and subtitle"
81-
Style="{StaticResource FilledCardStyle}" />
81+
SubHeaderContent="With title and subtitle"
82+
Style="{StaticResource FilledCardStyle}" />
8283

8384
<!-- OutlinedCardStyle -->
8485
<utu:Card HeaderContent="Outlined card"
85-
SubHeaderContent="With title and subtitle"
86-
Style="{StaticResource OutlinedCardStyle}" />
86+
SubHeaderContent="With title and subtitle"
87+
Style="{StaticResource OutlinedCardStyle}" />
8788
```
8889

90+
# [**C#**](#tab/csharp)
91+
```cs
92+
using Uno.Toolkit.UI.Markup;
93+
94+
// ElevatedCardStyle
95+
new Card()
96+
.HeaderContent("Elevated card")
97+
.SubHeaderContent("With title and subtitle")
98+
.Style(Theme.Card.Styles.Elevated),
99+
// FilledCardStyle
100+
new Card()
101+
.HeaderContent("Elevated card")
102+
.SubHeaderContent("With title and subtitle")
103+
.Style(Theme.Card.Styles.Filled),
104+
// OutlinedCardStyle
105+
new Card()
106+
.HeaderContent("Elevated card")
107+
.SubHeaderContent("With title and subtitle")
108+
.Style(Theme.Card.Styles.Outlined)
109+
```
110+
***
111+
89112
### Examples
90113
![](../assets/card-samples.png)
91114

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

137-
### XAML
160+
### Usage
161+
162+
# [**XAML**](#tab/xaml)
138163
```xml
139164
xmlns:utu="using:Uno.Toolkit.UI"
140165
...
@@ -144,12 +169,24 @@ xmlns:utu="using:Uno.Toolkit.UI"
144169
<utu:CardContentControl>
145170
<utu:CardContentControl.ContentTemplate>
146171
<DataTemplate>
147-
content
172+
<!-- Content -->
148173
</DataTemplate>
149174
</utu:CardContentControl.ContentTemplate>
150175
</utu:CardContentControl>
151176
```
152177

178+
# [**C#**](#tab/csharp)
179+
```cs
180+
new CardContentControl()
181+
...
182+
183+
new CardContentControl()
184+
.ContentTemplate(() =>
185+
// Content
186+
)
187+
```
188+
***
189+
153190
### Inheritance
154191
Object &#8594; DependencyObject &#8594; UIElement &#8594; FrameworkElement &#8594; Control &#8594; ContentControl &#8594; CardContentControl
155192

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

170207
### Usage
208+
# [**XAML**](#tab/xaml)
171209
```xml
172210
xmlns:utu="using:Uno.Toolkit.UI"
173211
...
@@ -205,7 +243,46 @@ xmlns:utu="using:Uno.Toolkit.UI"
205243
</utu:CardContentControl.ContentTemplate>
206244
</utu:CardContentControl>
207245
```
208-
246+
# [**C#**](#tab/csharp)
247+
```cs
248+
// ElevatedCardContentControlStyle
249+
new CardContentControl()
250+
.Style(Theme.CardContentControl.Styles.Elevated)
251+
.ContentTemplate(() =>
252+
new Grid()
253+
.Children(
254+
new TextBlock()
255+
.Text("Elevated card")
256+
.MaxLines(1)
257+
.Style(Theme.TextBlock.Styles.HeadlineMedium)
258+
)
259+
),
260+
// FilledCardContentControlStyle
261+
new CardContentControl()
262+
.Style(Theme.CardContentControl.Styles.Filled)
263+
.ContentTemplate(() =>
264+
new Grid()
265+
.Children(
266+
new TextBlock()
267+
.Text("Filled card")
268+
.MaxLines(1)
269+
.Style(Theme.TextBlock.Styles.HeadlineMedium)
270+
)
271+
),
272+
//OutlinedCardContentControlStyle
273+
new CardContentControl()
274+
.Style(Theme.CardContentControl.Styles.Outlined)
275+
.ContentTemplate(() =>
276+
new Grid()
277+
.Children(
278+
new TextBlock()
279+
.Text("Outlined card")
280+
.MaxLines(1)
281+
.Style(Theme.TextBlock.Styles.HeadlineMedium)
282+
)
283+
)
284+
```
285+
***
209286
### Examples
210287
![](../assets/cardcontentcontrol-samples.png)
211288

‎doc/getting-started.md

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ uid: Toolkit.GettingStarted
77

88
The Uno.Toolkit library is available as NuGet packages that can be added to any new or existing Uno solution.
99

10+
> [!NOTE]
11+
> The Toolkit library also has support for C# Markup through a [Uno.Toolkit.WinUI.Markup](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Markup) NuGet Package. To get started with Toolkit in your C# Markup application, add the `Uno.Toolkit.WinUI.Markup` NuGet package to your **App Code Library** project and your platform heads.
12+
1013
> [!NOTE]
1114
> As of [Uno 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.
1215
@@ -19,23 +22,39 @@ This article is a guide for installing the base Uno.Toolkit library, additional
1922

2023
1. Open an existing Uno project, or create a new Uno project using the `Multi-Platform App (Uno Platform)` template.
2124
2. In the Solution Explorer panel, right-click on your app's **App Code Library** project (`PROJECT_NAME.csproj`) and select `Manage NuGet Packages...`
22-
3. Install the [**`Uno.Toolkit.WinUI`**](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material) package
23-
4. Add the resources to `AppResources.xaml`:
24-
25-
```xml
26-
<ResourceDictionary>
27-
<ResourceDictionary.MergedDictionaries>
25+
3. Install the [**`Uno.Toolkit.WinUI`**](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material) package for XAML or [**`Uno.Toolkit.WinUI.Markup`**](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Markup) for C# Markup.
26+
4. Add the resources to the `AppResources` file:
27+
# [**XAML**](#tab/xaml)
28+
```xml
29+
<ResourceDictionary>
30+
<ResourceDictionary.MergedDictionaries>
2831

29-
<!-- Load Uno.Toolkit.UI resources -->
30-
<ToolkitResources xmlns="using:Uno.Toolkit.UI" />
32+
<!-- Load Uno.Toolkit.UI resources -->
33+
<ToolkitResources xmlns="using:Uno.Toolkit.UI" />
3134

32-
<!-- Load custom application resources -->
33-
<!-- ... -->
34-
35-
</ResourceDictionary.MergedDictionaries>
36-
</ResourceDictionary>
37-
```
35+
<!-- Load custom application resources -->
36+
<!-- ... -->
3837

38+
</ResourceDictionary.MergedDictionaries>
39+
</ResourceDictionary>
40+
```
41+
# [**C#**](#tab/csharp)
42+
```cs
43+
public sealed class AppResources : ResourceDictionary
44+
{
45+
public AppResources()
46+
{
47+
48+
// Load Uno.UI.Toolkit Resources
49+
this.Build(r => r.Merged(
50+
new ToolkitResources()));
51+
52+
// Load custom application resources
53+
// ...
54+
}
55+
}
56+
```
57+
***
3958
#### Previous Installation Method
4059

4160
If your application is based on the older solution template that includes a shared project (.shproj), follow these steps:
@@ -74,17 +93,4 @@ If your application is based on the older solution template that includes a shar
7493
</Application>
7594
```
7695

77-
## Using C# Markup
78-
79-
The Toolkit library also has support for C# Markup through a [Uno.Toolkit.WinUI.Markup](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Markup) NuGet Package.
80-
81-
To get started with Toolkit in your C# Markup application, add the `Uno.Toolkit.WinUI.Markup` NuGet package to your **App Code Library** project and your platform heads.
82-
Then, add the following code to your `AppResources.cs`:
83-
84-
```csharp
85-
using Uno.Toolkit.UI.Markup;
86-
87-
this.Build(r => r.UseToolkit());
88-
```
89-
9096
> [!NOTE]: If you are using the [Uno.Toolkit.WinUI.Material.Markup](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material.Markup) NuGet package, follow the steps in the [Using C# Markup for the Material Toolkit](./material-getting-started.md#using-c-markup) guide instead as it includes the Toolkit library.

0 commit comments

Comments
 (0)