Add SwitchPresenter samples, missed in #16

components/Primitives/samples/Primitives.Samples.csproj

@@ -17,6 +17,7 @@
     <None Remove="Assets\ConstrainedBox.png" />
     <None Remove="Assets\DockPanel.png" />
     <None Remove="Assets\StaggeredPanel.png" />
+    <None Remove="Assets\SwitchPresenter.png" />
     <None Remove="Assets\UniformGrid.png" />
     <None Remove="Assets\WestSeattleView.jpg" />
     <None Remove="Assets\WrapLayout.png" />
@@ -39,6 +40,9 @@
     <Content Include="Assets\StaggeredPanel.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="Assets\SwitchPresenter.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="Assets\UniformGrid.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>

components/Primitives/samples/SwitchPresenter.md

@@ -0,0 +1,27 @@
+---
+title: SwitchPresenter
+author: michael-hawker
+description: A XAML ContentPresenter which can act like a switch statement for showing different UI based on a condition.
+keywords: switch, logic, switchpresenter, contentpresenter, visibility, triggers, converters
+dev_langs:
+  - csharp
+category: Layouts
+subcategory: Miscellaneous
+discussion-id: 0
+issue-id: 0
+icon: Assets/SwitchPresenter.png
+---
+
+The `SwitchPresenter` control acts like a switch statement for XAML. It allows a developer to display certain content based on the condition of another value as an alternative to managing multiple Visibility values or complex visual states.
+
+Unlike traditional approaches of showing/hiding components within a page, the `SwitchPresenter` will only load and attach the matching Case's content to the Visual Tree.
+
+## Examples
+
+SwitchPresenter can make it easier to follow complex layout changes or layouts with varying logic that are based on a property, for instance the type of ticketing mode for an airline:
+
+> [!SAMPLE SwitchPresenterLayoutSample]
+
+Or it can simply be used to clearly display different outcomes based on some state which can be useful for a `NavigationView` or with a simple enum as in the following example:
+
+> [!SAMPLE SwitchPresenterValueSample]

components/Primitives/samples/SwitchPresenter/SwitchPresenterLayoutSample.xaml

@@ -0,0 +1,54 @@
+<Page x:Class="PrimitivesExperiment.Samples.SwitchPresenter.SwitchPresenterLayoutSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel>
+        <ComboBox x:Name="Lookup"
+                  Margin="0,0,0,8"
+                  Header="Look up reservation"
+                  SelectedIndex="0">
+            <x:String>Select an option</x:String>
+            <x:String>Confirmation Code</x:String>
+            <x:String>E-ticket number</x:String>
+            <x:String>Mileage Plan number</x:String>
+        </ComboBox>
+        <!--  SwitchPresenter binds to a value  -->
+        <controls:SwitchPresenter Value="{Binding SelectedItem, ElementName=Lookup}">
+            <!--  And then only dynamically displays the Case with the matching Value  -->
+            <controls:Case Value="Confirmation Code">
+                <StackPanel>
+                    <TextBox Name="ConfirmationCodeValidator"
+                             ui:TextBoxExtensions.Regex="^[a-zA-Z]{6}$"
+                             Header="Confirmation code"
+                             PlaceholderText="6 letters" />
+                    <TextBlock Text="Thanks for entering a valid code!"
+                               Visibility="{Binding (ui:TextBoxExtensions.IsValid), ElementName=ConfirmationCodeValidator}" />
+                </StackPanel>
+            </controls:Case>
+            <controls:Case Value="E-ticket number">
+                <StackPanel>
+                    <TextBox Name="TicketValidator"
+                             ui:TextBoxExtensions.Regex="(^\d{10}$)|(^\d{13}$)"
+                             Header="E-ticket number"
+                             PlaceholderText="10 or 13 numbers" />
+                    <TextBlock Text="Thanks for entering a valid code!"
+                               Visibility="{Binding (ui:TextBoxExtensions.IsValid), ElementName=TicketValidator}" />
+                </StackPanel>
+            </controls:Case>
+            <controls:Case Value="Mileage Plan number">
+                <TextBox Name="PlanValidator"
+                         Header="Mileage Plan #"
+                         PlaceholderText="Mileage Plan #" />
+            </controls:Case>
+            <!--  You can also provide a default case if no match is found  -->
+            <controls:Case IsDefault="True">
+                <TextBlock Text="Please select a way to lookup your reservation above..." />
+            </controls:Case>
+        </controls:SwitchPresenter>
+    </StackPanel>
+</Page>

