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、IconImageSource
Shell 介绍及与页面的关系
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
、SelectedItem
Header
、Footer
CarouselView
作用:轮播图、滑动页面。
常用属性:
ItemsSource
、ItemTemplate
IsBounceEnabled
、PeekAreaInsets
Loop
、Position
Frame
作用:带圆角、阴影的内容容器,常用于卡片、面板。
常用属性:
CornerRadius
:圆角半径HasShadow
:是否有阴影BorderColor
、BackgroundColor
Content
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 nagigating
17. 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 | 控件名称 |