普通的阿瓦隆

有时我们不了解所组成的正则表达式如何工作并想要检查。 有很多应用程序,例如regex101.com或vs代码。 我想在此列表中再添加一个。

在本文中,我们将看到如何将Regex包装在跨平台图形中,并创建一个用于测试正则表达式的简单应用程序。



开始


要使用avalonia ui创建项目,您需要从GitHub安装模板。
并从mvvm模板创建一个项目。

dotnet new avalonia.mvvm -o MyApp 

设计与布局


要创建主窗口,请将所有组件放置在网格内。

  <Grid> <Grid.RowDefinitions> <RowDefinition Height = "5" /> <RowDefinition Height = "Auto" /> <RowDefinition Height = "5" /> <RowDefinition Height = "*" /> <RowDefinition Height = "5" /> </Grid.RowDefinitions> </Grid> 

我们的应用程序包括两部分:工具栏和工作区的上层模拟。



考虑顶部


在这里,我们有一个用于正则表达式的字段,一个复选框,显示如何分析文本(逐行或整个片段)以及一个帮助按钮。

我们使用Dock面板作为容器。 此控件使您可以轻松地将元素填充到容器中,将元素按到不同的侧面,并确保内部没有可用空间。

  <DockPanel Grid.Row = "1"> 

并在其中输入文本:

  <TextBox Margin = "5, 0, 5, 0" Watermark = "Your regexp" AcceptsReturn = "False" Text = "{Binding RegText}" /> 

这里值得一提的是Avalonia ui令人不愉快的事情-文本字段中存在水印。

向面板添加一个具有2种状态的复选框,如IsThreeState =“ False”所示

  <CheckBox DockPanel.Dock = "Right" Content = "By row" IsThreeState = "False" IsChecked = "{Binding IsChecked}" ToolTip.Tip = "Check for each row" /> 

和负责调用帮助的按钮:

  <Button DockPanel.Dock = "Right" Content = "?" Margin = "5, 0, 5, 0" ToolTip.Tip = "Show hints" Command = "{Binding ShowHelp}" / > 

身材

主要部分将放置在网格中:

  <Grid Grid.Row = "3"> <Grid.ColumnDefinitions> <ColumnDefinition Width = "*" /> <ColumnDefinition Width = "Auto" /> <ColumnDefinition Width = "0.75 *" /> </Grid.ColumnDefinitions> </Grid> 

输入字段由文本框表示:

  <TextBox Grid.Column = "0" AcceptsReturn = "True" ScrollViewer.VerticalScrollBarVisibility = "Auto" Text = "{Binding InputText}" /> 

拆分器使您可以根据需要选择方便的可视化文件:

  <GridSplitter Grid.Column = "1" /> 

由于文本块没有自己的框架,因此负责显示应用正则表达式结果的字段将放在边框中:

  <Border BorderBrush = "Gray" BorderThickness = "1" Grid.Column = "2"> <TextBlock ScrollViewer.VerticalScrollBarVisibility = "Auto" Text = "{Binding OutputText}" /> </Border> 

帮助窗口



要创建一个新窗口,我们转到终端

  dotnet new avalonia.window -na MyApp -n MyNewWindow 

该窗口将仅包含信息,而仅包含其他信息,因此,忽略容器,使列表框成为该窗口的子窗口:

  <ListBox ScrollViewer.VerticalScrollBarVisibility = "Visible" VirtualizationMode = "None"> </ListBox> 

并根据需要添加相同的元素:

  <ListBoxItem> <StackPanel Orientation = "Horizontal"> <TextBlock Margin = "5" Text = "A single character of: a, b or c" /> <TextBlock Margin = "5" Classes = "green" Text = "[abc]" /> </StackPanel> </ListBoxItem> 

布局非常简单:具有2个字段的堆栈面板,这里唯一值得一提的是Classes属性,它使我们能够像css一样风格化窗口(Avalonia的另一个不错的功能)。

然后将规则本身涂成绿色:

  <Window.Styles> <Style Selector = "TextBlock.green"> <Setter Property = "Foreground" Value = "Green" /> </Style> </Window.Styles> 

MVVM功能


首先,让我们关注所有标记元素的字段:
  private bool _isChecked; private string _inputText; private string _regText; private string _outputText; 

让我们创建将返回与原始文本匹配结果的方法:

  private void SetNoRowResult () { OutputText = string.Join (Environment.NewLine, new Regex (_regText) .Matches (_inputText)); } 

并沿着源代码行,我们使用Split
  private void SetRowResult () { var r = new Regex (_regText); var s = string.Empty; foreach (var line in _inputText.Split (Environment.NewLine, StringSplitOptions.RemoveEmptyEntries)) { s + = $ "- {Environment.NewLine}"; s + = string.Join (Environment.NewLine, r.Matches (line)); s + = $ "{Environment.NewLine} - {Environment.NewLine}"; } OutputText = s; } 

并添加显示帮助窗口的方法

  public void ShowHelp () { new HelpWindow (). Show (); } 

属性和绑定

Avalonia一个有趣的功能是能够将方法直接附加到按钮:

  <Button Command = "{Binding ShowHelp}" /> 

我们将使用。

对于其他字段,我们仅绑定到属性。 这里一个有趣的功能是在avalonia中,控件的内容更改时会发生绑定更新,这是在wpf中完成的:avalonia中的UpdateSourceTrigger = PropertyChanged默认情况下有效。

而且由于Avalonia mvvm模板包含在Reactive UI中,因此可以使用以下库创建属性:

  public string RegText { get => _regText; set { this.RaiseAndSetIfChanged (ref _regText, value); if (_isChecked) SetRowResult (); else SetNoRowResult (); } } 

总结

我希望这篇文章不仅对那些想要使用我的材料和/或以某种方式进行改进的人感兴趣,而且对所有熟悉Avalonia或正在寻找在C#中创建跨平台应用程序的人们都感兴趣。

源代码( 此处 )。

我想说谢谢Forkeve Kekekeks worldbeater

Source: https://habr.com/ru/post/zh-CN470101/


All Articles