maui界面布局

已于 2023-03-03 13:35:32 修改
阅读量1.9k 收藏 8
点赞数 1
分类专栏： MAui学习 文章标签： c# maui
于 2023-02-23 21:48:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hb_ljj/article/details/129116564
版权

目录

1 Grid网格

按比例分配网格

Grid简写

Grid合并

Grid 嵌套

2 HorizontalStackLayout水平堆叠布局

子控件水平堆叠

​编辑

对齐子控件

 子控件VerticalOptions

实例应用

3 VerticalStacklayout垂直堆叠布局

实例应用

  4 AbsoluteLayout 绝对定位布局

输入绝对值

5 FlexLavout弹性布局

“圣杯布局”

可以在应用程序中排列和分组 UI 控件。 选择布局类需要了解布局如何定位其子元素，以及布局如何调整其子元素的大小。 此外，可能需要嵌套布局来创建所需的布局。

我们介绍5个布局控件使用

Grid

HorizontalStackLayout

VerticalStacklayout

AbsoluteLayout

FlexLavout

1 Grid网格

RowSpacing ColumnSpacing 行间距 列间距

Grid.RowDefinitions 定义行

Grid.ColDefinitions 定义列

<Grid RowSpacing="5" ColumnSpacing="5">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <BoxView Color="Aqua" Grid.Row="0" Grid.Column="0"/>
        <BoxView Color="Aqua"  Grid.Row="0" Grid.Column="1"/>
        <BoxView Color="Aqua" Grid.Row="1" Grid.Column="0"/>
        <BoxView Color="Aqua" Grid.Row="1" Grid.Column="1"/>
        <BoxView Color="Aqua" Grid.Row="2" Grid.Column="0"/>
        <BoxView Color="Aqua" Grid.Row="2" Grid.Column="1"/>
    </Grid>

 

按比例分配网格

定义3行2列 第一行占1份，第二行占2份 第三行占3份

<Grid RowSpacing="5" ColumnSpacing="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="3*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <BoxView Color="Aqua" Grid.Row="0" Grid.Column="0"/>
        <BoxView Color="Aqua"  Grid.Row="0" Grid.Column="1"/>
        <BoxView Color="Aqua" Grid.Row="1" Grid.Column="0"/>
        <BoxView Color="Aqua" Grid.Row="1" Grid.Column="1"/>
        <BoxView Color="Aqua" Grid.Row="2" Grid.Column="0"/>
        <BoxView Color="Aqua" Grid.Row="2" Grid.Column="1"/>
    </Grid>

 

Grid简写

定义3行2列简写

<Grid RowDefinitions="1*,2*,3*" ColumnDefinitions="*,*" RowSpacing="5" ColumnSpacing="5">

定义4行 3列简写

<Grid RowDefinitions="*,*,*,*" ColumnDefinitions="*,*,*" RowSpacing="5" ColumnSpacing="5">

 <Grid RowDefinitions="1*,2*,3*" ColumnDefinitions="*,*" RowSpacing="5" ColumnSpacing="5">
        <BoxView Color="Aqua" Grid.Row="0" Grid.Column="0"/>
        <BoxView Color="Aqua"  Grid.Row="0" Grid.Column="1"/>
        <BoxView Color="Aqua" Grid.Row="1" Grid.Column="0"/>
        <BoxView Color="Aqua" Grid.Row="1" Grid.Column="1"/>
        <BoxView Color="Aqua" Grid.Row="2" Grid.Column="0"/>
        <BoxView Color="Aqua" Grid.Row="2" Grid.Column="1"/>
    </Grid>

Grid合并

Grid合并列 Grid.ColumnSpan="3"（合并3列）Grid.RowSpan="3"（合并3行）

Grid 嵌套

第2行2列合并

嵌套 1行3列

<Grid RowDefinitions="*,*,*" ColumnDefinitions="*,*" RowSpacing="5" ColumnSpacing="5">
        <BoxView Color="Aqua" Grid.Row="0" Grid.Column="0"/>
        <BoxView Color="Aqua"  Grid.Row="0" Grid.Column="1"/>
        <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ColumnDefinitions="*,*,*"  ColumnSpacing="5">
            <BoxView Color="Aqua"  Grid.Column="0"/>
            <BoxView Color="Aqua" Grid.Column="1"/>
            <BoxView Color="Aqua" Grid.Column="2"/>
        </Grid>
        <BoxView Color="Aqua" Grid.Row="2" Grid.Column="0"/>
        <BoxView Color="Aqua" Grid.Row="2" Grid.Column="1"/>
    </Grid>

