跳转到主要内容

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 控件名称