maui开发系列
入门到大师的完整记录
xaml 页面控件
通用属性（所有页面都可用）
| 属性名 | 说明 |
|---|---|
| AutomationId | 自动化测试标识 |
| StyleClass | 样式类 |
| Resources | 资源集合（样式、颜色等） |
| BindingContext | 数据上下文 |
| ToolbarItems | 工具栏按钮集合 |
| Visual | 视觉样式（如 Material） |
| FlowDirection | 布局方向（LTR/RTL） |
| IsBusy | 忙碌状态 |
| InputTransparent | 是否响应输入 |
| Opacity | 透明度 |
| IsEnabled | 是否可用 |
| IsVisible | 是否可见 |
| Margin | 外边距 |
| WidthRequest/HeightRequest | 宽高请求 |
| MinimumWidthRequest/MinimumHeightRequest | 最小宽高 |
| MaximumWidthRequest/MaximumHeightRequest | 最大宽高 |
| AnchorX/AnchorY | 锚点 |
| Rotation/RotationX/RotationY | 旋转 |
| Scale | 缩放 |
| TranslationX/TranslationY | 平移 |
ContentPage 所有常用属性及注释
<ContentPage
x:Class="Demo1.Pages.FullContentPage"
Title="页面标题" <!-- 页面标题 -->
BackgroundColor="AliceBlue" <!-- 页面背景色 -->
Padding="20,40,20,20" <!-- 页面内边距 -->
IconImageSource="icon.png" <!-- 页面图标（用于 TabbedPage/FlyoutPage/Shell） -->
FlowDirection="LeftToRight" <!-- 布局方向，支持国际化 -->
IsBusy="False" <!-- 是否显示忙碌指示器 -->
Visual="Material" <!-- 视觉风格，Material/Default -->
AutomationId="ContentPage1" <!-- 自动化测试ID -->
StyleClass="mainPage" <!-- 样式类 -->
Shell.TabBarIsVisible="True" <!-- Shell下：是否显示底部TabBar -->
Shell.NavBarIsVisible="True" <!-- Shell下：是否显示顶部导航栏 -->
Shell.BackgroundColor="LightGray" <!-- Shell下：页面背景色 -->
Shell.TitleColor="DarkBlue" <!-- Shell下：标题颜色 -->
Shell.DisabledColor="Gray" <!-- Shell下：禁用颜色 -->
Shell.TabBarBackgroundColor="White" <!-- Shell下：TabBar背景色 -->
Shell.TabBarTitleColor="Black" <!-- Shell下：TabBar标题颜色 -->
Shell.TabBarUnselectedColor="LightGray" <!-- Shell下：未选中Tab颜色 -->
Shell.TabBarForegroundColor="DodgerBlue" <!-- Shell下：TabBar前景色 -->
Shell.TabBarDisabledColor="Gray" <!-- Shell下：TabBar禁用色 -->
Shell.TabBarShadowColor="LightGray" <!-- Shell下：TabBar阴影色 -->
>
<StackLayout>
<Label Text="全部属性自定义示例" />
</StackLayout>
</ContentPage>FlyoutPage 所有常用属性及注释
<FlyoutPage
x:Class="Demo1.AppShell"
FlyoutLayoutBehavior="Split" <!-- 菜单行为：Split/Popover/Locked/Default -->
IsPresented="False" <!-- 菜单是否展开 -->
FlyoutIcon="menu.png" <!-- 菜单图标 -->
FlyoutBackgroundColor="LightGray" <!-- 菜单背景色 -->
FlyoutWidth="300" <!-- 菜单宽度 -->
>
<FlyoutPage.Flyout>
<ContentPage Title="菜单" IconImageSource="menu.png">
<StackLayout>
<Label Text="菜单头部" />
</StackLayout>
</ContentPage>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:MainPage />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
</FlyoutPage>
FlyoutHeader：菜单头部内容
FlyoutFooter：菜单底部内容NavigationPage 所有常用属性及注释
<NavigationPage
x:Class="Demo1.NavigationRoot"
BarBackgroundColor="DodgerBlue" <!-- 顶部导航栏背景色 -->
BarTextColor="White" <!-- 顶部导航栏文字颜色 -->
TitleIconImageSource="navicon.png" <!-- 标题栏图标 -->
Shell.NavBarIsVisible="True" <!-- Shell下：是否显示导航栏 -->
Shell.NavBarHasShadow="True" <!-- Shell下：导航栏是否有阴影 -->
Shell.NavBarBackgroundColor="LightBlue" <!-- Shell下：导航栏背景色 -->
Shell.NavBarTitleColor="DarkBlue" <!-- Shell下：导航栏标题颜色 -->
Shell.NavBarDisabledColor="Gray" <!-- Shell下：导航栏禁用色 -->
Shell.NavBarForegroundColor="DodgerBlue" <!-- Shell下：导航栏前景色 -->
Shell.NavBarShadowColor="LightGray" <!-- Shell下：导航栏阴影色 -->
>
<x:Arguments>
<local:MainPage />
</x:Arguments>
</NavigationPage>
HasNavigationBar（C# 设置）：是否显示导航栏TabbedPage 所有常用属性及注释
<TabbedPage
x:Class="Demo1.MainTabbedPage"
BarBackgroundColor="White" <!-- 选项卡栏背景色 -->
BarTextColor="Gray" <!-- 选项卡栏文字颜色 -->
SelectedTabColor="DodgerBlue" <!-- 选中标签颜色 -->
UnselectedTabColor="LightGray" <!-- 未选中标签颜色 -->
Shell.TabBarIsVisible="True" <!-- Shell下：是否显示TabBar -->
Shell.TabBarBackgroundColor="White" <!-- Shell下：TabBar背景色 -->
Shell.TabBarTitleColor="Black" <!-- Shell下：TabBar标题颜色 -->
Shell.TabBarUnselectedColor="LightGray" <!-- Shell下：未选中Tab颜色 -->
Shell.TabBarForegroundColor="DodgerBlue" <!-- Shell下：TabBar前景色 -->
Shell.TabBarDisabledColor="Gray" <!-- Shell下：TabBar禁用色 -->
Shell.TabBarShadowColor="LightGray" <!-- Shell下：TabBar阴影色 -->
>
<ContentPage Title="首页" IconImageSource="home.png" />
<ContentPage Title="发现" IconImageSource="discover.png" />
<ContentPage Title="我的" IconImageSource="user.png" />
</TabbedPage>
其它可用属性：
CurrentPage：当前选中页面（C# 访问）
每个子页面可自定义 Title、IconImageSourceShell 介绍及与页面的关系
Shell 是 .NET MAUI 推荐的导航和应用结构容器，支持 Flyout（侧边栏）、TabBar（底部标签）、Stack（分层导航）等多种页面结构组合。
Shell 与四大页面的关系
Shell 可以包含 FlyoutPage、TabbedPage、NavigationPage、ContentPage。
Shell 通过 <Shell> 标签定义导航结构，页面通过 Route 路由注册。
Shell 属性（如 Shell.TabBarIsVisible）只有在 Shell 结构下才生效。
Shell 支持 URI 路由导航、全局样式、统一导航栏/TabBar配置。
<Shell
x:Class="Demo1.AppShell"
BackgroundColor="White"
TitleColor="Black"
>
<!-- 侧边栏菜单 -->
<FlyoutItem Title="主菜单" Icon="menu.png">
<!-- TabBar结构 -->
<TabBar>
<Tab Title="首页" Icon="home.png">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</Tab>
<Tab Title="发现" Icon="discover.png">
<ShellContent ContentTemplate="{DataTemplate local:DiscoverPage}" />
</Tab>
<Tab Title="我的" Icon="user.png">
<ShellContent ContentTemplate="{DataTemplate local:ProfilePage}" />
</Tab>
</TabBar>
</FlyoutItem>
<!-- 其它页面 -->
<ShellContent Route="settings" ContentTemplate="{DataTemplate local:SettingsPage}" />
</Shell>要点：
Shell 可组合 Flyout（侧边栏）、TabBar（底部标签）、Stack（分层导航）。
Shell 支持全局样式和导航栏/TabBar统一配置。
页面可通过 Shell 属性自定义在 Shell 下的表现。
推荐新项目优先使用 Shell，结构更清晰、导航更强大。xaml 布局控件
StackLayout
| 属性名 | 说明 |
|---|---|
| Orientation | 布局方向（Vertical/Horizontal） |
| Spacing | 子元素间距 |
| Padding | 内边距 |
| Margin | 外边距 |
| HorizontalOptions | 水平对齐方式 |
| VerticalOptions | 垂直对齐方式 |
| BackgroundColor | 背景色 |
Grid
| 属性名 | 说明 |
|---|---|
| RowDefinitions | 行定义（高度） |
| ColumnDefinitions | 列定义（宽度） |
| Padding | 内边距 |
| Margin | 外边距 |
| RowSpacing | 行间距 |
| ColumnSpacing | 列间距 |
| BackgroundColor | 背景色 |
子元素特有属性：
Grid.Row：所在行
Grid.Column：所在列
Grid.RowSpan：跨行数
Grid.ColumnSpan：跨列数FlexLayout
| 属性名 | 说明 |
|---|---|
| Direction | 主轴方向（Row/Column） |
| Wrap | 是否换行（NoWrap/Wrap/Reverse） |
| JustifyContent | 主轴对齐方式 |
| AlignItems | 交叉轴对齐方式 |
| AlignContent | 多行对齐方式 |
| Padding | 内边距 |
| Margin | 外边距 |
| BackgroundColor | 背景色 |
子元素特有属性：
FlexLayout.Order：排序权重
FlexLayout.Grow：放大比例
FlexLayout.Shrink：缩小比例
FlexLayout.Basis：主轴初始大小
FlexLayout.AlignSelf：单独对齐方式AbsoluteLayout
| 属性名 | 说明 |
|---|---|
| Padding | 内边距 |
| Margin | 外边距 |
| BackgroundColor | 背景色 |
子元素特有属性：
AbsoluteLayout.LayoutBounds：位置和尺寸（如 "x, y, width, height"）
AbsoluteLayout.LayoutFlags：尺寸和位置的解释方式（All/None/WidthProportional/HeightProportional等）VerticalStackLayout / HorizontalStackLayout
性能更优的垂直/水平堆叠布局
| 属性名 | 说明 |
|---|---|
| Spacing | 子元素间距 |
| Padding | 内边距 |
| Margin | 外边距 |
| HorizontalOptions | 水平对齐方式 |
| VerticalOptions | 垂直对齐方式 |
| BackgroundColor | 背景色 |
ContentView
| 属性名 | 说明 |
|---|---|
| Content | 内部内容 |
| Padding | 内边距 |
| Margin | 外边距 |
| BackgroundColor | 背景色 |
通用布局属性
HorizontalOptions、VerticalOptions：对齐方式（Start、Center、End、Fill）
Margin、Padding：外边距、内边距
BackgroundColor：背景色
IsVisible、IsEnabled、Opacity：可见性、可用性、透明度
WidthRequest、HeightRequest：宽高请求
xaml 进阶控件
ScrollView
作用：让内容可滚动（支持垂直或水平滚动）。
常用属性：
Orientation：滚动方向（Vertical/Horizontal）Content：内部内容Padding、Margin、BackgroundColor
CollectionView
作用：高性能列表/网格布局，支持数据绑定、分组、选择等。
常用属性：
ItemsSource：数据源ItemTemplate：单元格模板ItemsLayout：布局方式（垂直列表、水平列表、网格）SelectionMode、SelectedItemHeader、Footer
CarouselView
作用：轮播图、滑动页面。
常用属性：
ItemsSource、ItemTemplateIsBounceEnabled、PeekAreaInsetsLoop、Position
Frame
作用：带圆角、阴影的内容容器，常用于卡片、面板。
常用属性：
CornerRadius：圆角半径HasShadow：是否有阴影BorderColor、BackgroundColorContent
Border（.NET MAUI 新增）
作用：为内容添加边框和圆角。
常用属性：
Stroke：边框颜色StrokeThickness：边框宽度StrokeShape：边框形状（圆角、椭圆等）Background、Content
ContentPresenter
作用：用于自定义控件模板时占位显示内容。
常用属性：
Content：要显示的内容
Expander
作用：可展开/收起的内容区域。
xaml 视图控件
1. Label
<Label
Text="文本内容" <!-- 显示文本 -->
TextColor="Red" <!-- 字体颜色 -->
FontSize="18" <!-- 字体大小 -->
FontAttributes="Bold,Italic" <!-- 字体样式：Bold/Italic/None -->
FontFamily="Microsoft YaHei" <!-- 字体名称 -->
HorizontalTextAlignment="Center"<!-- 水平对齐：Start/Center/End -->
VerticalTextAlignment="Center" <!-- 垂直对齐 -->
LineBreakMode="WordWrap" <!-- 换行模式 -->
MaxLines="2" <!-- 最大行数 -->
CharacterSpacing="2" <!-- 字符间距 -->
Padding="5" <!-- 内边距 -->
Margin="10" <!-- 外边距 -->
BackgroundColor="LightYellow" <!-- 背景色 -->
Opacity="0.8" <!-- 透明度 -->
IsVisible="True" <!-- 是否可见 -->
AutomationId="Label1" <!-- 自动化测试ID -->
x:Name="MyLabel" <!-- 控件名称 -->
TextDecorations="Underline,Strikethrough" <!-- 下划线/删除线 -->
/>2. Entry
<Entry
Text="{Binding UserName, Mode=TwoWay}" <!-- 输入内容，支持MVVM双向绑定 -->
Placeholder="请输入用户名" <!-- 占位符 -->
IsPassword="True" <!-- 是否密码框 -->
Keyboard="Email" <!-- 键盘类型：Default/Numeric/Email/Chat/Telephone/Url -->
MaxLength="20" <!-- 最大长度 -->
IsReadOnly="False" <!-- 是否只读 -->
TextColor="Black" <!-- 输入文字颜色 -->
FontSize="16" <!-- 字体大小 -->
FontFamily="Arial" <!-- 字体名称 -->
HorizontalTextAlignment="Start" <!-- 水平对齐 -->
VerticalTextAlignment="Center" <!-- 垂直对齐 -->
ClearButtonVisibility="WhileEditing" <!-- 清除按钮显示方式 -->
ReturnType="Done" <!-- 回车键类型 -->
ReturnCommand="{Binding DoneCommand}" <!-- 回车键命令 -->
CursorPosition="0" <!-- 光标位置 -->
SelectionLength="0" <!-- 选中文本长度 -->
Margin="10"
Padding="5"
BackgroundColor="White"
IsEnabled="True"
Opacity="1"
x:Name="MyEntry"
/>3. Editor
<Editor
Text="{Binding Description, Mode=TwoWay}" <!-- 多行文本内容 -->
Placeholder="请输入描述"
AutoSize="TextChanges" <!-- 自动高度调整：Disabled/TextChanges -->
IsReadOnly="False"
MaxLength="200"
TextColor="Gray"
FontSize="14"
FontFamily="Arial"
BackgroundColor="WhiteSmoke"
Margin="10"
Padding="5"
IsEnabled="True"
Opacity="1"
x:Name="MyEditor"
/>4. Button
<Button
Text="提交" <!-- 按钮文字 -->
Command="{Binding SubmitCommand}" <!-- MVVM命令 -->
CommandParameter="{Binding SomeValue}" <!-- 命令参数 -->
IsEnabled="True" <!-- 是否可用 -->
BackgroundColor="DodgerBlue" <!-- 背景色 -->
TextColor="White" <!-- 文字颜色 -->
FontSize="18"
FontAttributes="Bold"
CornerRadius="8" <!-- 圆角半径 -->
BorderColor="Gray" <!-- 边框颜色 -->
BorderWidth="2" <!-- 边框宽度 -->
ImageSource="icon.png" <!-- 按钮图标 -->
Padding="10"
Margin="10"
Opacity="1"
x:Name="MyButton"
/>5. Image
<Image
Source="dotnet_bot.png" <!-- 图片路径或URL -->
Aspect="AspectFill" <!-- 填充方式：AspectFit/AspectFill/Fill/Center -->
IsAnimationPlaying="True" <!-- GIF动画播放 -->
Opacity="0.9"
IsVisible="True"
HeightRequest="100"
WidthRequest="100"
Margin="5"
x:Name="MyImage"
/>6. CollectionView
<CollectionView
ItemsSource="{Binding Items}" <!-- 数据源 -->
ItemTemplate="{StaticResource MyTemplate}"<!-- 单元格模板 -->
ItemsLayout="VerticalList" <!-- 布局方式：VerticalList/HorizontalList/VerticalGrid/HorizontalGrid -->
SelectionMode="Single" <!-- 选择模式：None/Single/Multiple -->
SelectedItem="{Binding SelectedItem, Mode=TwoWay}" <!-- 选中项 -->
Header="列表头部"
Footer="列表底部"
IsGrouped="False"
EmptyView="暂无数据"
Margin="10"
x:Name="MyCollectionView"
/>7. Picker
<Picker
ItemsSource="{Binding Options}" <!-- 选项数据源 -->
SelectedItem="{Binding SelectedOption, Mode=TwoWay}" <!-- 选中项 -->
SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" <!-- 选中索引 -->
Title="请选择"
TextColor="Black"
FontSize="16"
Margin="10"
x:Name="MyPicker"
/>8. Switch
<Switch
IsToggled="{Binding IsEnabled, Mode=TwoWay}" <!-- 开关状态 -->
OnColor="Green" <!-- 打开时颜色 -->
ThumbColor="White" <!-- 滑块颜色 -->
IsEnabled="True"
Margin="10"
x:Name="MySwitch"
/>9. CheckBox
<CheckBox
IsChecked="{Binding IsChecked, Mode=TwoWay}" <!-- 是否选中 -->
Color="DodgerBlue" <!-- 选中颜色 -->
IsEnabled="True"
Margin="10"
x:Name="MyCheckBox"
/>10. RadioButton
<RadioButton
Content="选项A" <!-- 显示内容 -->
GroupName="Group1" <!-- 分组名 -->
IsChecked="{Binding IsOptionA, Mode=TwoWay}" <!-- 是否选中 -->
Color="Orange"
IsEnabled="True"
Margin="10"
x:Name="MyRadioButton"
/>11. Slider
<Slider
Minimum="0" <!-- 最小值 -->
Maximum="100" <!-- 最大值 -->
Value="{Binding Progress, Mode=TwoWay}" <!-- 当前值 -->
ThumbColor="Red" <!-- 滑块颜色 -->
MinimumTrackColor="Blue" <!-- 已滑动部分颜色 -->
MaximumTrackColor="Gray" <!-- 未滑动部分颜色 -->
IsEnabled="True"
Margin="10"
x:Name="MySlider"
/>12. ProgressBar
<ProgressBar
Progress="{Binding ProgressValue}" <!-- 进度0~1 -->
ProgressColor="Green"
BackgroundColor="LightGray"
Margin="10"
x:Name="MyProgressBar"
/>13. ActivityIndicator
<ActivityIndicator
IsRunning="{Binding IsBusy}" <!-- 是否显示动画 -->
Color="Purple"
IsVisible="{Binding IsBusy}"
Margin="10"
x:Name="MyActivityIndicator"
/>14. DatePicker
<DatePicker
Date="{Binding SelectedDate, Mode=TwoWay}" <!-- 当前日期 -->
MinimumDate="2020-01-01"
MaximumDate="2030-12-31"
Format="yyyy-MM-dd"
TextColor="Black"
Margin="10"
x:Name="MyDatePicker"
/>15. TimePicker
<TimePicker
Time="{Binding SelectedTime, Mode=TwoWay}" <!-- 当前时间 -->
Format="HH:mm"
TextColor="Black"
Margin="10"
x:Name="MyTimePicker"
/>16. WebView
<WebView
Source="{Binding WebUrl}" <!-- 网页地址 -->
HeightRequest="300"
WidthRequest="400"
Margin="10"
x:Name="MyWebView"
/>
navigated nagigating17. Frame
<Frame
CornerRadius="10" <!-- 圆角半径 -->
HasShadow="True" <!-- 是否有阴影 -->
BorderColor="Gray"
BackgroundColor="White"
Padding="10"
Margin="10"
x:Name="MyFrame">
<Label Text="卡片内容"/>
</Frame>18. Border（MAUI 新增）
<Border
Stroke="Red" <!-- 边框颜色 -->
StrokeThickness="2" <!-- 边框宽度 -->
StrokeShape="RoundRectangle 8" <!-- 边框形状 -->
Background="LightYellow"
Margin="10"
x:Name="MyBorder">
<Label Text="带边框内容"/>
</Border>19. Expander
<Expander
IsExpanded="{Binding IsExpanded, Mode=TwoWay}" <!-- 是否展开 -->
Margin="10"
x:Name="MyExpander">
<Expander.Header>
<Label Text="点击展开"/>
</Expander.Header>
<Label Text="这是可展开的内容"/>
</Expander>20. 通用属性（所有控件都可用）
| 属性名 | 说明 |
|---|---|
| Margin | 外边距 |
| Padding | 内边距 |
| BackgroundColor | 背景色 |
| Opacity | 透明度 |
| IsVisible | 是否可见 |
| IsEnabled | 是否可用 |
| WidthRequest | 宽度请求 |
| HeightRequest | 高度请求 |
| HorizontalOptions | 水平对齐方式 |
| VerticalOptions | 垂直对齐方式 |
| AutomationId | 自动化测试ID |
| x:Name | 控件名称 |