chore: Add csharp markup examples

Author: eriklimakc

doc/controls/ChipAndChipGroup.md

@@ -62,6 +62,7 @@ sealed class ChipRemovingEventArgs : EventArgs
 ```
 
 ### Usage
+# [**XAML**](#tab/xaml)
 ```xml
 xmlns:utu="using:Uno.Toolkit.UI"
 ...
@@ -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
@@ -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
 
@@ -226,7 +262,8 @@ class ChipItemRemovingEventHandler : ChipItemEventHandler
 }
 ```
 
-### Usage
+#### Usage
+# [**XAML**](#tab/xaml)
 ```xml
 xmlns:utu="using:Uno.Toolkit.UI"
 ...
@@ -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.
+***

doc/controls/Divider.md

@@ -24,6 +24,7 @@ DividerSubHeaderMargin|Thickness|0,4,0,0
 DividerHeight|Double|1
 
 ## Usage
+# [**XAML**](#tab/xaml)
 ```xml
 xmlns:utu="using:Uno.Toolkit.UI"
 ...
@@ -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)
+```
+***

doc/controls/DrawerControl.md

@@ -17,20 +17,32 @@ Due to the lack of clipping, this control should be used as a full window-sized
 public partial class DrawerControl : ContentControl
 ```
 
-### XAML
+### Usage
+# [**XAML**](#tab/xaml)
 ```xml
 xmlns:utu="using:Uno.Toolkit.UI"
 ...
 
 <utu:DrawerControl>
     <utu:DrawerControl.Content>
-        content
+        <!-- content -->
     </utu:DrawerControl.Content>
     <utu:DrawerControl.DrawerContent>
-        drawerContent
+        <!-- drawerContent -->
     </utu:DrawerControl.DrawerContent>
 </utu:DrawerControl>
 ```
+# [**C#**](#tab/csharp)
+```cs
+new DrawerControl()
+    .Content(
+        // content
+    )
+    .DrawerContent(
+        // drawerContent
+    )
+```
+***
 
 ### Inheritance 
 Object &#8594; DependencyObject &#8594; UIElement &#8594; FrameworkElement &#8594; Control &#8594; ContentControl &#8594; DrawerControl
@@ -55,6 +67,7 @@ OpenDirection|DrawerOpenDirection=Right|Gets or sets the direction in which the
 
 ### Usage
 #### Basic usage
+# [**XAML**](#tab/xaml)
 ```xml
 xmlns:toolkit="using:Uno.UI.Toolkit"
 xmlns:utu="using:Uno.Toolkit.UI"
@@ -68,15 +81,34 @@ xmlns:utu="using:Uno.Toolkit.UI"
     <utu:DrawerControl.DrawerContent>
         <Grid toolkit:VisibleBoundsPadding.PaddingMask="All"
               Padding="16">
-              <!-- Drawer Content... -->
+              <!-- Drawer Content ... -->
               <TextBlock Text="Drawer" />
         </Grid>
     </utu:DrawerControl.DrawerContent>
 </utu:DrawerControl>
 ```
-
+# [**C#**](#tab/csharp)
+```cs
+new DrawerControl()
+    .Content(
+        // Main Content ...
+        new Frame()
+    )
+    .DrawerContent(
+        new Grid()
+            .VisibleBoundsPadding(PaddingMask.All)
+            .Padding(16)
+            .Children(
+                // DrawerControl ...
+                new TextBlock()
+                    .Text("Drawer")
+            )
+    )
+```
+***
 #### NavigationView with drawer
 The `DrawerControl` can also be used to enhance [`NavigationView` (muxc)](https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.navigationview?view=winui-3.0) with gesture support, using the `DrawerNavigationViewStyle`:
+# [**XAML**](#tab/xaml)
 ```xml
 xmlns:utu="using:Uno.Toolkit.UI"
 xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
@@ -97,7 +129,28 @@ xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     </muxc:NavigationView.Content>
 </muxc:NavigationView>
 ```
-
+# [**C#**](#tab/csharp)
+```cs
+new NavigationView()
+    .PaneTitle("Gesture NavView")
+    .OpenPaneLength(320)
+    .DrawerControlBehavior(fitToDrawerContent: false)
+    //TODO Couldnt find Drawer Style
+    .Style(Theme.NavigationView.Styles.Drawer)
+    .MenuItems(
+        new NavigationViewItem()
+            .Content("Home"),
+        new NavigationViewItem()
+            .Content("Page 1"),
+        new NavigationViewItem()
+            .Content("Page 2"),
+        new NavigationViewItem()
+            .Content("Page 3")
+    )
+    .Content(
+        new Frame()
+    )
+```
 From the `NavigationView`, the properties of the `DrawerControl` can be accessed through the same/similarly named properties or via attached properties:
 
 DrawerControl|NavigationView

doc/controls/DrawerFlyoutPresenter.md

@@ -8,6 +8,7 @@ uid: Toolkit.Controls.DrawerFlyoutPresenter
 ## Properties
 ### Remarks
 All of the properties below can be used both as a dependency property or as an attached property, much like the `ScrollViewer` properties:
+# [**XAML**](#tab/xaml)
 ```xml
 xmlns:utu="using:Uno.Toolkit.UI"
 
