CODEWITHSUNDEEP
.netmaui
Wasyster
Wasyster

Reputation: 2535

.net maui how to draw a layout from image

I have a design like the image bellow:

enter image description here

I am having a problem with the white part. What would be the best practice to draw it.

I did something like this, but am not sure, this is the best approach.

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

This gives me something like this:

enter image description here

But I do not like playing with margin and padding.

thnx

Upvotes: 0

Views: 147

Answers (1)

Liqun Shen-MSFT
Liqun Shen-MSFT

Reputation: 8220

Seems there are many ways, just share one here,

I will put the frame into a Grid Layout and set the proportion for it

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

In the Frame I will use a AbsoluteLayout to Proportional positioning and sizing each children.

Hope it helps!

Upvotes: 0

Related Questions