[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] SwitchPresenter 엘리먼트 : Value 속성을 사용해 XAML 스위치문 만들기

■ SwitchPresenter 엘리먼트의 Value 속성을 사용해 XAML 스위치문을 만드는 방법을 보여준다.

※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ctw="using:CommunityToolkit.WinUI"
    xmlns:ctwc="using:CommunityToolkit.WinUI.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Margin="50"
        Width="500">
        <ComboBox Name="comboBox"
            Margin="0 0 0 10"
            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>
        <ctwc:SwitchPresenter Value="{Binding SelectedItem, ElementName=comboBox}">
            <ctwc:Case Value="Confirmation Code">
                <StackPanel Spacing="10">
                    <TextBox Name="confirmationCodeTextBox"
                        Header="Confirmation code"
                        ctw:TextBoxExtensions.Regex="^[a-zA-Z]{6}$"
                        PlaceholderText="6 letters" />
                    <TextBlock
                        Text="Thanks for entering a valid code!"
                        Visibility="{Binding (ctw:TextBoxExtensions.IsValid), ElementName=confirmationCodeTextBox}" />
                </StackPanel>
            </ctwc:Case>
            <ctwc:Case Value="E-ticket number">
                <StackPanel Spacing="10">
                    <TextBox Name="eTicketNumberTextBox"
                        Header="E-ticket number"
                        ctw:TextBoxExtensions.Regex="(^\d{10}$)|(^\d{13}$)"
                        PlaceholderText="10 or 13 numbers" />
                    <TextBlock
                        Text="Thanks for entering a valid code!"
                        Visibility="{Binding (ctw:TextBoxExtensions.IsValid), ElementName=eTicketNumberTextBox}" />
                </StackPanel>
            </ctwc:Case>
            <ctwc:Case Value="Mileage Plan number">
                <TextBox
                    Header="Mileage Plan #"
                    PlaceholderText="Mileage Plan #" />
            </ctwc:Case>
            <ctwc:Case IsDefault="True">
                <TextBlock Text="Please select a way to lookup your reservation above..." />
            </ctwc:Case>
        </ctwc:SwitchPresenter>
    </StackPanel>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:ctw="using:CommunityToolkit.WinUI"

xmlns:ctwc="using:CommunityToolkit.WinUI.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="50"

Width="500">

<ComboBox Name="comboBox"

Margin="0 0 0 10"

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>

<ctwc:SwitchPresenter Value="{Binding SelectedItem, ElementName=comboBox}">

<ctwc:Case Value="Confirmation Code">

<TextBox Name="confirmationCodeTextBox"

Header="Confirmation code"

ctw:TextBoxExtensions.Regex="^[a-zA-Z]{6}$"

PlaceholderText="6 letters" />

<TextBlock

Text="Thanks for entering a valid code!"

Visibility="{Binding (ctw:TextBoxExtensions.IsValid), ElementName=confirmationCodeTextBox}" />

</StackPanel>

</ctwc:Case>

<ctwc:Case Value="E-ticket number">

<TextBox Name="eTicketNumberTextBox"

Header="E-ticket number"

ctw:TextBoxExtensions.Regex="(^\d{10}$)|(^\d{13}$)"

PlaceholderText="10 or 13 numbers" />

<TextBlock

Text="Thanks for entering a valid code!"

Visibility="{Binding (ctw:TextBoxExtensions.IsValid), ElementName=eTicketNumberTextBox}" />

</StackPanel>

</ctwc:Case>

<ctwc:Case Value="Mileage Plan number">

<TextBox

Header="Mileage Plan #"

PlaceholderText="Mileage Plan #" />

</ctwc:Case>

<ctwc:Case IsDefault="True">

</ctwc:Case>

</ctwc:SwitchPresenter>

</StackPanel>

</Page>

TestProject.zip