Выравнивание панели поиска по правому центру

Question

Я пытаюсь добавить панель поиска к моей «строке меню».Это должно быть справа (х) в середине бара (у), но он продолжает идти так:

Это частьмой код:

            <RelativeLayout BackgroundColor="LightBlue" VerticalOptions="Start" HeightRequest="170" HorizontalOptions="FillAndExpand" >

                <RelativeLayout BackgroundColor="White" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=.1,Constant=0}" HeightRequest="40" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" >
                    <BoxView BackgroundColor="Black" HeightRequest="1" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=0,Constant=0}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"/>
                    <Button Text ="H" WidthRequest="30" HeightRequest="30" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0.5, Constant=0}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=1}" />

                    <SearchBar x:Name="searchcustomer" Placeholder="Search" HeightRequest="30" WidthRequest="100" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0.5, Constant=0}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=1, Constant=0}"/>
                   
                    <BoxView BackgroundColor="Black" HeightRequest="1" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=1,Constant=0}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"/>
                </RelativeLayout>


                <StackLayout
         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
                    <StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand" HorizontalOptions="Center" Spacing="50">
                        <Label x:Name="NewsButton" Text="News" Font="Bold, 24" TextColor="white"/>
                        <Label x:Name="TaskButton" Text="Tasks" Font="Bold, 24" TextColor="white"/>
                    </StackLayout>
                </StackLayout>

            </RelativeLayout>

Кто-нибудь знает, как это исправить?

Спасибо!

Answer 1

Вы можете использовать Grid вместо RelativeLayout. Обратитесь к следующему коду.

<RelativeLayout BackgroundColor="LightBlue" VerticalOptions="Start" HeightRequest="170" HorizontalOptions="FillAndExpand" >

  <Grid >
    <Grid.RowDefinitions>
        <RowDefinition Height="1" />
        <RowDefinition Height="*" />
        <RowDefinition Height="1" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="60" />
       <ColumnDefinition Width="*" />                    
    </Grid.ColumnDefinitions>

    <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Black" HeightRequest="1" />

    <Button  Grid.Row="1" Grid.Column="0" Text ="H" HeightRequest="40"  />

    <SearchBar Grid.Row="1" Grid.Column="1"  x:Name="searchcustomer" Placeholder="Search" HeightRequest="30" HorizontalTextAlignment="End"/>

    <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Black" HeightRequest="1" />

  </Grid>

   //...

</RelativeLayout>

И он будет выглядеть следующим образом: