FlexLayout - Filters and ListView - Not working - layout

Question

I would like to do a responsive design for my page, with high resolution, it would be :
And for lower resolution, it would be :
But I have this for high resolution (we can see all the space between the filters and the listview) :
I have this for a low resolution (the search bar has disapeared, and a very large space between my filters) :
Herebelow my code :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:entities="clr-namespace:XXX"
xmlns:services="clr-namespace:XXXX"
x:Class="Exxxxx"
Title="Test">
<ContentPage.Resources>
<ResourceDictionary>
<toolkit:EnumToIntConverter x:Key="EnumToIntConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<FlexLayout Direction="Row" Wrap="Wrap" Margin="30">
<ContentView>
<FlexLayout Direction="Row" Wrap="Wrap">
<Picker Title="Duration" Margin ="0, 0, 30, 0" WidthRequest="150" ItemsSource="{Binding AllDurations}" SelectedIndex="{Binding SelectedDuration, Converter={StaticResource EnumToIntConverter}, ConverterParameter={x:Type services:EFilterDuration}}"/>
<Picker Title="Zone" Margin ="0, 0, 30, 0" WidthRequest="150" ItemsSource="{Binding AllZones}" SelectedIndex="{Binding SelectedZone, Converter={StaticResource EnumToIntConverter}, ConverterParameter={x:Type entities:EZone}} " />
<SearchBar WidthRequest="250" Placeholder="Search tests..." SearchCommand="{Binding SearchCommand}" VerticalOptions="Start" HorizontalOptions="End" FlexLayout.Grow="1"/>
</FlexLayout>
</ContentView>
<ListView ItemsSource="{Binding Workouts}" HorizontalOptions="Fill" Margin="0, 20, 0 ,0" FlexLayout.Grow="1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<FlexLayout
Wrap="Wrap"
HorizontalOptions="Fill"
HeightRequest="80"
Margin="5, 0, 5, 10"
BackgroundColor="White">
<VerticalStackLayout Margin="10, 0, 0, 0">
<Label Text="Test"/>
</VerticalStackLayout>
</FlexLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</FlexLayout>
</ContentPage>
I don't understand what I'm doing wrong.
Thanks in advance.

Answer 1

<FlexLayout Direction="Row" Wrap="Wrap" Margin="30">
You are not aligning, justifying or doing anything here.
https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/flexlayout?view=net-maui-7.0
You can change how items are distributed between main and off axis. The default value being "Stretch". This is why you are getting such results.
However, I do not think that this is the best way to handle different layouts, tomorrow, you will want part of this interface to not show at all, because it is not that important. What will you do? Start hiding VisualElements one by one?