MAUI下XAML的控件信息收集（用到多少记录多少，记完即可，等发现补充了再更新）

KensouBP

已于 2024-04-08 18:05:46 修改

阅读量461

点赞数 12

分类专栏： Net Maui 文章标签： android

于 2024-04-07 18:07:46 首次发布

本文链接：https://blog.csdn.net/KensouBP/article/details/137352138

版权

Net Maui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

XAML控件信息收集

APPShell

该控件主要出现在AppShell.xaml文件下
类似于主界面最顶端需要一个菜单条，可以执行回到主页，展示当前页内容，展开侧边栏一类的功能
在这里插入图片描述

ContentPage

该控件主要出现在MainPage.xaml文件，以后深入研究后，页面文件理论上可以扩展自定义页面
以下其他的控件说明都以ContentPage下的子控件为主
配合APPSHELL来看，可以视为需要展示的主界面控件
x:class，指定了安卓软件打开的主页，除此之外没细究其他内容是什么；

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SetsunaEBMaui.MainPage">

控件属性，背景图片设置：

ContentPage.BackgroundImageSource

Content的背景设置，代码举例：

    <ContentPage.BackgroundImageSource>
        <FileImageSource File="preview.jpg" AutomationProperties.IsInAccessibleTree="False" />
    </ContentPage.BackgroundImageSource>

FileImageSource

FileImageSource是ContentPage.BackgroundImageSource中的一个对象集合，主要用于图片插入；
其属性有：

file 指定具体的图片对象
AutomationProperties.IsInAccessibleTree 该属性决定了UI元素是否应该被辅助技术（如屏幕阅读器）访问（不是很懂，举例说明，不会被屏幕阅读器识别）

Grid

二维网格布局控件，可以当作其他控件的外壳做控件布置；

Padding

设置边界，按顺序为左、上、右、下；设置布局控件内的边界；

<Grid x:Name="MainGrid" Padding="5,5,5,5">

Grid.RowDefinitions

Grid行分割布局，有点类似于将控件按纵向布局，具体区别暂时不明，可以实现多段控制控件高度的效果；

<Grid>  
    <Grid.RowDefinitions>  
        <RowDefinition Height="Auto" /> <!-- 这行的高度将根据其内容自动调整 -->  
        <RowDefinition Height="*" />    <!-- 这行将占据所有剩余可用空间 -->  
        <RowDefinition Height="50" />   <!-- 这行的高度固定为 50 单位 -->  
    </Grid.RowDefinitions>  
	    <!-- 在这里添加你的控件，并指定它们应该放在哪一行 -->  
	    <Label Text="Auto Height Row" Grid.Row="0" />  
	    <Label Text="Star Height Row" Grid.Row="1" />  
	    <Label Text="Fixed Height Row" Grid.Row="2" />

在上面的示例中：

第一行的高度设置为 Auto，这意味着它将根据其中内容的大小自动调整高度。
第二行的高度设置为 *，这表示它将占据网格中所有剩余的可用垂直空间。如果有多个行的高度被设置为 *，它们将等比例地分配剩余空间。
第三行的高度被固定为 50，这是一个具体的单位值（通常是设备独立像素）。

StackLayout

叠层布局，基本概念上就是从上往下进行控件布局；概念中描述似乎后一个布局会叠在前一个布局上（没验证）实际上使用StackLayout时，调整了高度有可能会出现控件被部分遮盖显示不完整的情况，可能符合该属性，也可能时代码写得有问题（最终反正决定用了Grid的RowDefinitions代替了StackLayout）

FlexLayout

弹性布局，大致概念与StackLayout类似，但是可以按行和列两种格式进行处理，用Direction等于Column或Row进行控制，示例如下：

<FlexLayout Direction="Column">

ListView

主要用于绑定需要连续显示的数据；可以通过C#代码定义一个函数数组，然后把内容根据某个样式重复显示（比如控件根据绑定的数据连续显示），常见的QQ、微信聊天界面似乎就是此类；

<ListView x:Name="MessageListView" SelectionMode="None" ItemsSource="{Binding Messages}" FlexLayout.Basis="Auto"  HasUnevenRows="True" >
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Padding="5">
                    <Label Text="{Binding Timestamp}" FontSize="Caption" TextColor="Gray" BackgroundColor="MistyRose" 
                           HorizontalOptions="StartAndExpand" />
                    <Label Text="{Binding Text}" BackgroundColor="MistyRose" LineBreakMode="WordWrap" HorizontalOptions="StartAndExpand"
                           TextColor="Black"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ListView.ItemTemplate及DataTemplate及ViewCell

目前发现这三项属性or控件适合连续使用，不建议分拆，参照上述代码

Listview.ItemTemplate是list空间下的属性，需要加入细节控件以成列表信息；
DataTemplate是适合于ItemTemplate的一种数据控件布局，可以理解为某种形式的布局控件，但是本身仅有布局控件，未探明具体的作用；官方说明下表示，这个布局空间下仅能布局cell属性的控件，如Viewcell控件（实际上Viewcell控件目测是最好用的，其他如Textcell实用性和灵活性似乎都不高）；已验证缺少Cell类控件直接做普通控件布局，显示内容绑定和控件内容都会出现错误展示
Viewcell是每单个DataTemplate项下需要进行具体的控件布局或者交互的控件，如代码示例，可以布置多个且不同的格式的控件；

大致理解就变成了，我需要加入一个ListView，其属性Listview.ItemTemplate下加入一个绑定数据用的DataTemplate的框架，每单个框架内用ViewCell来展示结果和交互功能；
在这里插入图片描述