用WinUI3开发一个正则表达式工具

WinUI3推出一段时间了 ，但目前这个版本的vs2022 17.1 还不能可视化也不能看属性，只能纯代码开发，而且有一些组件属性跟wpf和uwp还有点区别 昨天稍微试着写了一下，现在把过程贴出来给新手指指路

首先下载winui3模板

然后创建新项目的时候我选的这个 空白应用已打包不带wap那个也可以

直接运行就是一个按钮程序

然后先写布局 Grid 三行两列

<Window
    x:Class="RegexZoo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:RegexZoo"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="400" />

        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock
            Grid.Row="1"
            Grid.Column="0"
            Margin="5"
            Text="原文本" />
        <TextBox
            Name="tbSource"
            Grid.Row="2"
            Grid.Column="0"
            MinHeight="400"
            Margin="5"
            HorizontalAlignment="Stretch"
            BorderBrush="#69c0ff"
            BorderThickness="1"
            ScrollViewer.VerticalScrollBarVisibility="Auto"
            TextWrapping="Wrap" />
        <TextBox
            Name="tbPattern"
            Grid.Row="0"
            Grid.Column="0"
            Width="400"
            Margin="5"
            HorizontalAlignment="Left"
            TextWrapping="Wrap" />
        <Button
            x:Name="myButton"
            Grid.Row="0"
            Grid.Column="0"
            Width="100"
            Margin="5"
            HorizontalAlignment="Right"
            Background="#69c0ff"
            Click="myButton_Click"
            Foreground="#1890ff">
            匹配
        </Button>
        <TextBlock
            Grid.Row="1"
            Grid.Column="1"
            Margin="5"
            Text="匹配结果" />
        <TextBox
            Name="tbDestination"
            Grid.Row="2"
            Grid.Column="1"
            MinHeight="400"
            Margin="5"
            HorizontalAlignment="Stretch"
            BorderBrush="#69c0ff"
            BorderThickness="1"
            ScrollViewer.VerticalScrollBarVisibility="Auto"
            TextWrapping="Wrap" />
        <ComboBox
            Name="cbHistory"
            Grid.Row="0"
            Grid.Column="1"
            Width="400"
            Margin="5"
            SelectionChanged="cbHistory_SelectionChanged" />
        <TextBlock
            Grid.Row="0"
            Grid.Column="1"
            Width="100"
            Margin="5"
            HorizontalAlignment="Right"
            VerticalAlignment="Center"
            Text="历史Pattern记录" />
    </Grid>
</Window>

两个个文本框第一个输入pattern 下面输入原文本 右边 一个combobox作为历史记录 再来一个输出文本框

然后给按钮写事件实现

正则很简单，一个函数就搞定

private void myButton_Click(object sender, RoutedEventArgs e)
        {
            string input = tbSource.Text;
            string pattern = tbPattern.Text;
            string result = "";

            hislist.Add(pattern);
            if (hislist.Count > 10)
                hislist.RemoveAt(0);

            foreach (Match match in Regex.Matches(input, pattern))
                result += match.Value + "\n\n";
            tbDestination.Text = result;
        }

历史记录那 跟combobox做个绑定

public MainWindow()
        {
            this.InitializeComponent();
            Title = "Regex Zoo";
            cbHistory.ItemsSource = hislist;
        }
private void cbHistory_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            tbPattern.Text = (sender as ComboBox).SelectedValue.ToString();
        }

历史的选择事件 实现可以把搜过的赋值回到pattern框里 

大功告成

现在还不太成熟 xaml熟的人可以先开发着 稍微难受一点

效果图