In Grid on a line XAML Controls

Question

Подскажите как можно поставить несколько элементов управление на одной строке

                    <Grid HeightRequest="60"
                      BackgroundColor="Red">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <StackLayout
                        Orientation="Horizontal"
                        HorizontalOptions="Fill"
                        Spacing="0"
                        Grid.Column="0" >
                        <Label Text="FROM"
                        BackgroundColor="Green" />
                        <DatePicker
                        
                        Format="D"
                        BackgroundColor="Aqua" >
                            <DatePicker.Effects>
                                <effects:PointerEffect />
                            </DatePicker.Effects>
                        </DatePicker>
                    </StackLayout>
                    <StackLayout
                        Orientation="Horizontal"
                        HorizontalOptions="Fill"
                        Spacing="0"
                        Grid.Column="1" >
                        <Label Text="UNTIL"
                          BackgroundColor="Chocolate" />
                        <DatePicker
                        
                        Format="D"
                        BackgroundColor="Beige" >
                            <DatePicker.Effects>
                                <effects:PointerEffect />
                            </DatePicker.Effects>
                        </DatePicker>
                    </StackLayout>
                    <SearchBar
                    Placeholder="SEARCH..."
                    
                    BackgroundColor="Black"
                    Grid.Column="2" />
                </Grid>

НУЖНО

В ДАННЫЙ МОМЕНТ

???

Answer 1

                ```
               <Grid 
                x:Name="Filter"
                HeightRequest="80" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Grid 
                      x:Name="Calendar"
                      HeightRequest="80"
                      Grid.Column="0"
                      HorizontalOptions="Start">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Grid 
                      x:Name="StartDate"
                      HeightRequest="80"
                      Grid.Column="0"
                      HorizontalOptions="Start">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Text="Du"
                           Grid.Column="0"
                           HorizontalTextAlignment="Center" />
                        <DatePicker

                            Grid.Column="1">
                            <DatePicker.Effects>
                                <effects:PointerEffect />
                            </DatePicker.Effects>
                        </DatePicker>
                    </Grid>

                    <Grid 
                      x:Name="EndDate"
                      HeightRequest="80"
                      Grid.Column="1"
                      HorizontalOptions="Start">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Text="Au"
                           Grid.Column="0"
                           HorizontalTextAlignment="Center" />
                        <DatePicker
                            BackgroundColor="Red"
                            CharacterSpacing="0"
                            FontSize="Micro"

                            Format="D"
                            Grid.Column="1">
                            <DatePicker.Effects>
                                <effects:PointerEffect />
                            </DatePicker.Effects>
                        </DatePicker>
                    </Grid>
                </Grid>
                <SearchBar
                Placeholder="Search..."

                Grid.Column="2" />
            </Grid>

возможное некое решение, при развернутом экране, но если уменьшить размер экрана, то картинка портится


[![развернутый экран][1]][1]


[![уменьшенный экран][2]][2]


  [1]: https://i.stack.imgur.com/LG08f.png
  [2]: https://i.stack.imgur.com/JobCa.png

//не получается вставить скриншот

Answer 2

вопрос закрыт, предлагаю Вашему вниманию решение, которое позволяет реализовать запрос и благодаря FlexLayout при изменении экрана эллементы становятся один за другим в столбик

                    <FlexLayout Direction="Row"
                            Wrap="Wrap"
                            AlignItems="Start"
                            JustifyContent="SpaceBetween">
                    <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="StartAndExpand"
                                 Spacing="0"
                                 Margin="8">
                        <Label Text="From"
                               VerticalOptions="Center"
                               VerticalTextAlignment="Center" />
                        <DatePicker Date="{Binding DateFrom}"
                                    FontSize="Micro"
                                    Format="D"
                                    Grid.Column="1">
                        </DatePicker>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal"
                                HorizontalOptions="StartAndExpand"
                                Spacing="0"
                                Margin="8">
                        <Label Text="From"
                               VerticalOptions="Center"
                               VerticalTextAlignment="Center" />
                        <DatePicker Date="{Binding DateTo}"
                                    FontSize="Micro"
                                    Format="D"
                                    Grid.Column="1">
                        </DatePicker>
                    </StackLayout>
                    <StackLayout HorizontalOptions="EndAndExpand"
                                FlexLayout.AlignSelf="End"
                                WidthRequest="332"
                                Margin="8">
                        <SearchBar Placeholder="Search..."
                                   Text="{Binding Search}"/>
                    </StackLayout>
                </FlexLayout>

БЛОГ НА HUSL

In Grid on a line XAML Controls

Ответы (2 шт):