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

vx6bjr1n 于 2022-12-07 发布在其他

关注(0)|答案(1)|浏览(116)

我正在使用xamarin形式，有Android和IOS项目下面是我想创建相同的UI的图像.

我尝试了很多，但我不能得到相同的设计。我得到了这个设计在谷歌图像。我已经添加了我的代码和输出结果
下面是我的代码：

<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>

输出如下：

请帮帮我。先谢谢了。

xamarin

来源：https://stackoverflow.com/questions/73341817/how-to-create-ui-dashboard-design-in-xamarin-form

1条答案

按热度按时间

xkftehaa1#

快到了，试试这个：
更新第一个框架中的网格：
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>

赞(0）回复(0）举报 2022-12-07

我来回答

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

1条答案

相关问题

热门标签

最新问答