堆栈内存溢出
  繁体   English   中英

如何在 Xamarin 表单中创建 UI 仪表板设计

[英]How to create UI Dashboard Design in Xamarin Form

 原文  2022-08-13 05:31:45  8   1    xamarin/ xamarin.forms/ xamarin.android/ xamarin.ios

问题描述

我正在使用 xamarin 表单，具有 android 和 IOS 项目下面是我想要创建相同 UI 的图像。

在此处输入图像描述

我尝试了很多，但我无法获得相同的设计。 我在谷歌图片中得到了这个设计。 我添加了我的代码和 output 结果

下面是我的代码：

    <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" Padding="10" >

        <Frame BackgroundColor="White" CornerRadius="20"   Grid.Row="0">
            <Grid ColumnDefinitions="Auto,Auto,Auto,Auto,Auto" VerticalOptions="CenterAndExpand">
                <Label Grid.Column="0" Grid.Row="0" Text="Primary School" FontAttributes="Bold" FontSize="16" TextColor="#08457E"  ></Label>
                <Label Grid.Column="1" Grid.Row="0" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Business_Time}" FontSize="20"  ></Label>
                <Label Grid.Column="2" Grid.Row="0" Text="Time Table" TextColor="Gray"  ></Label>
                <Label Grid.Column="3" Grid.Row="0" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Clipboard}" FontSize="20"  ></Label>
                <Label Grid.Column="4" Grid.Row="0" Text="H.W." TextColor="Gray"  ></Label>
            </Grid>
        </Frame>

        <Frame CornerRadius="10" Grid.Row="1" BackgroundColor="White" >
            <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,Auto" >
                <Label Grid.Row="0" Grid.Column="0" TextColor="#08457E"  FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User}" FontSize="20"  ></Label>
                <Label Grid.Row="0" Grid.Column="1" Text="Xamarin UI Design" TextColor="#202020"></Label>
                <Label Grid.Row="1" Grid.Column="0" TextColor="#08457E"  FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Table}" FontSize="20"  ></Label>
                <Label Grid.Row="1" Grid.Column="1" Text="Class: V" TextColor="#202020"></Label>
                <Label Grid.Row="2" Grid.Column="0" TextColor="#08457E"  FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User_Edit}" FontSize="20"  ></Label>
                <Label Grid.Row="2" Grid.Column="1" Text="Class Tearcher: Monali Kundre" TextColor="#202020"></Label>
            </Grid>
        </Frame>

        <Grid  Grid.Row="2" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto,Auto" RowSpacing="10" ColumnSpacing="10">
            <Frame Grid.Row="0" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Table}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Syllabus" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>
            <Frame Grid.Row="0" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Th_List}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Test" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>
            <Frame Grid.Row="0" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Edit}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Notice" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>

            <Frame Grid.Row="1" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Pallet}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Fees" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>
            <Frame Grid.Row="1" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Boxes}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Gallery" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>
            <Frame Grid.Row="1" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Money_Bill}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Profile" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>
        </Grid>
        <Frame Grid.Row="3"  CornerRadius="20" >
            <StackLayout  HorizontalOptions="FillAndExpand">
                <Image Source="https://graphicsfamily.com/wp-content/uploads/2020/11/Professional-Web-Banner-AD-in-Photoshop-scaled.jpg" VerticalOptions="FillAndExpand" HeightRequest="110" HorizontalOptions="FillAndExpand" Aspect="Fill"></Image>
            </StackLayout>
        </Frame>
        <Frame Grid.Row="4" CornerRadius="10" BackgroundColor="#08457E">
            <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="10">
                <Label Grid.Row="0" Grid.Column="0" Text="Learned Phase" TextColor="#ffffff"></Label>
                <Label Grid.Row="0" Grid.Column="1" Text="12" FontAttributes="Bold" TextColor="#ffffff"></Label>
                <Label Grid.Row="1" Grid.Column="0" Text="Phase left to learn" TextColor="#ffffff"></Label>
                <Label Grid.Row="1" Grid.Column="1" Text="36" FontAttributes="Bold" TextColor="#ffffff"></Label>
                <Label Grid.Row="2" Grid.Column="0" Text="Total Learning Time" TextColor="#ffffff"></Label>
                <Label Grid.Row="2" Grid.Column="1" Text="1.5h" FontAttributes="Bold" TextColor="#ffffff"></Label>
            </Grid>
        </Frame>
    </Grid>

output如下：

在此处输入图像描述

请帮我。 提前致谢。

1 个解决方案

解决方案1
 0  2022-08-13 09:57:13

快到了，试试这个：

更新第一帧中的网格：
Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto"
第三个网格是这样的：
ColumnDefinitions="*,*,*"

