MAUI 开发从入门到出门（3 xaml）

最新推荐文章于 2025-03-28 15:52:04 发布

zhangsh1987

最新推荐文章于 2025-03-28 15:52:04 发布

阅读量2.4k

点赞数 2

分类专栏： MAUI 文章标签：前端

本文链接：https://blog.youkuaiyun.com/zhangsh1987/article/details/125949105

版权

MAUI 专栏收录该内容

6 篇文章

订阅专栏

写在前面

坚持第三周，微软的各种框架也是出来的块扔的也快。但是这几年甭管怎么折腾多数还是以创建xaml文件的方式来写前端页面的。继续盘它。

XAML是个啥

所有带ML的语言都差不多，标记语言嘛，各种标签描述。XAML简化了很多创建UI的过程。可以声明性的创建UI元素，然后对应一个cs文件去实现逻辑。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">
			 
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />
                
            <Label 
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />
            
            <Label 
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button 
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

第一句：<? xml 1.0 utf-8 ?> 自报家门，解析的时候别整错了。

第二句：ContentPage 这个是一种布局。你可以设置各种布局。游戏常见的第一种，填表常见的第二种，新闻常见的第三种，微信常见的第四种。

再往后，xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 代表声明xaml 命名空间
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 带别名的xml空间，通过别名可以访问该命名空间的对象
x:Class="MauiApp1.MainPage" 代表xaml文件指向的类，cs写逻辑的时候就是通过对应的类。=》 public partial class MainPage : ContentPage

再后面就是控件了。参考微软文档：

视图	描述
`ActivityIndicator`	`ActivityIndicator` 使用动画来显示应用从事冗长的活动，而不给出任何进度指示。有关详细信息，请参阅 ActivityIndicator。
`BlazorWebView`	`BlazorWebView` 使你能够在 .NET MAUI 应用中托管 Blazor Web 应用。有关详细信息，请参阅 BlazorWebView。
`Border`	`Border` 是一个容器控件，用于在另一个控件周围绘制边框、背景或两者。有关详细信息，请参阅边框。
`BoxView`	`BoxView` 绘制指定宽度、高度和颜色的矩形或正方形。有关详细信息，请参阅 BoxView。
`Button`	`Button` 显示文本并响应点击或单击，指示应用执行任务。有关详细信息，请参阅按钮。
`CarouselView`	`CarouselView` 显示数据项的可滚动列表，用户在其中轻扫以在集合中移动。有关详细信息，请参阅 CarouselView。
`CheckBox`	`CheckBox` 使你能够使用可以选中或为空的按钮类型选择布尔值。有关详细信息，请参阅 CheckBox。
`CollectionView`	`CollectionView` 使用不同的布局规范显示可选择数据项的可滚动列表。有关详细信息，请参阅 CollectionView。
`ContentView`	`ContentView` 是一个控件，用于创建自定义的可重用控件。有关详细信息，请参阅 ContentView。
`DatePicker`	`DatePicker` 允许使用平台日期选取器选择日期。有关详细信息，请参阅 DatePicker。
`Editor`	`Editor` 使你可以输入和编辑多行文本。有关详细信息，请参阅编辑器。
`Ellipse`	`Ellipse` 显示椭圆或圆。有关详细信息，请参阅椭圆。
`Entry`	`Entry` 使你可以输入和编辑单行文本。有关详细信息，请参阅 Entry。
`Frame`	`Frame` 用于用颜色、阴影和其他选项配置的边框包装视图或布局。有关详细信息，请参阅 Frame。
`GraphicsView`	`GraphicsView` 是一个图形画布，可以使用命名空间中的类型 `Microsoft.Maui.Graphics` 绘制 2D 图形。有关详细信息，请参阅 GraphicsView。
`Image`	`Image` 显示可从本地文件、URI、嵌入资源或流加载的图像。有关详细信息，请参阅 Image。
`ImageButton`	`ImageButton` 显示图像并响应点击或单击该点击，指示应用执行任务。有关详细信息，请参阅 ImageButton。
`IndicatorView`	`IndicatorView` 显示表示项 `CarouselView`数的指示器。有关详细信息，请参阅 IndicatorView。
`Label`	`Label` 显示单行和多行文本。有关详细信息，请参阅标签。
`Line`	`Line` 显示从起点到终点的线条。有关详细信息，请参阅 Line。
`ListView`	`ListView` 显示可滚动的数据项列表。有关详细信息，请参阅 ListView。
`Path`	`Path` 显示曲线和复杂形状。有关详细信息，请参阅路径。
`Picker`	`Picker` 显示一个简短的项列表，可从中选择一个项。有关详细信息，请参阅选取器。
`Polygon`	`Polygon` 显示多边形。有关详细信息，请参阅多边形。
`Polyline`	`Polyline` 显示一系列连接的直线。有关详细信息，请参阅折线。
`ProgressBar`	`ProgressBar` 使用动画显示应用正在经历较长的活动。有关详细信息，请参阅 ProgressBar。
`RadioButton`	`RadioButton` 是一种按钮类型，允许从集中选择一个选项。有关详细信息，请参阅 RadioButton。
`Rectangle`	`Rectangle` 显示矩形或正方形。有关详细信息，请参阅矩形。
`RefreshView`	`RefreshView` 是一个容器控件，它为可滚动内容提供拉取刷新功能。有关详细信息，请参阅 RefreshView。
`RoundRectangle`	`RoundRectangle` 显示带圆角的矩形或正方形。有关详细信息，请参阅矩形。
`ScrollView`	`ScrollView` 提供其内容的滚动，通常是布局。有关详细信息，请参阅 ScrollView。
`SearchBar`	`SearchBar` 是用于启动搜索的用户输入控件。有关详细信息，请参阅 SearchBar。
`Slider`	`Slider` 使你可以从连续范围中选择一个 `double` 值。有关详细信息，请参阅滑块。
`Stepper`	`Stepper` 使你能够从一系列增量值中选择一个 `double` 值。有关详细信息，请参阅 Stepper。
`SwipeView`	`SwipeView` 是一个容器控件，它环绕内容项，并提供由轻扫手势显示的上下文菜单项。有关详细信息，请参阅 SwipeView。
`Switch`	`Switch` 使你能够使用可打开或关闭的按钮类型选择布尔值。有关详细信息，请参阅 Switch。
`TableView`	`TableView` 显示可滚动项的表，可分组到节中。有关详细信息，请参阅 TableView。
`TimePicker`	`TimePicker` 使你能够使用平台时间选取器选择时间。有关详细信息，请参阅 TimePicker。
`WebView`	`WebView` 显示网页或本地 HTML 内容。有关详细信息，请参阅 WebView。