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"
/>
<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"
/>
<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 |
控件名称 |
无评论