用Avalo niaUI构建远控界面

用过c#开发的应该都知道WPF框架，这是微软官方提供，专用于windows平台的UI框架，用起来确实舒服，做出来的界面也很漂亮，上手难度也低，但是不能跨平台有时确实蛋疼了点。而Avalonia可以说是WPF风格的开源跨平台UI框架，如果你有过WPF开发经验，Avalonia几乎可以直接上手。

（文章内容仅用于红队开发研究学习）

开发环境

开发包：.NET8 SDK。IDE：建议使用JetBrainRider开发AvaloniaUI程序，在这块的支持我个人认为体验要好于visualstudio。

项目结构

│  App.axaml│  App.axaml.cs│  app.manifest│  Program.cs│  RiderRat.csproj│  RiderRat.sln│├─Assets│      avalonia-logo.ico│├─Models│      AgentModel.cs│├─style│      Button.axaml│├─ViewModels│└─Views        MainWindow.axaml        MainWindow.axaml.cs

当你新建一个avalonia项目后，目录结构大概是像上面这样：

• app.axaml这个文件定义了整个项目的全局样式，引入全局资源。
• app.axaml.cs,则负责整个应用的启动逻辑，比如：设置和打开一个主窗口。
• Assets文件夹一般用来放置一些静态素材文件啥的，比如：图标图片
• Models文件夹可以用来存在在MVVM开发模式中的后端Model数据模型。
• Style文件夹这个默认没有的，是我自定义的，一般情况下，对控件引用样式，比如：给一个按钮设置背景色之类的，需要对应的样式文件，你可以把所需要的样式都放在类似的文件夹中，方便管理。
• ViewModels文件夹负责存放MVVM中和后端Models交互逻辑的代码文件。
• Views 文件夹就负责存放前端展示窗口文件了，默认会带一个主窗口，你也可以自己创建窗口。

窗口

<Windowxmlns="https://github.com/avaloniaui"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:model = "using:RiderRat.Models"xmlns:vm = "using:RiderRat.ViewModels"mc:Ignorable="d"Height="600"Width="1200"Icon="/Assets/avalonia-logo.ico"Title="RiderRat"></Window>

wpf与avalonia都可以通过这种类似html的标记语言，去定义UI控件，并且UI和后端数据进行了分离。默认创建的窗口都包含在一组<winbow></window>标签中，你可以里面添加各种控件，比如你想添加一个按钮控件，那么只需要加入一个<button></button>标签，然后在为它设置各种属性，比如宽高，背景色即可。

数据绑定

我这里模拟一下远控机器的上线数据，比如机器名，用户名，IP地址等：

publicclassAgentModel{publicstring HostName { get; set; }publicstring UserName { get; set; }publicstring ExIpAddress { get; set; }publicstring InIpAddress { get; set; }publicstring OSVersion { get; set; }publicstring CurrentWindow { get; set; }publicstring Last { get;set; }publicstring Group  { get; set; }}

如果我们要让这些信息在我们的远控UI界面中显示，可以使用一个叫DataGrid的数据格控件：

<DataGridForeground="Black"IsReadOnly="True"AutoGenerateColumns="False"HorizontalAlignment="Stretch"ColumnWidth="*"><DataGrid.DataContext><model:AgentModel></model:AgentModel></DataGrid.DataContext><DataGrid.Columns><DataGridTextColumnHeader="computer"Binding="{Binding HostName}"/><DataGridTextColumnHeader="user"Binding="{Binding UserName}" /><DataGridTextColumnHeader="external"Binding="{Binding ExIpAddress}"/><DataGridTextColumnHeader="ip"Binding="{Binding InIpAddress}" /><DataGridTextColumnHeader="os"Binding="{Binding OSVersion}"/><DataGridTextColumnHeader="window"Binding="{Binding CurrentWindow}" /><DataGridTextColumnHeader="last"Binding="{Binding Last}"/><DataGridTextColumnHeader="group"Binding="{Binding Group}" /></DataGrid.Columns></DataGrid></Grid>

这里我们绑定了DataGrid的DataContext为我们的AgentModel，同时我们通过DataGridTextColumn定义了datagrid每一列的标题，因为我们的数据是很多行包含了主机信息的一个列表，这里的Binding="{Binding HostName}"其实就是将该列的数据内容和我们模型中的HostName字段绑定，后续所有的HostName字段都会自动映并显示到该列。

这里我们模拟一些主机数据，实际过程中这里的数据可能是回传回来的，这里模拟一个列表：

        Agents = new List<AgentModel>();        Agents.Add(new AgentModel        {            ExIpAddress = "33.22.11.44",            InIpAddress = "192.168.8.2",            CurrentWindow = "Chrome",            Group = "group1",            HostName = "DESKTOP-H24ED2S",            Last = "323ms",            OSVersion = "windows10.19041",            UserName = "admin"        });        Agents.Add(new AgentModel        {            ExIpAddress = "103.23.121.14",            InIpAddress = "10.10.2.2",            CurrentWindow = "im chat window",            Group = "group1",            HostName = "DESKTOP-42RRD2S",            Last = "4ms",            OSVersion = "windows10.19041",            UserName = "user"        });

然后我们把整个列表作为数据源，绑定到我们的datagrid上

publicMainWindow()    {        InitializeComponent();var data = new AgentViewModels();this.DataContext = data;        Dispatcher.UIThread.Invoke(() =>        {this.AgentGrid.ItemsSource = data.Agents;          });    }