Visual Studio 2022实战：5分钟用.NET MAUI搞定跨平台天气App（附迁移Xamarin技巧）

Visual Studio 2022实战：5分钟用.NET MAUI搞定跨平台天气App（附迁移Xamarin技巧）

如果你是一位Xamarin开发者，最近打开Visual Studio时可能已经注意到，官方对Xamarin的支持已于2024年5月1日正式结束。这听起来像是个坏消息，但实际上，微软为你准备了一份更强大的礼物——.NET MAUI。作为Xamarin.Forms的进化版本，.NET MAUI不仅继承了Xamarin的跨平台基因，更在项目结构、性能和开发体验上带来了质的飞跃。

今天，我们不谈枯燥的理论，直接动手。我将带你用Visual Studio 2022，在短短5分钟内创建一个能在Android、iOS、macOS和Windows上运行的天气应用。更重要的是，我会穿插那些从Xamarin迁移过来时你真正关心的细节：项目结构到底变了什么？原来的XAML代码还能用吗？平台兼容性问题怎么解决？这些实战经验，都是我在实际项目中踩过坑后总结出来的。

1. 环境准备与项目创建：从Xamarin到MAUI的第一印象

在开始编码之前，我们需要确保开发环境就绪。如果你之前使用Xamarin，好消息是大部分工具链都是现成的。不过，.NET MAUI需要Visual Studio 2022 17.3或更高版本。打开Visual Studio安装程序，在“工作负载”选项卡中，确认勾选了“.NET Multi-platform App UI开发”这一项。这与之前安装Xamarin工作负载的位置类似，但现在是独立的选项。

安装完成后，启动Visual Studio 2022，点击“创建新项目”。在搜索框中输入“MAUI”，你会看到“.NET MAUI应用”模板。这里有个关键变化：Xamarin时代，你需要为每个平台（Android、iOS等）创建单独的项目，然后共享一个类库。而.NET MAUI采用了单一项目模型——所有平台的代码都在一个项目里管理。这对长期维护来说是个巨大的简化。

选择模板后，给项目起个名字，比如“QuickWeather”。创建过程中，你会注意到项目文件（.csproj）的结构与Xamarin.Forms项目有明显不同。让我们先看看这个关键文件：

<Project Sdk=\”Microsoft.NET.Sdk\”>
<PropertyGroup>
<TargetFrameworks>net8.0-android;net8.0-ios;net8.0-maccatalyst</TargetFrameworks>
<TargetFrameworks Condition=\”$([MSBuild]::IsOSPlatform(\’windows\’))\”>
$(TargetFrameworks);net8.0-windows10.0.19041.0
</TargetFrameworks>
<OutputType>Exe</OutputType>
<UseMaui>true</UseMaui>
<SingleProject>true</SingleProject>
</PropertyGroup>
</Project>

注意：如果你是从Xamarin迁移过来的，TargetFrameworks这个复数形式很重要。它意味着同一个项目文件同时面向多个目标框架。SingleProject属性设置为true，这正是单一项目模型的标志。

项目创建完成后，花点时间浏览一下解决方案资源管理器。你会看到几个关键文件夹：

• Platforms：包含各平台的启动代码和特定配置
• Resources：图片、字体、样式等共享资源
• App.xaml：应用程序入口和全局资源
• MainPage.xaml：默认的主页面

这种结构与Xamarin.Forms最大的区别在于，所有平台特定的代码现在都组织在Platforms子文件夹下，而不是分散在多个项目中。对于迁移工作来说，这意味着你可以将原来各个平台项目中的代码逐步整合到这个统一的结构中。

2. 构建天气应用界面：XAML的继承与增强

现在让我们开始构建天气应用的核心界面。如果你熟悉Xamarin.Forms的XAML，那么好消息是：.NET MAUI的XAML语法高度兼容。大多数控件和属性都能直接使用，只有少数命名空间和细微行为有所调整。

打开MainPage.xaml，将默认内容替换为我们的天气界面。我将采用Grid布局，这是跨平台UI中非常实用的布局容器：

<ContentPage xmlns=\”http://schemas.microsoft.com/dotnet/2022/maui\”
xmlns:x=\”http://schemas.microsoft.com/winfx/2009/xaml\”
x:Class=\”QuickWeather.MainPage\”
Title=\”快速天气\”>

<ScrollView>
<Grid RowDefinitions=\”Auto, Auto, *, Auto\”
ColumnDefinitions=\”*, *\”
Padding=\”20\”
RowSpacing=\”15\”
ColumnSpacing=\”10\”>

<!– 城市选择区域 –>
<HorizontalStackLayout Grid.Row=\”0\” Grid.ColumnSpan=\”2\”>
<Entry x:Name=\”CityEntry\”
Placeholder=\”输入城市名称\”
WidthRequest=\”200\”
HorizontalOptions=\”Start\”/>
<Button Text=\”查询\”
Clicked=\”OnSearchClicked\”
Margin=\”10,0,0,0\”/>
</HorizontalStackLayout>

<!– 当前天气概览 –>
<Frame Grid.Row=\”1\” Grid.ColumnSpan=\”2\”
BackgroundColor=\”#2196F3\”
Padding=\”20\”
CornerRadius=\”15\”>
<VerticalStackLayout Spacing=\”10\”>
<Label x:Name=\”CityLabel\”
Text=\”北京市\”
FontSize=\”24\”
TextColor=\”White\”
HorizontalOptions=\”Center\”/>

<Label x:Name=\”TemperatureLabel\”
Text=\”25°C\”
FontSize=\”48\”
TextColor=\”White\”
HorizontalOptions=\”Center\”/>

<Label x:Name=\”ConditionLabel\”
Text=\”晴朗\”
FontSize=\”18\”
TextColor=\”White\”
HorizontalOptions=\”Center\”/>
</VerticalStackLayout>
</Frame>

<!– 天气详情网格 –>
<Grid x:Name=\”DetailsGrid\”
Grid.Row=\”2\” Grid.ColumnSpan=\”2\”
RowDefinitions=\”Auto, Auto, Auto\”
ColumnDefinitions=\”*, *\”
RowSpacing=\”10\”
ColumnSpacing=\”10\”>
<!– 详情项将通过代码动态添加 –>
</Grid>

<!– 刷新按钮 –>
<Button Grid.Row=\”3\” Grid.Column=\”0\”
Text=\”刷新数据\”
Clicked=\”OnRefreshClicked\”/>

<!– 平台信息 –>
<Label Grid.Row=\”3\” Grid.Column=\”1\”
x:Name=\”PlatformLabel\”
HorizontalOptions=\”End\”
VerticalOptions=\”Center\”/>
</Grid>
</ScrollView>
</ContentPage>

这段XAML代码有几个值得注意的地方：