I am looking for a way to achieve padding or margin by percentage in .NET MAUI. In CSS, this can be done easily using a rule like padding: 0 5%;. Is there a similar approach or best practice in .NET MAUI for setting padding or margin based on percentages?"

I am looking for a way to achieve padding or margin by percentage in .NET MAUI. In CSS, this can be done easily using a rule like padding: 0 5%;. Is there a similar approach or best practice in .NET MAUI for setting padding or margin based on percentages?"

• maui

• The direct answer to the question is "NO". You can "hack" it with Grid. You can do calculations at runtime and change it. None of this will be simple and without side effects. – H.A.H. Commented Nov 18, 2024 at 12:02
• Btw, if you decide to go with the Grid, and you have something like Image, remember to set the Margin to negative ( -2 ) on the image, otherwise you will have problems with the outside most pixel of the image. (Yes, it is that bad.) – H.A.H. Commented Nov 18, 2024 at 12:11
• Yes, looks like using Grid with different * as the width definitions would be the most direct and a simple solution. – Nico Commented Nov 18, 2024 at 23:41
• 1 You can also use CommunityToolkit.Maui's MathExpressionConverter. HeightRequest="{Binding Parent.Height, Source={RelativeSource Self}, Converter={StaticResource MathExpressionConverter}, ConverterParameter='x*9/10'}" – Stephen Quan Commented Nov 19, 2024 at 8:13

1 Answer 1

Using Grid or StackLayout with Dynamic Sizing

You can use a Grid or StackLayout or FlexLayout to create responsive designs. Here’s how you can manage padding and margins:

Example with Grid

<ContentPage xmlns="http://schemas.microsoft/dotnet/2021/maui"
             x:Class="YourNamespace.MainPage">

    <Grid Padding="5%" Margin="5%">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Label Text="Header"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

        <Label Text="Main Content"
               Grid.Row="1"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="FillAndExpand"
               Margin="5"/>
    </Grid>
</ContentPage>

Using OnSizeAllocated for Dynamic Padding/Margin

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);
        
        // Calculate 5% padding
        double padding = width * 0.05;

        // Apply the padding to a ContentView or any other layout
        myContentView.Padding = new Thickness(padding);
        myContentView.Margin = new Thickness(padding);
    }
}