Skip to content

Commit bd87041

Browse files
michael-hawkermichael-hawker
committed
Add Sample to showcase new power unlocked in SwitchPresenter v2 with object Content for a Data Transformation with ContentTemplate
Tested on UWP, WinUI 3, and Uno WASM
1 parent da4e6ea commit bd87041

File tree

6 files changed

+85
-21
lines changed

6 files changed

+85
-21
lines changed

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

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -63,22 +63,4 @@
6363
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
6464
</Content>
6565
</ItemGroup>
66-
67-
<ItemGroup>
68-
<Compile Update="UniformGridSample.xaml.cs">
69-
<DependentUpon>UniformGridSample.xaml</DependentUpon>
70-
</Compile>
71-
<Compile Update="DockPanelSample.xaml.cs">
72-
<DependentUpon>DockPanelSample.xaml</DependentUpon>
73-
</Compile>
74-
<Compile Update="ConstrainedBoxSample.xaml.cs">
75-
<DependentUpon>ConstrainedBoxSample.xaml</DependentUpon>
76-
</Compile>
77-
<Compile Update="StaggeredLayoutSample.xaml.cs">
78-
<DependentUpon>StaggeredLayoutSample.xaml</DependentUpon>
79-
</Compile>
80-
<Compile Update="WrapPanelSample.xaml.cs">
81-
<DependentUpon>WrapPanelSample.xaml</DependentUpon>
82-
</Compile>
83-
</ItemGroup>
8466
</Project>

‎components/Primitives/samples/SwitchPresenter.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,9 @@ Or it can simply be used to clearly display different outcomes based on some sta
2929
`SwitchPresenter` can also be used as a replacement for the deprecated `Loading` control. This provides more fine-grained control over animations and content within each state:
3030

3131
> [!SAMPLE SwitchPresenterLoaderSample]
32+
33+
We can also invert the paradigm a bit with a `SwitchPresenter` to do data transformations within XAML using a `ContentTemplate`. Imagine an alternate view of our first starting example:
34+
35+
> [!SAMPLE SwitchPresenterTemplateSample]
36+
37+
That's right! `SwitchPresenter` can be used not just for displaying different UIElements but in feeding different kinds of data into the `ContentTemplate` as well.

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5-
using PrimitivesExperiment.Samples.ConstrainedBox;
6-
75
namespace PrimitivesExperiment.Samples.SwitchPresenter;
86

97
[ToolkitSample(id: nameof(SwitchPresenterLayoutSample), "SwitchPresenter Layout", description: $"A sample for showing how to use a {nameof(SwitchPresenter)} for complex layouts.")]

‎components/Primitives/samples/SwitchPresenter/SwitchPresenterTemplateSample.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.SwitchPresenterTemplateSample"
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="Lookup"
13+
Margin="0,0,0,8"
14+
Header="Look up reservation"
15+
SelectedIndex="0">
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="{x:Bind Lookup.SelectedItem, Mode=OneWay}">
22+
<!-- We define a common UI template for the data we want to display -->
23+
<controls:SwitchPresenter.ContentTemplate>
24+
<DataTemplate x:DataType="local:TemplateInformation">
25+
<StackPanel>
26+
<TextBox Name="CodeValidator"
27+
ui:TextBoxExtensions.Regex="{x:Bind Regex, Mode=OneWay}"
28+
Header="{x:Bind Header, Mode=OneWay}"
29+
PlaceholderText="{x:Bind PlaceholderText, Mode=OneWay}" />
30+
<TextBlock Text="Thanks for entering a valid code!"
31+
Visibility="{Binding (ui:TextBoxExtensions.IsValid), ElementName=CodeValidator}" />
32+
</StackPanel>
33+
</DataTemplate>
34+
</controls:SwitchPresenter.ContentTemplate>
35+
<!-- And use the value to transform our data into an object we'll use as the context for our UI -->
36+
<controls:Case IsDefault="True"
37+
Value="Confirmation Code">
38+
<local:TemplateInformation Header="Confirmation code"
39+
PlaceholderText="6 letters"
40+
Regex="^[a-zA-Z]{6}$" />
41+
</controls:Case>
42+
<controls:Case Value="E-ticket number">
43+
<local:TemplateInformation Header="E-ticket number"
44+
PlaceholderText="10 or 13 numbers"
45+
Regex="(^\d{10}$)|(^\d{13}$)" />
46+
</controls:Case>
47+
<controls:Case Value="Mileage Plan number">
48+
<local:TemplateInformation Header="Mileage Plan #"
49+
PlaceholderText="Mileage Plan (12 digits)"
50+
Regex="(^\d{12}$)" />
51+
</controls:Case>
52+
</controls:SwitchPresenter>
53+
</StackPanel>
54+
</Page>

‎components/Primitives/samples/SwitchPresenter/SwitchPresenterTemplateSample.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(SwitchPresenterTemplateSample), "SwitchPresenter Template", description: $"A sample for showing how to use a {nameof(SwitchPresenter)} with a Content Template.")]
8+
public sealed partial class SwitchPresenterTemplateSample : Page
9+
{
10+
public SwitchPresenterTemplateSample()
11+
{
12+
this.InitializeComponent();
13+
}
14+
}
15+
16+
public partial class TemplateInformation
17+
{
18+
public string? Header { get; set; }
19+
20+
public string? Regex { get; set; }
21+
22+
public string? PlaceholderText { get; set; }
23+
}
24+

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
SelectedIndex="0" />
2323
<controls:SwitchPresenter Padding="16"
2424
TargetType="local:Animal"
25-
Value="{Binding SelectedItem, ElementName=AnimalPicker}">
25+
Value="{x:Bind AnimalPicker.SelectedItem, Mode=OneWay}">
2626
<controls:Case Value="Bunny">
2727
<TextBlock FontSize="32"
2828
Text="🐇" />

0 commit comments

Comments
 (0)