2 HorizontalStackLayout水平堆叠布局

子控件水平堆叠

Spacing="10"  子控件间距10像素

HeightRequest="200" HorizontalStackLayout高度为200像素

<HorizontalStackLayout Spacing="10" HeightRequest="200">
        <Label Text="一" Background="red"/>
        <Label Text="二" Background="orange"/>
        <Label Text="三" Background="blue"/>
        <Label Text="四" Background="green"/>
    </HorizontalStackLayout>

对齐子控件

VerticalOptions 默认Center 居中

<HorizontalStackLayout Spacing="10" HeightRequest="200" VerticalOptions="Start">

子控件在HorizontalStackLayout顶部左侧对齐

<HorizontalStackLayout Spacing="10" HeightRequest="200" VerticalOptions="Center">

 <HorizontalStackLayout Spacing="10" HeightRequest="200" VerticalOptions="End">

 <HorizontalStackLayout Spacing="10"  VerticalOptions="Fill">

 子控件VerticalOptions

<HorizontalStackLayout Spacing="10"  HeightRequest="200">
        <Label Text="一" Background="red" VerticalOptions="Start"/>
        <Label Text="二" Background="orange" VerticalOptions="Center"/>
        <Label Text="三" Background="blue" VerticalOptions="End"/>
        <Label Text="四" Background="green" VerticalOptions="Fill"/>
    </HorizontalStackLayout>

实例应用

在HorizontalStackLayout布局动态添加BoxView控件并横向滚动

<Grid RowDefinitions="*,70" Padding="5" BackgroundColor="#f5f3fe">
        <ScrollView Orientation="Horizontal" BackgroundColor="White">
            <HorizontalStackLayout x:Name="hStack" Spacing="10"
                                   Margin="10" HeightRequest="200"/>

        </ScrollView>
        <Grid Grid.Row="1" ColumnDefinitions="60,*,100" ColumnSpacing="10" Padding="10">
            <Label Text="宽度" VerticalOptions="Center" HorizontalOptions="End"/>
            <Entry x:Name="entryWidth" Grid.Column="1" WidthRequest="150"
                   HorizontalOptions="Start"
                   Placeholder="请输入项目宽度"
                   ClearButtonVisibility="WhileEditing"/>
            <Button x:Name="btnAdd" Text="添加项目" Grid.Column="2" Clicked="btnAdd_Clicked"/>

        </Grid>
private void btnAdd_Clicked(object sender, EventArgs e)
	{
		hStack.Add(new BoxView
		{
			Color = Color.FromRgb(0x70, 0x7c, 0xd2),
            WidthRequest = double.Parse(entryWidth.Text),
            CornerRadius = 10
        }); 
	}

3 VerticalStacklayout垂直堆叠布局

<VerticalStackLayout Margin="20" Spacing="6">
        <Label Text="Start" BackgroundColor="gray"/>
        <Label Text="Center" BackgroundColor="gray"/>
        <Label Text="End" BackgroundColor="gray"/>
        <Label Text="Fill" BackgroundColor="gray"/>
    </VerticalStackLayout>

<VerticalStackLayout Margin="20" Spacing="6" >
        <Label Text="Start" BackgroundColor="gray" HorizontalOptions="Start"/>
        <Label Text="Center" BackgroundColor="gray" HorizontalOptions="Center"/>
        <Label Text="End" BackgroundColor="gray" HorizontalOptions="End"/>
        <Label Text="Fill" BackgroundColor="gray"HorizontalOptions="Fill" />
    </VerticalStackLayout>

实例应用

利用VerticalStacklayout水平堆叠布局 三原色 次生色表达

