Uno Platform入门教程：使用C Markup和MVVM模式开发计数器应用-优快云博客

Uno Platform入门教程：使用C# Markup和MVVM模式开发计数器应用

前言

Uno Platform是一个强大的跨平台开发框架，它允许开发者使用单一代码库构建可在Windows、Android、iOS、macOS和WebAssembly等多个平台上运行的应用程序。本教程将带您从零开始，使用C# Markup和MVVM(Model-View-ViewModel)模式开发一个简单的计数器应用。

环境准备

在开始之前，请确保您已安装以下工具：

Visual Studio 2022（推荐版本）
.NET 6或更高版本
Uno Platform扩展（通过Visual Studio扩展管理器安装）

创建项目

使用Visual Studio创建项目

打开Visual Studio，选择"创建新项目"
在搜索框中输入"Uno Platform"
选择"Uno Platform App"模板，点击"下一步"
将项目命名为"Counter"，点击"创建"

在Uno Platform模板向导中，我们需要进行以下配置：

选择"Blank"模板
在"Presentation"标签页中选择"MVVM"模式
在"Markup"标签页中选择"C# Markup"
点击"创建"完成项目生成

使用命令行创建项目

如果您更喜欢使用命令行，可以运行以下命令：

dotnet new unoapp -preset blank -presentation mvvm -markup csharp -o Counter

项目结构解析

项目创建完成后，您会看到解决方案中包含多个项目：

Counter：主项目，包含共享的应用逻辑和UI
多个平台特定项目（如Counter.Wasm、Counter.Android等）

这种结构是Uno Platform的典型组织方式，允许我们在一个解决方案中管理所有平台的代码。

构建计数器应用

理解MainPage.cs

打开MainPage.cs文件，这是应用的主页面。我们将在这里构建计数器应用的UI。

添加基本布局

我们使用StackPanel作为容器来组织UI元素：

new StackPanel()
    .VerticalAlignment(VerticalAlignment.Center)
    .Children(
        // UI元素将在这里添加
    )

添加应用图标

在StackPanel中添加一个Image控件来显示应用图标：

new Image()
    .Margin(12)
    .HorizontalAlignment(HorizontalAlignment.Center)
    .Width(150)
    .Height(150)
    .Source("ms-appx:///Counter/Assets/logo.png")

添加计数器显示

添加TextBlock来显示当前计数：

new TextBlock()
    .Margin(12)
    .HorizontalAlignment(HorizontalAlignment.Center)
    .TextAlignment(TextAlignment.Center)
    .Text("Counter: 0")

添加步长输入框

添加TextBox让用户可以设置计数步长：

new TextBox()
    .Margin(12)
    .HorizontalAlignment(HorizontalAlignment.Center)
    .TextAlignment(TextAlignment.Center)
    .PlaceholderText("Step Size")

添加计数按钮

添加Button来触发计数操作：

new Button()
    .Margin(12)
    .HorizontalAlignment(HorizontalAlignment.Center)
    .Content("Increment Counter by Step Size")

实现MVVM模式

创建ViewModel

在项目中添加MainViewModel.cs文件，实现计数器逻辑：

public class MainViewModel
{
    public int Count { get; set; } = 0;
    public int Step { get; set; } = 1;
    
    public ICommand IncrementCommand { get; }
    
    public MainViewModel()
    {
        IncrementCommand = new RelayCommand(() => Count += Step);
    }
}

数据绑定

将UI与ViewModel绑定：

设置DataContext：

this.DataContext(new MainViewModel(), (page, vm) => page
    // 页面内容
);

绑定计数器显示：

new TextBlock()
    // 其他属性
    .Text(() => vm.Count, txt => $"Counter: {txt}")

绑定步长输入框：

new TextBox()
    // 其他属性
    .Text(x => x.Binding(() => vm.Step).TwoWay())

绑定按钮命令：

new Button()
    // 其他属性
    .Command(() => vm.IncrementCommand)

完整代码

以下是MainPage.cs的完整实现：

namespace Counter;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.DataContext(new MainViewModel(), (page, vm) => page
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content(
                new StackPanel()
                    .VerticalAlignment(VerticalAlignment.Center)
                    .Children(
                        new Image()
                            .Margin(12)
                            .HorizontalAlignment(HorizontalAlignment.Center)
                            .Width(150)
                            .Height(150)
                            .Source("ms-appx:///Counter/Assets/logo.png"),
                        new TextBox()
                            .Margin(12)
                            .HorizontalAlignment(HorizontalAlignment.Center)
                            .TextAlignment(TextAlignment.Center)
                            .PlaceholderText("Step Size")
                            .Text(x => x.Binding(() => vm.Step).TwoWay()),
                        new TextBlock()
                            .Margin(12)
                            .HorizontalAlignment(HorizontalAlignment.Center)
                            .TextAlignment(TextAlignment.Center)
                            .Text(() => vm.Count, txt => $"Counter: {txt}"),
                        new Button()
                            .Margin(12)
                            .HorizontalAlignment(HorizontalAlignment.Center)
                            .Command(() => vm.IncrementCommand)
                            .Content("Increment Counter by Step Size")
                    )
            )
        );
    }
}

运行应用

现在您可以：

选择目标平台（如Windows或Android）
点击运行按钮
测试计数器功能：
- 修改步长值
- 点击按钮增加计数

总结

通过本教程，您已经学会了：

如何创建Uno Platform项目
使用C# Markup构建UI
实现MVVM模式
使用数据绑定连接UI和业务逻辑

Uno Platform的C# Markup提供了一种类型安全、高效的方式来构建UI，而MVVM模式则帮助您更好地组织代码结构。这种组合特别适合需要跨多个平台运行的复杂应用程序。

您可以继续扩展这个应用，比如添加减少计数功能、保存计数状态等，来进一步熟悉Uno Platform的开发模式。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考