A device-independent unit (DIU) sizes interface elements approximately consistently across displays with different resolutions and physical sizes. .NET MAUI uses DIUs for requested heights, widths, spacing, border thicknesses, shadow radii, and offsets instead of raw pixels. section 4.4.1 section 4.4.4
Use DIUs to make sizing decisions in .NET MAUI:
- Read a view’s actual Height and Width, but set requested dimensions with HeightRequest and WidthRequest. section 4.4.1
- Avoid relying on pixels: identical resolutions can appear on very different physical screen sizes. section 4.4.1
- Treat the convention as approximate: platforms generally use roughly 160 units per inch or 64 units per centimeter. section 4.4.1
Sizing a MauiTodo card
A Border can use StrokeThickness="3" and Padding="10", while its contained Grid uses WidthRequest="325". A Shadow can use Offset="20,20" and Radius="40"; these values are interpreted in DIUs.
Listing 4.4 Borders in MauiTodo
<DataTemplate>
<Border Stroke="{StaticResource Primary}" #1
StrokeThickness="3" #2
Padding="5" #3
Margin="0,10"> #4
<Border.StrokeShape> #5
<RoundRectangle CornerRadius="10"/> #6
</Border.StrokeShape>
<Grid WidthRequest="325"
ColumnDefinitions="1*, 5*"
RowDefinitions="Auto, 25"
x:Name="TodoItem">
<CheckBox VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Column="0"
Grid.Row="0" />
<Label Text="{Binding Title}"
FontAttributes="Bold"
LineBreakMode="WordWrap"
HorizontalOptions="StartAndExpand"
FontSize="Medium"
Grid.Row="0"
Grid.Column="1"/>
<Label Text="{Binding Due, StringFormat='{0:dd MMM yyyy}'}"
VerticalOptions="End"
Grid.Column="1"
Grid.Row="1"/>
</Grid>
</Border>
</DataTemplate>
Inspect the complete Border example to see DIU-based thickness, padding, margin, and requested width together. section 4.4.3