<VerticalStackLayout Margin="20" Spacing="6" >
        <Label Text="Primay Colors" BackgroundColor="silver" />
        <Frame BorderColor="Silver" Padding="5">
        <HorizontalStackLayout Spacing="15">
            <Rectangle Fill="red" HeightRequest="30" WidthRequest="30" HorizontalOptions="Start"/>
            <Label Text="Red" VerticalOptions="Center"/>
        </HorizontalStackLayout>
        </Frame>
        <Frame BorderColor="Silver" Padding="5">
            <HorizontalStackLayout Spacing="15">
                <Rectangle Fill="Yellow" HeightRequest="30" WidthRequest="30" HorizontalOptions="Start"/>
                <Label Text="Yellow" VerticalOptions="Center"/>
            </HorizontalStackLayout>
        </Frame>

        <Frame BorderColor="Silver" Padding="5">
            <HorizontalStackLayout Spacing="15">
                <Rectangle Fill="Blue" HeightRequest="30" WidthRequest="30" HorizontalOptions="Start"/>
                <Label Text="Blue" VerticalOptions="Center"/>
            </HorizontalStackLayout>
        </Frame>
        <Label Text="Secondary Colors" BackgroundColor="silver" />
        <Frame BorderColor="Silver" Padding="5">
            <HorizontalStackLayout Spacing="15">
                <Rectangle Fill="Green" HeightRequest="30" WidthRequest="30" HorizontalOptions="Start"/>
                <Label Text="Green" VerticalOptions="Center"/>
            </HorizontalStackLayout>
        </Frame>
        <Frame BorderColor="Silver" Padding="5">
            <HorizontalStackLayout Spacing="15">
                <Rectangle Fill="Orange" HeightRequest="30" WidthRequest="30" HorizontalOptions="Start"/>
                <Label Text="Orange" VerticalOptions="Center"/>
            </HorizontalStackLayout>
        </Frame>
        <Frame BorderColor="Silver" Padding="5">
            <HorizontalStackLayout Spacing="15">
                <Rectangle Fill="Purple" HeightRequest="30" WidthRequest="30" HorizontalOptions="Start"/>
                <Label Text="Purple" VerticalOptions="Center"/>
            </HorizontalStackLayout>
        </Frame>

    </VerticalStackLayout>

 

  4 AbsoluteLayout 绝对定位布局

输入绝对值

<AbsoluteLayout Margin="20">
        <BoxView Color="Silver" AbsoluteLayout.LayoutBounds="0,10,200,5"/>
        <BoxView Color="Silver" AbsoluteLayout.LayoutBounds="0,20,200,5"/>
        <BoxView Color="Silver" AbsoluteLayout.LayoutBounds="10,10,5,65"/>
        <BoxView Color="Silver" AbsoluteLayout.LayoutBounds="20,0,5,65"/>
        <Label Text="Stylish Header" FontSize="24" TextColor="Gray"
               AbsoluteLayout.LayoutBounds="30,25"/>
    </AbsoluteLayout>

按比例

<BoxView Color="Blue" AbsoluteLayout.LayoutBounds="0.5,0,100,25" AbsoluteLayout.LayoutFlags="all" />

0.5,0,100,25 按比例

 <AbsoluteLayout>
        <BoxView Color="Blue" AbsoluteLayout.LayoutBounds="0.5,0,100,25"
                 AbsoluteLayout.LayoutFlags="PositionProportional"
                 />
        <BoxView Color="Green" AbsoluteLayout.LayoutBounds="0,0,25,100"
                 AbsoluteLayout.LayoutFlags="PositionProportional"
                 />
        <BoxView Color="Red" AbsoluteLayout.LayoutBounds="1,0,25,100"
                 AbsoluteLayout.LayoutFlags="PositionProportional"
                 />
        <BoxView Color="Black" AbsoluteLayout.LayoutBounds="0.5,1,100,25"
                 AbsoluteLayout.LayoutFlags="PositionProportional"
                 />

    </AbsoluteLayout>

 

<AbsoluteLayout>
        <BoxView Color="Blue" 
                 AbsoluteLayout.LayoutBounds="0.5,0,0.3,0.1" 
                 AbsoluteLayout.LayoutFlags="All" />
        <BoxView Color="Green" AbsoluteLayout.LayoutBounds="0,0.5,0.1,0.3"
                 AbsoluteLayout.LayoutFlags="All" />
        <BoxView Color="Red" AbsoluteLayout.LayoutBounds="1,0.5,0.1,0.3"
                 AbsoluteLayout.LayoutFlags="All" />
        <BoxView Color="Black" AbsoluteLayout.LayoutBounds="0.5,1,0.3,0.1"
                 AbsoluteLayout.LayoutFlags="All"/>
        <Label Text="Centered" FontSize="26"
               AbsoluteLayout.LayoutBounds="0.5,0.5"
               AbsoluteLayout.LayoutFlags="PositionProportional"/>
    </AbsoluteLayout>

 

5 FlexLavout弹性布局

<FlexLayout JustifyContent="Start">
        <Label Text="oneLable" BackgroundColor="Red"/>
        <Label Text="towlable" BackgroundColor="green"/>
        <Label Text="thirdlable" BackgroundColor="Blue"/>
    </FlexLayout>

 <FlexLayout JustifyContent="Center">

 

