CODEWITHSUNDEEP
.netxamlmaui
závislost
závislost

Reputation: 13

.NET MAUI Sizing

How to set a size of, for example a rectangle, in .NET MAUI? If I set Height="200", the rectangle is big for small phones and small for big phones. Is there a way to specify it in a percentage of the page size like in CSS?

Upvotes: 0

Views: 2822

Answers (2)

Stephen Quan
Stephen Quan

Reputation: 26149

This can be solved using AbsoluteLayout

<AbsoluteLayout>
    <Rectangle AbsoluteLayout.LayoutFlags="All"
               AbsoluteLayout.LayoutBounds="0.5,0.5,0.8,0.8"
               BackgroundColor="LightBlue" />
</AbsoluteLayout>

The position and sizing of the children can be either absolute or proportional positioning. By setting AbsoluteLayout.LayoutFlags="All" we are requesting proportional positioning for x, y, width, height. Contrary to the documentation, under proportional positioning the x, y refers to the position of the child center relative to the parent, not the upper-left corner. So, for your application, you would want it to be 0.5, 0.5. For the sizing, because you want 10% margin, that means the width, height should be set to 80%, i.e. 0.8, 0.8. Note that when using AbsoluteLayout positioning and sizing must be via LayoutFlags and LayoutBounds properties as HorizontalOptionals and VerticalOptions have no effect.

Another caveat with AbsoluteLayout is there is no clipping, but, clamping of coordinates. So, if you were to set x, y to 0, 0 your object would be clamped to the upper-left corner. Alternatively, if you were to set x, y to 1, 1 your object will be clamped to the lower-right corner. By setting x, y to 0.5, 0.5 your object will be centered.

[EDIT]

You can mix AbsoluteLayout with conventional components if you wrap them in a Grid, e.g.

<Grid>
    <AbsoluteLayout>
        <Rectangle AbsoluteLayout.LayoutFlags="All"
                   AbsoluteLayout.LayoutBounds="0.5,0.5,0.8,0.8"
                   BackgroundColor="LightBlue" />
    </AbsoluteLayout>
    <ScrollView>
        <VerticalStackLayout>
            <Image Source="dotnet_bot.png" />
            <Label Text="Hello, World!" />
            <Label Text="Welcome to &#10;.NET Multi-platform App UI" />
            <Button x:Name="CounterBtn" Text="Click me" />
        </VerticalStackLayout>
    </ScrollView>
</Grid>

Reference:

Upvotes: 1

Julian
Julian

Reputation: 8883

You can use a Grid for this. If you want a relative margin, define extra rows and columns and leave them empty. For relative sizing and margins to work, you'll need to use the * ("star") for the sizes of the rows and columns:

<Grid
    ColumnDefinitions="*,8*,*"
    RowDefinitions="*,8*,*">

    <BoxView
        Grid.Row="1"
        Grid.Column="1"
        HorizontalOptions="Fill" />

</Grid>

This will put a 10% margin on all sides and the content always takes up 80% of the available space.

Then, you can use the Fill LayoutOption, for example, instead of giving your Rectangle (or any other control) a relative size when placing it in the Grid.

Upvotes: 1

Related Questions