@@ -25,6 +26,22 @@ xmlns:utu="using:Uno.Toolkit.UI"
                            LightDismissOverlayBackground="#80808080"
                            IsGestureEnabled="True" />
 ```
+# [**C#**](#tab/csharp)
+```cs
+new Style<FlyoutPresenter>()
+    .BasedOn("DrawerFlyoutPresenterStyle")
+    .Setters(s => s.DrawerFlyoutPresenter(x => x.OpenDirection(DrawerOpenDirection.Up)))
+    .Setters(s => s.DrawerFlyoutPresenter(x => x.LightDismissOverlayBackground("#80808080")))
+    .Setters(s => s.DrawerFlyoutPresenter(x => x.IsGestureEnabled(true)))
+// and/or
+new DrawerFlyoutPresenter()
+    .OpenDirection(DrawerOpenDirection.Up)
+    .LightDismissOverlayBackground("#80808080")
+    .IsGestureEnabled(true)
+```
+> [!IMPORTANT]
+> `DrawerLength` is currently not supported in C# Markup.
+***
 
 > [!IMPORTANT]
 > There is currently a bug on windows that prevents the usage of attached property style setters. The workaround is to add the following code in your application:
@@ -88,6 +105,7 @@ To use this, simply use a `Flyout` with `Placement="Full"` and one of the follow
 - `BottomDrawerFlyoutPresenterStyle` (OpenDirection=Up)
 
 Example:
+# [**XAML**](#tab/xaml)
 ```xml
 <Button Content="Bottom Drawer"
         xmlns:toolkit="using:Uno.UI.Toolkit">
@@ -103,11 +121,35 @@ Example:
     </Button.Flyout>
 </Button>
 ```
+# [**C#**](#tab/csharp)
+```cs
+new Button()
+    .Flyout(
+        new Flyout()
+            .Placement(FlyoutPlacementMode.Full)
+            //TODO couldn't find BottomDrawer style
+            .FlyoutPresenterStyle(Theme.FlyoutPresenter.Styles.BottomDrawer)
+            .Content(
+                new StackPanel()
+                    .VisibleBoundsPadding(PaddingMask.All)
+                    .Background(Colors.SkyBlue)
+                    .MinHeight(200)
+                    .Children(
+                        new TextBlock()
+                            .Text("text"),
+                        new Button()
+                            .Content("button")
+                    )
+            )
+    )
+```
+***
 > [!NOTE]
 > Here `VisibleBoundsPadding.PaddingMask` is used to prevent the content from being placed outside of the user-interactable area on mobile devices.
 
 ### Extended Use Cases
 - Rounded Corner
+    # [**XAML**](#tab/xaml)
     ```xml
     <Flyout Placement="Full">
         <Flyout.FlyoutPresenterStyle>
@@ -120,8 +162,27 @@ Example:
         </Border>
     </Flyout>
     ```
+    # [**C#**](#tab/csharp)
+    ```cs
+    new Flyout()
+        .Placement(FlyoutPlacementMode.Full)
+        .FlyoutPresenterStyle(
+            new Style<FlyoutPresenter>()
+                .BasedOn("BottomDrawerFlyoutPresenterStyle")
+                .Setters(s => s.CornerRadius(new CornerRadius(16, 16, 0, 0)))
+        )
+        .Content(
+            new Border()
+                .VisibleBoundsPadding(PaddingMask.All)
+                .Padding(new Thickness(16, 16, 0, 0))
+        )
+    ```
+    ***
+
     > remarks: `Padding` is used on the flyout content to avoid content being clipped.
+
 - Custom background
+    # [**XAML**](#tab/xaml)
     ```xml
     <Flyout Placement="Full">
         <Flyout.FlyoutPresenterStyle>
@@ -134,8 +195,29 @@ Example:
         </Border>
     </Flyout>
     ```
+    # [**C#**](#tab/csharp)
+    ```cs
+    new Flyout()
+        .Placement(FlyoutPlacementMode.Full)
+        .FlyoutPresenterStyle(
+            new Style<FlyoutPresenter>()
+                .BasedOn("BottomDrawerFlyoutPresenterStyle")
+                .Setters(s => s.Background(Colors.SkyBlue))
+        )
+        .Content(
+            new Border()
+                .VisibleBoundsPadding(PaddingMask.All)
+                .Padding(new Thickness(16, 16, 0, 0))
+        )
+    ```
+    ***
     > remarks: Avoid setting `Background` directly on the flyout content:
     > ```xml
     > <Border toolkit:VisibleBoundsPadding.PaddingMask="All" Background="SkyBlue">
     > ```
+    > ```cs
+    > new Border()
+    >     .Placement(FlyoutPlacementMode.Full)
+    >     .Background(Colors.SkyBlue)
+    > ```
     > Instead, `Background` should be set from style setter to avoid edge bleeding on certain platforms, and to avoid default background being painted on the rounded corners.