Skip to content

Commit 986e38e

Browse files
michael-hawkermichael-hawker
committed
Add SwitchPresenter samples, missed in #16 
1 parent 9205143 commit 986e38e

File tree

8 files changed

+171
-1
lines changed

8 files changed

+171
-1
lines changed

‎components/Primitives/samples/Assets/SwitchPresenter.png

3.56 KB
Loading

‎components/Primitives/samples/Primitives.Samples.csproj

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<None Remove="Assets\ConstrainedBox.png" />
1818
<None Remove="Assets\DockPanel.png" />
1919
<None Remove="Assets\StaggeredPanel.png" />
20+
<None Remove="Assets\SwitchPresenter.png" />
2021
<None Remove="Assets\UniformGrid.png" />
2122
<None Remove="Assets\WestSeattleView.jpg" />
2223
<None Remove="Assets\WrapLayout.png" />
@@ -39,6 +40,9 @@
3940
<Content Include="Assets\StaggeredPanel.png">
4041
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
4142
</Content>
43+
<Content Include="Assets\SwitchPresenter.png">
44+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
45+
</Content>
4246
<Content Include="Assets\UniformGrid.png">
4347
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
4448
</Content>

‎components/Primitives/samples/SwitchPresenter.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: SwitchPresenter
3+
author: michael-hawker
4+
description: A XAML ContentPresenter which can act like a switch statement for showing different UI based on a condition.
5+
keywords: switch, logic, switchpresenter, contentpresenter, visibility, triggers, converters
6+
dev_langs:
7+
- csharp
8+
category: Layouts
9+
subcategory: Miscellaneous
10+
discussion-id: 0
11+
issue-id: 0
12+
icon: Assets/SwitchPresenter.png
13+
---
14+
15+
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.
16+
17+
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.
18+
19+
## Examples
20+
21+
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:
22+
23+
> [!SAMPLE SwitchPresenterLayoutSample]
24+
25+
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:
26+
27+
> [!SAMPLE SwitchPresenterValueSample]

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<Page x:Class="PrimitivesExperiment.Samples.SwitchPresenter.SwitchPresenterLayoutSample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7+
xmlns:ui="using:CommunityToolkit.WinUI"
8+
mc:Ignorable="d">
9+
10+
<StackPanel>
11+
<ComboBox x:Name="Lookup"
12+
Margin="0,0,0,8"
13+
Header="Look up reservation"
14+
SelectedIndex="0">
15+
<x:String>Select an option</x:String>
16+
<x:String>Confirmation Code</x:String>
17+
<x:String>E-ticket number</x:String>
18+
<x:String>Mileage Plan number</x:String>
19+
</ComboBox>
20+
<!-- SwitchPresenter binds to a value -->
21+
<controls:SwitchPresenter Value="{Binding SelectedItem, ElementName=Lookup}">
22+
<!-- And then only dynamically displays the Case with the matching Value -->
23+
<controls:Case Value="Confirmation Code">
24+
<StackPanel>
25+
<TextBox Name="ConfirmationCodeValidator"
26+
ui:TextBoxExtensions.Regex="^[a-zA-Z]{6}$"
27+
Header="Confirmation code"
28+
PlaceholderText="6 letters" />
29+
<TextBlock Text="Thanks for entering a valid code!"
30+
Visibility="{Binding (ui:TextBoxExtensions.IsValid), ElementName=ConfirmationCodeValidator}" />
31+
</StackPanel>
32+
</controls:Case>
33+
<controls:Case Value="E-ticket number">
34+
<StackPanel>
35+
<TextBox Name="TicketValidator"
36+
ui:TextBoxExtensions.Regex="(^\d{10}$)|(^\d{13}$)"
37+
Header="E-ticket number"
38+
PlaceholderText="10 or 13 numbers" />
39+
<TextBlock Text="Thanks for entering a valid code!"
40+
Visibility="{Binding (ui:TextBoxExtensions.IsValid), ElementName=TicketValidator}" />
41+
</StackPanel>
42+
</controls:Case>
43+
<controls:Case Value="Mileage Plan number">
44+
<TextBox Name="PlanValidator"
45+
Header="Mileage Plan #"
46+
PlaceholderText="Mileage Plan #" />
47+
</controls:Case>
48+
<!-- You can also provide a default case if no match is found -->
49+
<controls:Case IsDefault="True">
50+
<TextBlock Text="Please select a way to lookup your reservation above..." />
51+
</controls:Case>
52+
</controls:SwitchPresenter>
53+
</StackPanel>
54+
</Page>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using PrimitivesExperiment.Samples.ConstrainedBox;
6+
7+
namespace PrimitivesExperiment.Samples.SwitchPresenter;
8+
9+
[ToolkitSample(id: nameof(SwitchPresenterLayoutSample), "SwitchPresenter Layout", description: $"A sample for showing how to use a {nameof(SwitchPresenter)} for complex layouts.")]
10+
public sealed partial class SwitchPresenterLayoutSample : Page
11+
{
12+
public SwitchPresenterLayoutSample()
13+
{
14+
this.InitializeComponent();
15+
}
16+
}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<Page x:Class="PrimitivesExperiment.Samples.SwitchPresenter.SwitchPresenterValueSample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:local="using:PrimitivesExperiment.Samples.SwitchPresenter"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
xmlns:ui="using:CommunityToolkit.WinUI"
9+
mc:Ignorable="d">
10+
11+
<StackPanel>
12+
<ComboBox x:Name="AnimalPicker"
13+
Header="Pick an Animal"
14+
ItemsSource="{ui:EnumValues Type=local:Animal}"
15+
SelectedIndex="0" />
16+
<controls:SwitchPresenter Padding="16"
17+
TargetType="local:Animal"
18+
Value="{Binding SelectedItem, ElementName=AnimalPicker}">
19+
<controls:Case Value="Cat">
20+
<TextBlock FontSize="32"
21+
Text="🐈" />
22+
</controls:Case>
23+
<controls:Case Value="Dog">
24+
<TextBlock FontSize="32"
25+
Text="🐕" />
26+
</controls:Case>
27+
<controls:Case Value="Bunny">
28+
<TextBlock FontSize="32"
29+
Text="🐇" />
30+
</controls:Case>
31+
<controls:Case Value="Llama">
32+
<TextBlock FontSize="32"
33+
Text="🦙" />
34+
</controls:Case>
35+
<controls:Case Value="Parrot">
36+
<TextBlock FontSize="32"
37+
Text="🦜" />
38+
</controls:Case>
39+
<controls:Case Value="Squirrel">
40+
<TextBlock FontSize="32"
41+
Text="🐿" />
42+
</controls:Case>
43+
</controls:SwitchPresenter>
44+
</StackPanel>
45+
</Page>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
namespace PrimitivesExperiment.Samples.SwitchPresenter;
6+
7+
[ToolkitSample(id: nameof(SwitchPresenterValueSample), "SwitchPresenter Value", description: $"A sample for showing how to use a {nameof(SwitchPresenter)} for state changes from an enum.")]
8+
public sealed partial class SwitchPresenterValueSample : Page
9+
{
10+
public SwitchPresenterValueSample()
11+
{
12+
this.InitializeComponent();
13+
}
14+
}
15+
16+
public enum Animal
17+
{
18+
Cat,
19+
Dog,
20+
Bunny,
21+
Llama,
22+
Parrot,
23+
Squirrel
24+
}

‎components/Primitives/samples/UniformGrid.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ keywords: UniformGrid, grid, layout, responsive
66
dev_langs:
77
- csharp
88
category: Layouts
9-
subcategory: Layout
9+
subcategory: Miscellaneous
1010
discussion-id: 0
1111
issue-id: 0
1212
icon: Assets/UniformGrid.png

0 commit comments

Comments
 (0)