MAUI技术调研1——界面设计

和光9

已于 2022-10-22 23:58:35 修改

阅读量1.1k

点赞数

分类专栏： MAUI 文章标签： c# xamarin

于 2022-10-19 15:28:12 首次发布

本文链接：https://blog.csdn.net/qq_53373885/article/details/127408954

版权

MAUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

通过抠图，将处理好的任务图像放置在同样为用户输入的背景图片上。经过测试，MAUI可以图片叠放（注意先后顺序）

（抠图的效果似乎不是很好，考虑实际创作时采用已经设计好的人物立绘）
仅使用Grid，即可在一定程度上实现目标页面
在这里插入图片描述

但由于实现的过于简单，在实际设计过程中，可以考虑：
1：规定页面大小，规定android,ios横屏
2：StackLayout，FlexLayout，AbsoluteLayout，RelativeLayout 等多种布局设计页面。并在目标位置嵌套Grid，在Grid内使用Image

<CollectionView ItemsSource="{Binding myList}"
                        ItemsLayout="VerticalGrid, 3"
                        SelectionMode="Single"
                        >

            <CollectionView.ItemTemplate>
                <DataTemplate>

                    <SwipeView>
                        <SwipeView.LeftItems>
                            <SwipeItems>
                                <SwipeItem Text="Favorite"
                                           BackgroundColor="LightGreen"/>
                                <SwipeItem Text="Delete"
                                           BackgroundColor="LightPink"/>
                            </SwipeItems>
                        </SwipeView.LeftItems>
                        <Grid Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="50"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Label
                                Grid.Column="1"
                                Grid.Row="1"
                                Text="{Binding Id}"></Label>
                            <Image
                                Grid.Column="0"
                                Grid.Row="0"
                                Grid.ColumnSpan="2"
                                Source="background.png"></Image>
                        </Grid>
                    </SwipeView>


                   
                </DataTemplate>
            </CollectionView.ItemTemplate>

        </CollectionView>