Responsive MAUI Desktop App

Question

Hi,

How can I have a responsive XAML in MAUI Desktop Apps so when the user changes the screen size it will listen to the changes and automatically adjust?

Thanks,

Jassim

Answer 1

Hello,

In MAUI, you can dynamically adjust the size ratio of elements using Grid layouts to achieve responsive layout

The .NET Multi-platform App UI (.NET MAUI) Grid, is a layout that organizes its children into rows and columns, which can have proportional or absolute sizes.

Please refer to Grid to get more details.

For instance, you could use the following code to set two buttons with a width ratio of 1:2, and when the window size changes, the size of the button will also change.

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Text="btn1"/>
        <Button Grid.Column="1" Text="btn2"/>
</Grid>

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.