CODEWITHSUNDEEP
xamlxamarin.forms
Abozanona
Abozanona

Reputation: 2285

StackLayout is not viewable inside RelativeLayout

I'm trying to add a floating action button to my page, to do so I wrapped my stack layout with a relative layout and add the FAB in the relative layout.

  <ContentPage.Content>
    <RelativeLayout BackgroundColor="Transparent">
      <fab:FloatingActionButton
              x:Name="fabBtn"
              Source="plus.png"
              Size="Normal"
              Clicked="Handle_FabClicked"
              NormalColor="Green"
        RippleColor="Blue"
              RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}"
              RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" />
      <StackLayout
        Spacing="10"
        Padding="5"
        VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
              RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
        <Label Text="Latest news/activities" FontSize="Medium" VerticalOptions="Start"/>
        <ScrollView VerticalOptions="CenterAndExpand">
          <ListView
            x:Name="lsvActivities"
            HasUnevenRows="True">
            <ListView.ItemTemplate>
              <DataTemplate>
                <ViewCell>
                  <StackLayout Orientation="Horizontal" Padding="3">
                    <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                      <Label Text="{Binding title}" VerticalOptions="StartAndExpand"/>
                      <Label Text="{Binding date}" VerticalOptions="End"/>
                    </StackLayout>
                    <StackLayout HorizontalOptions="End" WidthRequest="100" HeightRequest="100" BackgroundColor="Blue">
                      <Label Text="image here"/>
                    </StackLayout>
                  </StackLayout>
                </ViewCell>
              </DataTemplate>
            </ListView.ItemTemplate>
          </ListView>
        </ScrollView>
        <Label Text="Good Mording" FontSize="Large" VerticalOptions="End" HorizontalOptions="Center"/>
      </StackLayout>
    </RelativeLayout>
  </ContentPage.Content>

But it locks like the StackLayout is out of the boundary of the layout or something.

enter image description here

What is problem? and how I can display both the FAB and the StackLayout, where the floating action button should always be on top of the StackLayout elements

Upvotes: 0

Views: 1039

Answers (1)

DavidS
DavidS

Reputation: 2934

Are you trying to have the StackLayout occupy the entire screen (with the button on top)? If so, this part isn't going to do that:

RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">

That is placing the top left corner of the StackLayout at the bottom right of the screen.

Per the Xamarin docs:

Unlike AbsoluteLayout, RelativeLayout does not have the concept of the moving anchor and does not have facilities for positioning elements relative to the bottom or right edges of the layout.

In other words, AbsoluteLayout will try to adjust for you if you place something at the bottom right corner. RelativeLayout won't.

You probably want the constraints noted above on the StackLayout to be WidthConstraint and HeightConstraint, and set the XConstraint and YConstraint to 0.

And as Sven-Michael says, drop the ScrollView.

EDIT

The XAML should look like:

RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0}"

Upvotes: 3

Related Questions