CODEWITHSUNDEEP
androidxamarinxamarin.iosxamarin.androidxamarin.forms
ozmert75
ozmert75

Reputation: 123

Xamarin Forms RelativeLayout Using

I use FloatingActionButton on the listing page of my application, I also want to add a searchBar. But I could not show them that page. My codes and screenshot are down. How can I show the searchBar?

FAB Github

My Codes:

<ContentPage.Content>
        <RelativeLayout>
      <SearchBar
             x:Name="searchBar"
             Placeholder="Ara"
             />
            <ContentView
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
                <ListView
                    x:Name="list"
                    BackgroundColor="White">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextCell
                                Text="{Binding .}" />
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </ContentView>
            <fab:FloatingActionButton
                x:Name="fabBtn"
                Source="plus.png"
                Size="Normal"
                Clicked="Handle_FabClicked"
                NormalColor="Green"
                RippleColor="Red"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" />
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

enter image description here

Upvotes: 1

Views: 692

Answers (1)

therealjohn
therealjohn

Reputation: 2398

@Cheesebaron is correct. The issue is because the views are on top of each other. Instead, you need to add a constraint to the ContentView so that it's Y is below the searchBar. Consider something like this:

<ContentView
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, Property=Height, ElementName=searchBar}" />

Note the addition of the RelativeLayout.YConstraint to be based on the Height of the searchBar.

Upvotes: 1

Related Questions