.net maui如何从图像绘制布局

dffbzjpn  于 2023-11-20  发布在  .NET
关注(0)|答案(1)|浏览(182)

我有一个设计像下面的图像:


的数据
我在画白色部分时遇到了问题。画它的最佳方法是什么?
我做了类似的事情,但不确定,这是最好的方法。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:MeterReader.Controls"
             xmlns:viewModel="clr-namespace:MeterReader.ViewModels"
             x:Class="MeterReader.Pages.LoginPage"
             x:DataType="viewModel:LoginPageViewModel"
             Shell.NavBarIsVisible="False"
             Style="{x:StaticResource ContentPage}">

    <Frame CornerRadius="40" Margin="0,100,0,-50" Padding="10,0,10,100">
        <StackLayout VerticalOptions="EndAndExpand" HorizontalOptions="Start" Orientation="Vertical"
                 BackgroundColor="White" Spacing="25">
            <VerticalStackLayout HorizontalOptions="FillAndExpand">
                <Label Text="URL szerver" />
                <Frame CornerRadius="25">
                    <controls:TextBox x:Name="serverUrl" Text="{Binding ServerUrl}" Source="." FieldName="ServerUrl" />
                </Frame>
                <Label Text="{Binding ErrorMessage, Source={x:Reference password}}"
                       IsVisible="{Binding IsValid, Source={x:Reference password}}"
                       Style="{x:StaticResource ValidationError}" />
            </VerticalStackLayout>
            <VerticalStackLayout HorizontalOptions="FillAndExpand">
                <Label Text="Felhasznalonev" />
                <Frame CornerRadius="25">
                    <controls:TextBox x:Name="name" Text="{Binding Name}" Source="." FieldName="Name" />
                </Frame>
                <Label Text="{Binding ErrorMessage, Source={x:Reference password}}"
                       IsVisible="{Binding IsValid, Source={x:Reference password}}"
                       Style="{x:StaticResource ValidationError}" />
            </VerticalStackLayout>
            <VerticalStackLayout HorizontalOptions="FillAndExpand">
                <Label Text="Jelszo" />
                <Frame CornerRadius="25">
                    <controls:TextBox x:Name="password" Text="{Binding Password}" Source="." FieldName="Password" />
                </Frame>
                <Label Text="{Binding ErrorMessage, Source={x:Reference password}}"
                       IsVisible="{Binding IsValid, Source={x:Reference password}}"
                       Style="{x:StaticResource ValidationError}" />
            </VerticalStackLayout>
        </StackLayout>
    </Frame>

</ContentPage>

字符串
这给了我这样的东西:



但我不喜欢玩边距和填充。
thnx

tv6aics1

tv6aics11#

似乎有很多方法,就在这里分享一个,
我将把框架到一个Grid布局,并设置它的比例

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="4*" />

    </Grid.RowDefinitions>
    <Frame Grid.Row="1" CornerRadius="40" >
        <AbsoluteLayout 
             BackgroundColor="White" >
            <VerticalStackLayout   AbsoluteLayout.LayoutBounds="0.5,0.2,100,25"
             AbsoluteLayout.LayoutFlags="PositionProportional" >
            ...
            </VerticalStackLayout>
            <VerticalStackLayout AbsoluteLayout.LayoutBounds="0.5,0.4,100,25"
             AbsoluteLayout.LayoutFlags="PositionProportional" >
               ...
            </VerticalStackLayout>
            <VerticalStackLayout AbsoluteLayout.LayoutBounds="0.5,0.6,100,25"
             AbsoluteLayout.LayoutFlags="PositionProportional" >
                ...
            </VerticalStackLayout>
        </AbsoluteLayout>
    </Frame>
</Grid>

字符串
在框架中,我将使用AbsoluteLayout来按比例定位和调整每个孩子的大小。
希望有帮助!

相关问题