完整代码：

    <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" Padding="10" >

        <Frame BackgroundColor="White" CornerRadius="20"   Grid.Row="0">
            <Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto" VerticalOptions="CenterAndExpand">
                <Label Grid.Column="0" Grid.Row="0" Text="Primary School" FontAttributes="Bold" FontSize="16" TextColor="#08457E"  ></Label>
                <Label Grid.Column="1" Grid.Row="0" HorizontalOptions="EndAndExpand" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Business_Time}" FontSize="20"  ></Label>
                <Label Grid.Column="2" Grid.Row="0" Text="Time Table" TextColor="Gray"  ></Label>
                <Label Grid.Column="3" Grid.Row="0" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Clipboard}" FontSize="20"  ></Label>
                <Label Grid.Column="4" Grid.Row="0" Text="H.W." TextColor="Gray"  ></Label>
            </Grid>
        </Frame>

        <Frame CornerRadius="10" Grid.Row="1" BackgroundColor="White" >
            <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,Auto" >
                <Label Grid.Row="0" Grid.Column="0" TextColor="#08457E"  FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User}" FontSize="20"  ></Label>
                <Label Grid.Row="0" Grid.Column="1" Text="Xamarin UI Design" TextColor="#202020"></Label>
                <Label Grid.Row="1" Grid.Column="0" TextColor="#08457E"  FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Table}" FontSize="20"  ></Label>
                <Label Grid.Row="1" Grid.Column="1" Text="Class: V" TextColor="#202020"></Label>
                <Label Grid.Row="2" Grid.Column="0" TextColor="#08457E"  FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User_Edit}" FontSize="20"  ></Label>
                <Label Grid.Row="2" Grid.Column="1" Text="Class Tearcher: Monali Kundre" TextColor="#202020"></Label>
            </Grid>
        </Frame>

        <Grid  Grid.Row="2" RowDefinitions="Auto,Auto" ColumnDefinitions="*,*,*" RowSpacing="10" ColumnSpacing="10">
            <Frame Grid.Row="0" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Table}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Syllabus" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>
            <Frame Grid.Row="0" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Th_List}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Test" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>
            <Frame Grid.Row="0" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Edit}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Notice" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>

            <Frame Grid.Row="1" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Pallet}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Fees" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>
            <Frame Grid.Row="1" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Boxes}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Gallery" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>
            <Frame Grid.Row="1" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
                <Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Label  Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
               FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Money_Bill}" ></Label>
                    <Label Grid.Row="1" HorizontalOptions="Center" Text="Profile" VerticalOptions="Start"  
               TextColor="#202020"></Label>
                </Grid>
            </Frame>
        </Grid>
        <Frame Grid.Row="3"  CornerRadius="20" >
            <StackLayout  HorizontalOptions="FillAndExpand">
                <Image Source="https://graphicsfamily.com/wp-content/uploads/2020/11/Professional-Web-Banner-AD-in-Photoshop-scaled.jpg" VerticalOptions="FillAndExpand" HeightRequest="110" HorizontalOptions="FillAndExpand" Aspect="Fill"></Image>
            </StackLayout>
        </Frame>
        <Frame Grid.Row="4" CornerRadius="10" BackgroundColor="#08457E">
            <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="10">
                <Label Grid.Row="0" Grid.Column="0" Text="Learned Phase" TextColor="#ffffff"></Label>
                <Label Grid.Row="0" Grid.Column="1" Text="12" FontAttributes="Bold" TextColor="#ffffff"></Label>
                <Label Grid.Row="1" Grid.Column="0" Text="Phase left to learn" TextColor="#ffffff"></Label>
                <Label Grid.Row="1" Grid.Column="1" Text="36" FontAttributes="Bold" TextColor="#ffffff"></Label>
                <Label Grid.Row="2" Grid.Column="0" Text="Total Learning Time" TextColor="#ffffff"></Label>
                <Label Grid.Row="2" Grid.Column="1" Text="1.5h" FontAttributes="Bold" TextColor="#ffffff"></Label>
            </Grid>
        </Frame>
    </Grid>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 Xamarin iOS、Android 中以 Xamarin 形式设计以下网格视图 在Xamarin表单设计中需要帮助 xamarin 列表视图中的表单设计 如何使用 xamarin 形式的手风琴创建 Listview？ 如何在 Xamarin 表单中创建图像蒙版？ 如何以 xamarin 形式创建用户会话？ 如何在 Xamarin Form 中创建范围指示器？ 如何在Xamarin Form Android中创建数据表？ 如何打印Xamarin表单跨平台应用程序的当前UI Xamarin带有通用代码的独立UI设计
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM