基础概念 #
XAML 基础 #
什么是 XAML？ #
XAML (eXtensible Application Markup Language) 是一种声明式标记语言，用于定义 Xamarin.Forms 应用的用户界面。
text
┌─────────────────────────────────────────────────────────────┐
│ XAML 结构 │
├─────────────────────────────────────────────────────────────┤
│ │
│ XAML 文件结构： │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ <?xml version="1.0" encoding="utf-8" ?> │ │
│ │ │ │
│ │ <ContentPage xmlns="..." │ │
│ │ xmlns:x="..." │ │
│ │ x:Class="App.MainPage"> │ │
│ │ │ │
│ │ <!-- UI 元素 --> │ │
│ │ │ │
│ │ </ContentPage> │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 对应的 C# 代码文件 (.xaml.cs)： │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ public partial class MainPage : ContentPage │ │
│ │ { │ │
│ │ public MainPage() │ │
│ │ { │ │
│ │ InitializeComponent(); │ │
│ │ } │ │
│ │ } │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
XAML 语法基础 #
xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainPage"
Title="主页">
<StackLayout Padding="20">
<Label Text="Hello, Xamarin!"
FontSize="18"
TextColor="Black"
HorizontalOptions="Center" />
<Entry Placeholder="请输入内容"
Text="{Binding InputText}" />
<Button Text="点击我"
Command="{Binding SubmitCommand}"
HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
XAML 命名空间 #
text
┌─────────────────────────────────────────────────────────────┐
│ XAML 命名空间 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 默认命名空间： │
│ xmlns="http://xamarin.com/schemas/2014/forms" │
│ → Xamarin.Forms 控件和类型 │
│ │
│ XAML 命名空间： │
│ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" │
│ → XAML 语言特性 (x:Class, x:Name, x:Type 等) │
│ │
│ 自定义命名空间： │
│ xmlns:local="clr-namespace:MyApp" │
│ → 引用项目中的本地类型 │
│ │
│ 第三方库命名空间： │
│ xmlns:vm="clr-namespace:MyApp.ViewModels" │
│ xmlns:conv="clr-namespace:MyApp.Converters" │
│ │
└─────────────────────────────────────────────────────────────┘
x:Name 和 x:Class #
xml
<ContentPage x:Class="MyApp.MainPage">
<StackLayout>
<Label x:Name="myLabel"
Text="Hello" />
<Button x:Name="myButton"
Text="Click"
Clicked="OnButtonClicked" />
</StackLayout>
</ContentPage>
csharp
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void OnButtonClicked(object sender, EventArgs e)
{
myLabel.Text = "Button Clicked!";
myButton.Text = "Clicked";
}
}
页面类型 #
ContentPage #
text
┌─────────────────────────────────────────────────────────────┐
│ ContentPage │
├─────────────────────────────────────────────────────────────┤
│ │
│ 用途：显示单一内容的页面 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 标题栏 │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ │ │
│ │ 单一内容区域 │ │
│ │ (Content 属性) │ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
xml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.HomePage"
Title="首页">
<StackLayout>
<Label Text="欢迎使用 Xamarin.Forms" />
<Button Text="开始" />
</StackLayout>
</ContentPage>
NavigationPage #
text
┌─────────────────────────────────────────────────────────────┐
│ NavigationPage │
├─────────────────────────────────────────────────────────────┤
│ │
│ 用途：提供导航栏和页面堆栈管理 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ← 返回 页面标题 操作按钮 │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ 当前页面内容 │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 导航堆栈： │
│ [页面1] → [页面2] → [页面3] (当前) │
│ │
└─────────────────────────────────────────────────────────────┘
csharp
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new HomePage())
{
BarBackgroundColor = Color.FromHex("#2196F3"),
BarTextColor = Color.White
};
}
// 导航方法
await Navigation.PushAsync(new DetailPage());
await Navigation.PopAsync();
await Navigation.PopToRootAsync();
TabbedPage #
text
┌─────────────────────────────────────────────────────────────┐
│ TabbedPage │
├─────────────────────────────────────────────────────────────┤
│ │
│ 用途：底部标签栏导航 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 当前标签内容 │ │
│ │ │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ 🏠 首页 │ 📋 列表 │ ⚙️ 设置 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
xml
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainTabbedPage">
<ContentPage Title="首页" IconImageSource="home.png">
<Label Text="首页内容" />
</ContentPage>
<ContentPage Title="列表" IconImageSource="list.png">
<Label Text="列表内容" />
</ContentPage>
<ContentPage Title="设置" IconImageSource="settings.png">
<Label Text="设置内容" />
</ContentPage>
</TabbedPage>
CarouselPage #
text
┌─────────────────────────────────────────────────────────────┐
│ CarouselPage │
├─────────────────────────────────────────────────────────────┤
│ │
│ 用途：左右滑动切换页面 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ │ │ │ │
│ │ 页面1 │ 页面2 (当前) │ 页面3 │ │
│ │ │ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ○──────●──────○ │
│ 指示器 │
│ │
└─────────────────────────────────────────────────────────────┘
xml
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.WalkthroughPage">
<ContentPage>
<StackLayout>
<Label Text="欢迎" FontSize="30" />
<Label Text="第一步介绍" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="功能" FontSize="30" />
<Label Text="第二步介绍" />
</StackLayout>
</ContentPage>
</CarouselPage>
FlyoutPage (MasterDetailPage) #
text
┌─────────────────────────────────────────────────────────────┐
│ FlyoutPage │
├─────────────────────────────────────────────────────────────┤
│ │
│ 用途：侧滑菜单导航 │
│ │
│ 展开状态： │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 菜单 │ │ │
│ │─────────│ │ │
│ │ 首页 │ 详情页面 │ │
│ │ 设置 │ │ │
│ │ 关于 │ │ │
│ │ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 收起状态： │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ☰ 标题 │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ 详情页面 │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
xml
<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainFlyoutPage">
<FlyoutPage.Flyout>
<ContentPage Title="菜单">
<StackLayout>
<Button Text="首页" Clicked="OnHomeClicked" />
<Button Text="设置" Clicked="OnSettingsClicked" />
</StackLayout>
</ContentPage>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<ContentPage Title="首页">
<Label Text="首页内容" />
</ContentPage>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
</FlyoutPage>
布局控件 #
StackLayout #
text
┌─────────────────────────────────────────────────────────────┐
│ StackLayout │
├─────────────────────────────────────────────────────────────┤
│ │
│ 用途：水平或垂直排列子元素 │
│ │
│ Vertical (默认)： Horizontal： │
│ ┌─────────────┐ ┌───────────────────────────┐ │
│ │ ┌───────┐ │ │ ┌───┐┌───┐┌───┐┌───┐ │ │
│ │ │ Item1 │ │ │ │ 1 ││ 2 ││ 3 ││ 4 │ │ │
│ │ └───────┘ │ │ └───┘└───┘└───┘└───┘ │ │
│ │ ┌───────┐ │ └───────────────────────────┘ │
│ │ │ Item2 │ │ │
│ │ └───────┘ │ │
│ │ ┌───────┐ │ │
│ │ │ Item3 │ │ │
│ │ └───────┘ │ │
│ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
xml
<StackLayout Orientation="Vertical"
Spacing="10"
Padding="20">
<Label Text="标题" FontSize="24" />
<Label Text="副标题" FontSize="18" />
<Entry Placeholder="输入内容" />
<Button Text="提交" />
</StackLayout>
Grid #
text
┌─────────────────────────────────────────────────────────────┐
│ Grid │
├─────────────────────────────────────────────────────────────┤
│ │
│ 用途：表格布局，灵活控制行列 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ │ 列0 │ 列1 │ 列2 │ │
│ │──────────┼────────────┼────────────┼────────────┤ │
│ │ 行0 │ (0,0) │ (0,1) │ (0,2) │ │
│ │──────────┼────────────┼────────────┼────────────┤ │
│ │ 行1 │ (1,0) │ (1,1) │ (1,2) │ │
│ │──────────┼────────────┼────────────┼────────────┤ │
│ │ 行2 │ (2,0) │ (2,1) │ (2,2) │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
xml
<Grid RowDefinitions="Auto, *, Auto"
ColumnDefinitions="*, *"
RowSpacing="10"
ColumnSpacing="10">
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Text="标题" FontSize="24" HorizontalOptions="Center" />
<Entry Grid.Row="1" Grid.Column="0"
Placeholder="用户名" />
<Entry Grid.Row="1" Grid.Column="1"
Placeholder="密码" IsPassword="True" />
<Button Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
Text="登录" />
</Grid>
FlexLayout #
text
┌─────────────────────────────────────────────────────────────┐
│ FlexLayout │
├─────────────────────────────────────────────────────────────┤
│ │
│ 用途：类似 CSS Flexbox 的弹性布局 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │
│ │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ 5 │ │ │
│ │ └───┘ └───┘ └───┘ └───┘ └───┘ │ │
│ │ │ │
│ │ ┌───┐ ┌───┐ ┌───┐ │ │
│ │ │ 6 │ │ 7 │ │ 8 │ (自动换行) │ │
│ │ └───┘ └───┘ └───┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
xml
<FlexLayout Direction="Row"
Wrap="Wrap"
JustifyContent="SpaceEvenly"
AlignItems="Center">
<Frame WidthRequest="80" HeightRequest="80" BackgroundColor="Red" />
<Frame WidthRequest="80" HeightRequest="80" BackgroundColor="Green" />
<Frame WidthRequest="80" HeightRequest="80" BackgroundColor="Blue" />
<Frame WidthRequest="80" HeightRequest="80" BackgroundColor="Yellow" />
</FlexLayout>
AbsoluteLayout #
text
┌─────────────────────────────────────────────────────────────┐
│ AbsoluteLayout │
├─────────────────────────────────────────────────────────────┤
│ │
│ 用途：绝对定位布局 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌──────────┐ │ │
│ │ │ (0,0) │ │ │
│ │ └──────────┘ │ │
│ │ │ │
│ │ ┌──────────┐ │ │
│ │ │ (200,150)│ │ │
│ │ └──────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ 底部横幅 (比例定位) │ │ │
│ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
xml
<AbsoluteLayout>
<BoxView Color="LightBlue"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All" />
<Label Text="标题"
AbsoluteLayout.LayoutBounds="20,20,200,50"
AbsoluteLayout.LayoutFlags="None" />
<Button Text="底部按钮"
AbsoluteLayout.LayoutBounds="0.5,1,200,50"
AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
RelativeLayout #
xml
<RelativeLayout>
<BoxView x:Name="redBox"
Color="Red"
WidthRequest="100"
HeightRequest="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=20}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=20}" />
<BoxView Color="Blue"
WidthRequest="100"
HeightRequest="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=redBox, Property=X, Constant=120}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=redBox, Property=Y, Constant=0}" />
</RelativeLayout>
ScrollView #
xml
<ScrollView Orientation="Vertical">
<StackLayout Padding="20">
<Label Text="很长的内容..." />
<Label Text="更多内容..." />
<Label Text="继续滚动..." />
</StackLayout>
</ScrollView>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Horizontal">
<Frame WidthRequest="150" HeightRequest="100" BackgroundColor="Red" />
<Frame WidthRequest="150" HeightRequest="100" BackgroundColor="Green" />
<Frame WidthRequest="150" HeightRequest="100" BackgroundColor="Blue" />
</StackLayout>
</ScrollView>
常用控件 #
Label #
xml
<Label Text="Hello, Xamarin.Forms!"
FontSize="18"
FontAttributes="Bold"
TextColor="Black"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
LineBreakMode="WordWrap"
MaxLines="2" />
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="普通文本 " TextColor="Black" />
<Span Text="粗体文本 " FontAttributes="Bold" TextColor="Blue" />
<Span Text="斜体文本" FontAttributes="Italic" TextColor="Red" />
</FormattedString>
</Label.FormattedText>
</Label>
Entry #
xml
<Entry Placeholder="请输入用户名"
Text="{Binding Username}"
Keyboard="Text"
MaxLength="20"
IsSpellCheckEnabled="True"
IsTextPredictionEnabled="True" />
<Entry Placeholder="请输入密码"
Text="{Binding Password}"
IsPassword="True"
ReturnType="Done"
ReturnCommand="{Binding LoginCommand}" />
Editor #
xml
<Editor Placeholder="请输入详细描述..."
Text="{Binding Description}"
AutoSize="TextChanges"
MaxLength="500"
HeightRequest="150" />
Button #
xml
<Button Text="点击我"
Command="{Binding SubmitCommand}"
BackgroundColor="#2196F3"
TextColor="White"
CornerRadius="8"
FontSize="16"
FontAttributes="Bold"
BorderWidth="0"
Padding="20,10" />
<Button ImageSource="icon.png"
Text="带图标按钮"
ContentLayout="Left, 10" />
Image #
xml
<Image Source="logo.png"
Aspect="AspectFit"
WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center" />
<Image Source="https://example.com/image.png"
Aspect="AspectFill" />
<Image>
<Image.Source>
<UriImageSource Uri="https://example.com/image.png"
CacheValidity="14"
CachingEnabled="True" />
</Image.Source>
</Image>
Frame #
xml
<Frame BackgroundColor="White"
BorderColor="LightGray"
CornerRadius="10"
HasShadow="True"
Padding="15">
<StackLayout>
<Label Text="卡片标题" FontSize="18" FontAttributes="Bold" />
<Label Text="卡片内容描述" TextColor="Gray" />
</StackLayout>
</Frame>
ListView #
xml
<ListView ItemsSource="{Binding Items}"
SelectedItem="{Binding SelectedItem}"
HasUnevenRows="True"
SeparatorVisibility="Default"
IsPullToRefreshEnabled="True"
RefreshCommand="{Binding RefreshCommand}"
IsRefreshing="{Binding IsRefreshing}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15">
<Label Text="{Binding Title}" FontSize="16" FontAttributes="Bold" />
<Label Text="{Binding Subtitle}" TextColor="Gray" FontSize="12" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
CollectionView #
xml
<CollectionView ItemsSource="{Binding Items}"
SelectedItem="{Binding SelectedItem}"
SelectionMode="Single"
ItemsLayout="VerticalList"
EmptyView="暂无数据">
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame Padding="10" Margin="5" CornerRadius="8">
<StackLayout>
<Label Text="{Binding Title}" FontSize="16" />
<Label Text="{Binding Description}" TextColor="Gray" />
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Picker #
xml
<Picker Title="选择城市"
ItemsSource="{Binding Cities}"
SelectedItem="{Binding SelectedCity}"
TitleColor="Gray" />
DatePicker / TimePicker #
xml
<DatePicker Date="{Binding SelectedDate}"
Format="yyyy-MM-dd"
MinimumDate="2020-01-01"
MaximumDate="2030-12-31" />
<TimePicker Time="{Binding SelectedTime}"
Format="HH:mm" />
Switch / CheckBox #
xml
<Switch IsToggled="{Binding IsEnabled}"
OnColor="Green"
ThumbColor="White" />
<CheckBox IsChecked="{Binding IsAccepted}"
Color="#2196F3" />
Slider / Stepper #
xml
<Slider Minimum="0"
Maximum="100"
Value="{Binding Volume}"
ThumbColor="#2196F3"
MinimumTrackColor="#2196F3"
MaximumTrackColor="LightGray" />
<Stepper Minimum="0"
Maximum="100"
Value="{Binding Count}"
Increment="1" />
ActivityIndicator #
xml
<ActivityIndicator IsRunning="{Binding IsLoading}"
Color="#2196F3"
WidthRequest="50"
HeightRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center" />
布局选项 #
LayoutOptions #
text
┌─────────────────────────────────────────────────────────────┐
│ LayoutOptions │
├─────────────────────────────────────────────────────────────┤
│ │
│ HorizontalOptions / VerticalOptions │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Start - 左/上对齐 │ │
│ │ Center - 居中对齐 │ │
│ │ End - 右/下对齐 │ │
│ │ Fill - 填充整个空间 │ │
│ │ │ │
│ │ StartAndExpand - 对齐并扩展 │ │
│ │ CenterAndExpand - 居中并扩展 │ │
│ │ EndAndExpand - 对齐并扩展 │ │
│ │ FillAndExpand - 填充并扩展 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 示例： │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ┌──┐ │ │
│ │ │S │ Start │ │
│ │ └──┘ │ │
│ │ ┌──┐ │ │
│ │ │C │ Center │ │
│ │ └──┘ │ │
│ │ ┌──┐ │ │
│ │ │E │ End │ │
│ │ └──┘ │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ Fill │ │ │
│ │ └──────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
xml
<StackLayout>
<Label Text="Start" HorizontalOptions="Start" BackgroundColor="LightBlue" />
<Label Text="Center" HorizontalOptions="Center" BackgroundColor="LightGreen" />
<Label Text="End" HorizontalOptions="End" BackgroundColor="LightCoral" />
<Label Text="Fill" HorizontalOptions="Fill" BackgroundColor="LightYellow" />
</StackLayout>
下一步 #
现在你已经了解了 Xamarin.Forms 的基础概念，接下来学习 导航系统，掌握页面之间的导航方式！
最后更新：2026-03-29