What is the unit of value which we use in .net maui-CodePudding

<Grid  RowDefinitions="Auto,Auto,*,Auto"
          ColumnDefinitions=".2*,.2*,.5*,.1*"/>

Here I have defined a grid with value .2*,.2*,.5*,.1* what is the unit of these values and also for border

 <Style TargetType="Border" x:Key="Border_Style">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Stroke" Value="Gray"/>
            <Setter Property="StrokeThickness" Value=".5"/>
        </Style>

what will be the unit of this border stroke thickness?

<Label VerticalOptions="Center" AbsoluteLayout.LayoutBounds="0,0,1,.1"
                                       AbsoluteLayout.LayoutFlags="HeightProportional,PositionProportional,SizeProportional"

what is the unit of these absolutelayout layoutbounds?

CodePudding user response：

Part 1: Sizes

Size units in .NET MAUI (just like in Xamarin.Forms) are using an internal unit type similar to Device Independent Units (DIU). There is no fixed size, it depends on the Operating System, the resolution and the size of the screen. It is roughly described here and applies to Xamarin.Forms as well as MAUI:

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter05

Part 2: AbsoluteLayout

Inside an AbsoluteLayout everything is positioned relative to the parent. Therefore, the LayoutBounds attached property of type Rect (PositionX, PositionY, SizeX, SizeY) is used to determine where an item is supposed to be placed and what its size is supposed to be.

The sizing depends on the LayoutFlags, though. E.g.:

AbsoluteLayout.LayoutFlags="None" AbsoluteLayout.LayoutBounds="0,0,100,50" means that the item is positioned at the top-left corner and has a width of 100 and a height of 50 (sizes as described above).

If you specify different flags, this changes depending on which flags you use. If you specify proportional sizing, for example, then the values are interpreted as percentages of the available space that the AbsoluteLayout covers:

AbsoluteLayout.LayoutFlags="SizeProportional" AbsoluteLayout.LayoutBounds="0,0,1,.5" means that the item is positioned at the top-left corner and has a width of 100% and a height of 50% of the space.

If you specify AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.5,0.5,.25,.25" it means that the item is positioned in the center and has a width of 25% and a height of 25% of the space.

This is just a rough overview with a few examples. You may want to read the official documentation about this as well: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/absolutelayout?view=net-maui-7.0#proportional-positioning-and-sizing

Part 3: Grid

Using absolute values for Grid.ColumnDefinitions and Grid.RowDefinitions means to use the above mentioned internal units. You can also specify relative units using * and Auto, where Auto will always try to adjust the size to its content and * will take the rest. E.g.:

<Grid RowDefinitions="Auto,*"
      ColumnDefinitions="*,2*,3*"/>

Here, you will have two rows, one that tries to fit the content and another one that takes the rest of the available space. You will also have three columns, one that takes 1/6 of the space, another one that takes 1/3 of the space and third one that takes 1/2 of the available space.

This is because 1 2 3 = 6, so you're effectively dividing the entire width of the Grid into six parts and then you assign a relative portion of that to each column, so that * becomes one part of the whole, 2* becomes two parts of the whole and 3* becomes three parts of the whole. The same applies to fractions like in your example.