AbsoluteLayout question

I have an AbsoluteLayout with 2 StackLayouts as children ("page" and "popup"), as shown below. When a button is pressed, I set the popup visibility to true. I would expect this StackLayout (popup) to completely show above the other StackLayout (page), however it only shows partially over the lower StackLayout (as shown in the attached picture) Am I doing something wrong?

<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <StackLayout x:Name="popup" IsVisible="False" Opacity="0.3" BackgroundColor="Black" Padding="30" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
      <StackLayout Orientation="Vertical" BackgroundColor="White">
        <!-- Popup Content Here -->
    <StackLayout x:Name="page" Orientation="Vertical" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
      <SearchBar x:Name="searchBar" Placeholder="Search" TextChanged="searchBar_TextChanged"></SearchBar>
      <ActivityIndicator x:Name="activity" IsRunning="true" Color="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />


  • MikePetersMikePeters USMember ✭✭

    After more testing, it appears the listview is the problem. I can put any other element into my "page" stacklayout and the "popup" stacklayout will cover it. But it will never cover the listview. This seems to be a bug, unless I'm missing something here?

  • MikePetersMikePeters USMember ✭✭

    To work around this "bug" I just called absolute.RaiseChild(popup) for force it to the top. I guess you can't rely on the order of objects in XAML.

    Here is another strange inconsistency that I just encountered today. How come when I put a padding on this stacklayout, the padding gets applied to objects within the grid? The grid has its own padding, rowspacing, columnspacing set to 0, but when I set the outer stacklayout padding to 20, it gets applied to objects in the grid!

    I wish this stuff wasn't so buggy and/or unintuitive...

    <StackLayout Padding="20">
              <Grid Padding="0" RowSpacing="0" ColumnSpacing="0">
                <Label Text="Order #:" Grid.Row="0" Grid.Column="0" FontSize="15" FontAttributes="Bold" /><Label Text="{Binding Order.OrderNumber}" Grid.Row="0" Grid.Column="1" FontSize="15" FontAttributes="Bold" /><Image Source="{Binding Order.OrderState, Converter={StaticResource orderIconConverter}}" Grid.Row="0" Grid.Column="2" WidthRequest="25" HeightRequest="25"></Image>
                <Label Text="Customer:" Grid.Row="1" Grid.Column="0" FontSize="14" /><Label Text="{Binding Order.Name}"  Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" FontSize="14" />
                <Label Text="{Binding Order.CustomerNumber}" Grid.Row="2" Grid.Column="1" FontSize="14" />
                <Label Text="Order Date:" Grid.Row="3" Grid.Column="0" FontSize="14" /><Label Text="{Binding Order.OrderDate, StringFormat='{0:g}'}" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" FontSize="14" />
                <Label Text="Delivery Date:" Grid.Row="4" Grid.Column="0" FontSize="14" /><Label Text="{Binding Order.DeliveryDate, StringFormat='{0:g}'}" Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" FontSize="14" />
                <Label Text="Total:" Grid.Row="5" Grid.Column="0" FontSize="14" /><Label Text="{Binding Order.Total, StringFormat='{0:C2}'}" Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" FontSize="14" />
                <Label Text="Tax:" Grid.Row="6" Grid.Column="0" FontSize="14" /><Label Text="{Binding Order.TaxTotal, StringFormat='{0:C2}'}" Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2" FontSize="14" />
  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    As you already found out, the z-order of elements in an AbsoluteLayout is by the order you added them in. So you just need to move your popup below page in the xaml and it should cover it.

Sign In or Register to comment.