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

Share Improve this question Follow edited Nov 23, 2024 at 6:45 Uddyan Semwal 75611 gold badge88 silver badges2525 bronze badges asked Nov 18, 2024 at 10:23 NicoNico 58211 gold badge66 silver badges2222 bronze badges 4

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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);
    }
}