<FlexLayout JustifyContent="End">

<FlexLayout JustifyContent="SpaceAround">

 

 <FlexLayout JustifyContent="SpaceBetween">

 <FlexLayout JustifyContent="SpaceEvenly">

 

 <FlexLayout Direction="Column" JustifyContent="SpaceEvenly">

<FlexLayout Direction="ColumnReverse" JustifyContent="SpaceEvenly">

 <FlexLayout Direction="RowReverse" JustifyContent="SpaceEvenly">

 <FlexLayout JustifyContent="SpaceEvenly" AlignItems="Center">

<FlexLayout JustifyContent="SpaceEvenly" AlignItems="end">

<FlexLayout JustifyContent="SpaceEvenly" AlignItems="Start">

<FlexLayout JustifyContent="SpaceEvenly" AlignItems="Stretch"> 

<FlexLayout JustifyContent="SpaceEvenly" AlignItems="Stretch" Wrap="Wrap">

<FlexLayout JustifyContent="SpaceEvenly" AlignItems="Stretch" Wrap="Wrap">
        <Label Text="1oneLable" BackgroundColor="Red"/>
        <Label Text="2towlable" BackgroundColor="green"/>
        <Label Text="3thirdlable" BackgroundColor="Blue"/>
        <Label Text="4oneLable" BackgroundColor="Red"/>
        <Label Text="5towlable" BackgroundColor="green"/>
        <Label Text="6thirdlable" BackgroundColor="Blue"/>
        <Label Text="7oneLable" BackgroundColor="Red"/>
    </FlexLayout>

<FlexLayout JustifyContent="SpaceEvenly" AlignItems="Stretch" Wrap="NoWrap">

<FlexLayout JustifyContent="SpaceEvenly" AlignItems="Stretch" Wrap="Reverse">

 <FlexLayout JustifyContent="SpaceEvenly" Wrap="Wrap" >
        <BoxView BackgroundColor="Silver" WidthRequest="100" HeightRequest="100"/>
        <BoxView BackgroundColor="Silver" WidthRequest="100" HeightRequest="100"/>
        <BoxView BackgroundColor="Silver" WidthRequest="100" HeightRequest="100"/>
        <BoxView BackgroundColor="Silver" WidthRequest="100" HeightRequest="100"/>
        <BoxView BackgroundColor="Silver" WidthRequest="100" HeightRequest="100"/>
        <BoxView BackgroundColor="Silver" WidthRequest="100" HeightRequest="100"/>
        <BoxView BackgroundColor="Silver" WidthRequest="100" HeightRequest="100"/>
        <BoxView BackgroundColor="Silver" WidthRequest="100" HeightRequest="100"/>
        <BoxView BackgroundColor="Silver" WidthRequest="100" HeightRequest="100"/>
        <BoxView BackgroundColor="Silver" WidthRequest="100" HeightRequest="100"/>
    </FlexLayout>

<FlexLayout JustifyContent="SpaceEvenly" Wrap="Wrap" AlignContent="SpaceEvenly" >

“圣杯布局”

<FlexLayout Direction="Column" >
        <Label Text="页眉" FontSize="18" BackgroundColor="Aqua" HorizontalTextAlignment="Center"/>
        <FlexLayout FlexLayout.Grow="1">
            <Label Text="内容" FontSize="18" BackgroundColor="Gray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FlexLayout.Grow="1"/>
            <BoxView Color="blue" FlexLayout.Basis="50" FlexLayout.Order="-1"/>
            <BoxView Color="Green" FlexLayout.Basis="50"/>
        </FlexLayout>
        <Label Text="页脚" FontSize="18" BackgroundColor="Pink" HorizontalTextAlignment="Center"/>
    </FlexLayout>

 

基本上布局也算完善了，微软MAui介绍不系统，遇到问题，下手查找资料，也解决不了什么问题，网络搜索，要不就是介绍，要不就是点功能描述，也许还不是很流行MAUi 相关教程还是比较少，与小伙伴共同进步。