components/Primitives/samples/SwitchPresenter/SwitchPresenterLayoutSample.xaml.cs

@@ -0,0 +1,16 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using PrimitivesExperiment.Samples.ConstrainedBox;
+
+namespace PrimitivesExperiment.Samples.SwitchPresenter;
+
+[ToolkitSample(id: nameof(SwitchPresenterLayoutSample), "SwitchPresenter Layout", description: $"A sample for showing how to use a {nameof(SwitchPresenter)} for complex layouts.")]
+public sealed partial class SwitchPresenterLayoutSample : Page
+{
+    public SwitchPresenterLayoutSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Primitives/samples/SwitchPresenter/SwitchPresenterValueSample.xaml

@@ -0,0 +1,45 @@
+<Page x:Class="PrimitivesExperiment.Samples.SwitchPresenter.SwitchPresenterValueSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:PrimitivesExperiment.Samples.SwitchPresenter"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel>
+        <ComboBox x:Name="AnimalPicker"
+                  Header="Pick an Animal"
+                  ItemsSource="{ui:EnumValues Type=local:Animal}"
+                  SelectedIndex="0" />
+        <controls:SwitchPresenter Padding="16"
+                                  TargetType="local:Animal"
+                                  Value="{Binding SelectedItem, ElementName=AnimalPicker}">
+            <controls:Case Value="Cat">
+                <TextBlock FontSize="32"
+                           Text="🐈" />
+            </controls:Case>
+            <controls:Case Value="Dog">
+                <TextBlock FontSize="32"
+                           Text="🐕" />
+            </controls:Case>
+            <controls:Case Value="Bunny">
+                <TextBlock FontSize="32"
+                           Text="🐇" />
+            </controls:Case>
+            <controls:Case Value="Llama">
+                <TextBlock FontSize="32"
+                           Text="🦙" />
+            </controls:Case>
+            <controls:Case Value="Parrot">
+                <TextBlock FontSize="32"
+                           Text="🦜" />
+            </controls:Case>
+            <controls:Case Value="Squirrel">
+                <TextBlock FontSize="32"
+                           Text="🐿" />
+            </controls:Case>
+        </controls:SwitchPresenter>
+    </StackPanel>
+</Page>

components/Primitives/samples/SwitchPresenter/SwitchPresenterValueSample.xaml.cs

@@ -0,0 +1,24 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace PrimitivesExperiment.Samples.SwitchPresenter;
+
+[ToolkitSample(id: nameof(SwitchPresenterValueSample), "SwitchPresenter Value", description: $"A sample for showing how to use a {nameof(SwitchPresenter)} for state changes from an enum.")]
+public sealed partial class SwitchPresenterValueSample : Page
+{
+    public SwitchPresenterValueSample()
+    {
+        this.InitializeComponent();
+    }
+}
+
+public enum Animal
+{
+    Cat,
+    Dog,
+    Bunny,
+    Llama,
+    Parrot,
+    Squirrel
+}

components/Primitives/samples/UniformGrid.md

@@ -6,7 +6,7 @@ keywords: UniformGrid, grid, layout, responsive
 dev_langs:
   - csharp
 category: Layouts
-subcategory: Layout
+subcategory: Miscellaneous
 discussion-id: 0
 issue-id: 0
 icon: Assets/UniformGrid.png