[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] TextBoxExtensions 엘리먼트 : Mask/MaskPlaceholder/CustomMask 첨부 속성 사용하기

■ TextBoxExtensions 엘리먼트의 Mask/MaskPlaceholder/CustomMask 첨부 속성을 사용하는 방법을 보여준다.

※ 비주얼 스튜디오에서 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <Style TargetType="TextBox" x:Key="TextBoxStyleKey">
            <Setter Property="VerticalAlignment" Value="Top"  />
            <Setter Property="TextWrapping"      Value="Wrap" />
        </Style>
        <DataTemplate x:Key="TextBoxHeaderTemplateKey">
            <StackPanel>
                <TextBlock
                    TextWrapping="WrapWholeWords"
                    Text="{Binding}" />
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <Grid Margin="30">
        <StackPanel Spacing="20">
            <TextBox
                Style="{StaticResource TextBoxStyleKey}"
                HeaderTemplate="{StaticResource TextBoxHeaderTemplateKey}"
                Header="Text box with Mask 9a9a-a9a* (9 allows from 0 to 9, a allow from a to Z and * allows both a and 9)"
                ctw:TextBoxExtensions.Mask="9a9a-a9a*"
                Text="TextBoxMask" />
            <TextBox
                Style="{StaticResource TextBoxStyleKey}"
                HeaderTemplate="{StaticResource TextBoxHeaderTemplateKey}"
                Header="Text box with Mask +1999-9999 and placeHolder as space (placeholder represents the characters the user can change on runtime)"
                ctw:TextBoxExtensions.Mask="+1999-9999"
                ctw:TextBoxExtensions.MaskPlaceholder=" " />
            <TextBox
                Style="{StaticResource TextBoxStyleKey}"
                HeaderTemplate="{StaticResource TextBoxHeaderTemplateKey}"
                Header="Text box with Mask +964 799 999 9999 (Notice how we escape the first 9 with a backslash)"
                ctw:TextBoxExtensions.Mask="+\964 799 999 9999" />
            <TextBox
                Style="{StaticResource TextBoxStyleKey}"
                HeaderTemplate="{StaticResource TextBoxHeaderTemplateKey}"
                Header="Text box with Mask 99\99\9999 (You can escape a backslash with another backslash)"
                ctw:TextBoxExtensions.Mask="99\\99\\9999" />
            <TextBox
                Style="{StaticResource TextBoxStyleKey}"
                HeaderTemplate="{StaticResource TextBoxHeaderTemplateKey}"
                Header="Text box with CustomMask in case you want to define your own variable character like a, 9 and *. Mask: a5c-5c*9, 5: [1-5], c: [a-c]"
                ctw:TextBoxExtensions.Mask="a5c-5c*9"
                ctw:TextBoxExtensions.CustomMask="5:[1-5],c:[a-c]" />
        </StackPanel>
    </Grid>
</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"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

</Style>

<TextBlock

TextWrapping="WrapWholeWords"

Text="{Binding}" />

</StackPanel>

</DataTemplate>

</Page.Resources>

<TextBox