李建军
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【MAUI】自定义 .NET MAUI XAML 页面中的布局
德仔
12-05 2395
.NET MAUI 布局面板可帮助您在各种设备上为应用程序创建一致的用户界面。假设您正在构建一个提示计算器应用程序，您计划在许多计算机和设备上部署该应用程序。每个设备可以具有不同的屏幕尺寸和像素密度。您的目标是使应用程序在所有设备上看起来尽可能相似。您希望避免手动计算每个屏幕尺寸的视图大小和位置。.NET MAUI 包括一个布局管理系统，可为您执行这些计算。您可以将视图放在布局面板中，这些布局面板会自动管理其子视图的大小和位置。这些面板使在不同设备上创建一致的用户界面变得更加容易。在本模块中，您将构建一个在
MAUI 框架安卓入门开发03 界面样式优化
build2024
07-18 1839
2.5需要使用一个集合控件CollectionView来进行展示，并且通过ItemsSource属性来绑定的方式加载集合数据源。1.1使用ScrollView滚动控件，该控件有一个属性Orientation，用来设置滚动的方向。2.3ViewModel需要设计一个集合，用于页面加载时集合存放的图标和文字信息。首先，标题模型设计，设计一个用于页面交互的ViewModel，和用于存放页面相关属性的Model。2.8初始化数据有了，接下来需要定义数据模板，让内容按照指定的模板进行排放。...
.NET Multi-platform App UI (.NET MAUI)中DataGrid 中的复选框
cfqabc123的博客
06-04 1977
我看到一个注释，如果将 RadDataGrid AutoGenerateColumns 值设置为“True”，那么 Telerik 将根据基础数据类型构建列（即，如果其中一列显示布尔数据，它会将其转换为复选框）......如果我错了，请纠正我。当我尝试第一种方法时，我无法绑定到 ObservableCollection 中每个项目的属性，这可能是代码问题或大脑（我）问题，不确定，因为我试图遵循 Telerik 提供的示例。在我讨论什么是编辑器以及显示模式和编辑模式之间的区别之前，先解决有关列生成的困惑。
(02).NET MAUI实战 布局
dotNET跨平台
06-13 1502
1.概要既然要做实战开发会建项目之后就需要认识布局控件了，本篇文章分享.NET MAUI中的一些基础常用的布局控件。GridStackLayoutFalyxLayoutAbsoluteLayout2.详细内容(1)Grid语法：<Grid RowDefinitions="50,50,50,50" RowSpacing="10" ColumnDefinitions="...
MAUI 框架安卓入门开发01 界面设计
build2024
07-13 5742
1.导航栏设计1.1 由于需要水平布局的设计方式，所以外围需要使用一个HorizontalStackLayout 进行包裹着所有的子控件，来达到水平布局的效果。页面大概是这样子，按钮全部由RadioButton 进行重绘
MAUI技术调研1——界面设计
qq_53373885的博客
10-19 1158
技术调研
MAUI 框架入门学习03 布局控件介绍
build2024
07-10 3760
MAUI 是一种标记性语言，每一个标签成对出现的，即有开始标签就要有结束标签。它的写法跟JavaScript 编程语言大同小异 1. .xaml 布局控件 ContentPage 显示单个视图的页面。 ScrollView 表示滚动控件，即页面内容超出范围时，可以进行滚动 VerticalStackLayout 纵向栈垂直布局控件， HoriaontalStackLayout 水平方向布局控件 StackLayout 具备了VerticalStackLayout， HoriaontalS
[MAUI程序设计]界面多态与实现
Gefangenes的博客
05-29 968
首先用控件模板定义博客条目的外观，“博客条目”是包含博客标题，内容，以及发布时间等信息的卡片，视觉上呈现圆角矩形的白色不透明卡片效果。博客条目控件是一个基于ContentView控件在页面的资源中，添加如下两个ControlTemplate模板，分别用于手机设备和桌面设备。BlogCardViewPhone用于博客条目在手机设备中的呈现，条目菜单侧滑栏方式展开，我们配置SwipeView控件，作为卡片，用一个Frame框架包裹其内容。
Maui在制作安卓程序的时候如何找到apk签名
11-05
同时，你可以在单一项目中实现大部分应用逻辑和用户界面布局，但仍然有空间添加特定于平台的代码和资源，以满足不同操作系统的需求。 在开发安卓应用程序时，签名是必不可少的一环，特别是在发布应用时。为了在...
MAUI 框架开发 将 MAUI 嵌入到 WPF 控件里.rar
06-03
4. **嵌入MAUI到WPF**：此技术允许开发者在WPF应用中使用MAUI的控件和布局，以增强用户体验或利用MAUI的跨平台能力。这通常涉及使用ElementHost（在WPF中）和 MauiWinUIWindow （在.NET MAUI中）进行交互。 5. **UI...
MAUI Helloworld测试程序功能实现，注意2022升级最新版本；
01-19
这个项目将展示如何创建一个简单的MAUI应用，包括界面布局、事件处理和数据绑定等基本概念。 总的来说，这个压缩包提供了学习和实践MAUI开发的全套资源，从基本的“Hello, World!”到更复杂的数据存储和检索。对于...
力科发布了具有MAUI用户交互界面的WaveSurfer3000系列示波器
01-20
导读：此系列示波器带宽至500MHz,且配备测量分析工具，拥有多仪器集成能力和“10.1”可触摸屏幕显示。 　　Teledyne LeCroy（力科）今天发布了配备MAUI用户交互界面的WaveSurfer 3000系列示波器。之前，力科独特设计的用户交互界面只应用于其高端示波器，并且无缝集成了测量分析工具，多仪器集成能力，所有特性集聚于这台具有“10.1”触摸显示屏的中端示波器机型上。WaveSurfer 3000 示波器覆盖带宽从200MHz 到500MHz,,标配10Mpts/ch存储深度和高达4 GS/s 采样率。除拥有传统示波器优点之外，WaveSurfer 3000还具有多种仪器
【20211203】【英文】.NET MAUI documents.pdf
12-03
.NET MAUI的目标之一是使开发者能够尽可能地在一个共享的代码库中实现应用的逻辑和UI布局。这样，开发者可以： 1. 使用XAML和C#编写跨平台应用，只需一个共享的代码库，通过Visual Studio进行开发。 2. 在不同平台...
Microsoft.Maui.Graphics.Skia 使用 DrawString 绘制文本的坐标问题.rar
06-03
在.NET Maui框架中，...在实践中，根据需求灵活运用这些知识，可以创建出丰富多样的图形界面。通过不断学习和实践，开发者可以掌握在.NET Maui中利用SkiaSharp绘制文本的各种技巧，从而提高应用程序的用户体验。
关于MAUI跨平台布局详解
ednakurumi的博客
08-12 2012
针对微软最新发布的MAUI框架，其实布局和XF基本一致，只是在XF的基础上做了相对优化。
.NET MAUI控件
何鹏飞的博客
11-02 259
有关详细信息，请参阅 FlexLayout。FlyoutPage FlyoutPage 是一个管理两个相关信息页的页面 - 一个显示项目的浮出控件页和一个显示浮出控件页面上项目详细信息的详细信息页。有关详细信息，请参阅 BindableLayout。有关详细信息，请参阅 HorizontalStackLayout。有关详细信息，请参阅 VerticalStackLayout。有关详细信息，请参阅 AbsoluteLayout。有关详细信息，请参阅 ImageButton。有关详细信息，请参阅 矩形。
[MAUI]实现动态拖拽排序网格
jevonsflash的专栏
09-18 325
拖拽控件悬停在当前控件上方时，将IsBeingDraggedOver设置为true，通知当前控件正在有拖拽控件悬停在其上方，同时在服务列表中寻找当前正在被拖拽的服务，将DropPlaceHolderItem设置为当前控件。当以比较快的速度，拖拽Tile经过较多的位置时，后面的Tile会短暂地替代原先的位置，导致拖拽中的Tile不在期望的Tile上方，而拖拽中的Tile与错误的Tile产生了交叠从而触发DraggedOver事件，导致错乱。其是在松开手指之后才向列表提交条目位置变更的命令。
[MAUI 项目实战] 音乐播放器（三）：界面交互
jevonsflash的专栏
02-27 1369
UI设计的本质是对于产品的理解在界面中多种形式的映射，当需求和定位不同时，对相同的功能表达出了不同的界面和交互方式。作为播放器，界面可以是千差万别的。《番茄播放器》的iOS平台上我开发了传统版本，和基于手势播放的版本。它们界面不同，但用的同一个播放内核。作为播放内核项目，在MatoMusic.Core的工作已经结束。本系列博文重点还是在播放器思路的解读，关于MAUI动画交互，我打算有时间另外写博客（这里给自己挖个坑）。
.NET MAUI ScrollView 滚动视图布局
最新发布
转眼之间 一路有你
06-12 527
NET Multi-platform App UI (.NET MAUI) ScrollView 是能够滚动其内容的视图。。- 这是滚动视图内部包含的内容，通常是一个布局或者视图。你可以将任何UI元素放入ScrollView中以使其可滚动。- 控制滚动的方向。VerticalHorizontalBothNeither和- 控制滚动条的可见性，可设为Auto、Always（滚动条可见）、Never（滚动条不可见）。方法 - 异步滚动到指定位置。你可以指定滚动到的X和Y坐标，以及是否动画滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值