docs(UnoCTK)Added examples for usage of converters second try from initial #18726

doc/articles/uno-community-toolkit-v8.md

@@ -184,6 +184,100 @@ You can set the `Header`, `HeaderIcon`, `Description`, and `Content` properties
 
 A complete working sample, along with additional examples, is available on GitHub: [Uno Windows Community Toolkit SettingsCard Sample](https://github.com/unoplatform/Uno.Samples/tree/master/UI/WindowsCommunityToolkit/Version-8.x/UnoWCTSettingsCardSample)
 
+## Using Non-UI Elements from the CommunityToolkit: Converters
+
+The CommunityToolkit is providing some ready-to-use Converters for e.g. x:Bind in Xaml, whithout having to write already existing basic Converters yourself. 
+[List of CommunityToolkit Converters | Windows Toolkit Documentation](https://learn.microsoft.com/en-us/dotnet/communitytoolkit/windows/converters/)
+
+The implementation of those are quite similar to the example of the SettingsControl above, but there are small adjustments to be done to use them:
+
+1. Import of the Package
+
+   Change this:
+
+   ```CommunityToolkit.WinUI.Controls.SettingsControls```
+
+   to Converters namespace:
+
+   ```CommunityToolkit.WinUI.Converters```
+
+   while the Version will stay the same as above.
+
+1. Add the related needed namespace(s)
+
+    > [!NOTE]
+    > In WCT version 8.x, the namespaces between UWP and WinAppSDK were merged.
+
+    ### WinUI / WinAppSDK / UWP
+
+      In XAML:  
+        ```xmlns:converters="using:CommunityToolkit.WinUI.Converters"```
+
+      In C#:  
+        ```using CommunityToolkit.WinUI.Converters;```
+
+      In case you are developing a App that's using C# Markup and you want to use the Converters, you can now switch to [C#-Markup Converters](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Markup/Converters.html) Documentation for future Usage Guide, the general Import is done from here on.
+
+  1. Xaml Definition
+
+Important Difference to the previous seen SettingsCard Control Example, a Non-UI Converter has to be imported to the Page.Ressources Section to StaticRessources like this for using it, since there is no single Namespace per Converter like on the Controls:
+
+### [Example StringToVisibilityConverter](#tab/string-visible-conv)
+
+StringToVisibilityConverter is a Converter that has to be bound to a String typed Property and will return a Visibility State.
+
+        ```
+        <Page.Resources>
+          <converters:StringVisibilityConverter x:Key="YourStringVisibilityConverter"/>
+        </Page.Resources>
+        ```
+
+Somewhere in your Page Content:
+
+        ```xml
+                <TextBox x:Name="tbName"
+                         Text="{Binding Name, Mode=TwoWay}" 
+                         PlaceholderText="Enter your name:"/>
+                <Button x:Name="StartButton"
+                        Content="Start a cool simple Game!"
+                        AutomationProperties.AutomationId="StartAGameButton"
+                        Command="{Binding GoToStart}"
+                        HorizontalAlignment="Center"
+                        Visibility="{x:Bind tbName.Text, Converter={StaticResource StringVisibilityConverter}, Mode=OneWay}"/>
+        ```
+
+### [Example BoolToObjectConverter](#tab/bool-obj-conv)
+
+BoolToObjectConverter is a Converter that has to be bound to a Boolean typed Property and can return any Object you will give to it.
+You only have to tell it what to return on True or False. If you would like to use it for switching color on validation:
+
+    ```
+    BoolToObjectConverter x:Key="BoolToColorConverter" TrueValue="{ThemeResource SystemFillColorSuccessBackgroundBrush}"
+                                                        FalseValue="{ThemeResource SystemFillColorCriticalBackgroundBrush}"/>
+    ```
+
+> [!NOTE]
+> The used ThemeResource Brushes can be found in the WinUI Gallery for example.
+> Feel free to use your own Colors e.g. from ColorPaletteOverrides
+
+Somewhere in your Page Content:
+
+    ```xml
+            <TextBox x:Name="tbName"
+                     Text="{Binding Name, Mode=TwoWay}" 
+                     PlaceholderText="Enter your name:"
+                     BackgroundColor="{x:Bind tbName.Text, Converter={StaticResource BoolToColorConverter},Mode=OneWay}/>
+            <Button x:Name="StartButton"
+                    Content="Start a cool simple Game!"
+                    AutomationProperties.AutomationId="StartAGameButton"
+                    Command="{Binding GoToStart}"
+                    HorizontalAlignment="Center"/>
+    ```
+
+---
+
+[!include[getting-help](includes/getting-help.md)]
+
 ---
 
 [!include[getting-help](includes/getting-help.md)]