Create a layered Page/layering controls

GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭
edited October 2015 in Xamarin.Forms

Maybe I'm not searching for the right thing here, but by the life of me I cannot find a good sample of how to layer one control over the other, in XAML.

For instance I have a map control and I want to add a box with some data and buttons on top of it, much like how RunKeeper did;

I've did some experimenting with the Relative- and AbsoluteLayout, but I can't quite figure out how to do it.
Is there anyone who could give me a little push in the right direction with this?

Here is what I have so far;

 <StackLayout Orientation="Vertical">
   <maps:Map x:Name="MapControl" HasZoomEnabled="True" IsShowingUser="True" MapType="Street"></maps:Map>
   <Grid>
     <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*" />
       <ColumnDefinition Width="*" />
       <ColumnDefinition Width="*" />
     </Grid.ColumnDefinitions>

     <Button Grid.Column="0" Text="{Binding ButtonCaption}" Command="{Binding StartStopTripCommand}" />
     <Button Grid.Column="1" Text="Verstuur" Command="{Binding SendTripCommand}" />
     <Label Grid.Column="2" Text="{Binding CurrentSpeedDescription}" />
   </Grid>
 </StackLayout>

And the grid would be floating at the top, instead of now being stacked below.

Best Answer

Answers

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    Wow. Why didn't I just think of that, got caught up in the details I guess.. Thank a bunch! :)

  • Umar3xUmar3x FRMember ✭✭✭

    Hello,

    Is it possible to have an exemple or a something to know how you get it working with the grid ? :)

    Thanks.

  • @adamkemp said:
    The easiest way by far to put one control on top of another is by placing them both in the same Grid occupying the same cell. The later one will be on top of the earlier one.

    EDIT: In case it's not clear, just replace your StackLayout with a Grid.

    Dear Adam!
    I had experience with your solution, to have one grid with one column and one row, and that grid has two children and they have the same grid.column="0" grid.row="0", but I ran into a problem, so below i'll describe when you could use it, and couldn't.

    When to use:
    You have your login page, and you want to set background image, without any controls, any tap gasture on first child of grid, so you could use that solution

    <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <!--First Child-->
            <StackLayout Grid.Row="0" Grid.Column="0">
                <Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="Assets/StoreLogo.png" />
            </StackLayout>
            <!--Second Child-->
            <StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="Center"  VerticalOptions="Center">
                <Button Text="Login" />
                <Button Text="Password" />
            </StackLayout >
        </Grid>
    

    That simple code will works well!

    When do not use:
    If you add some controls, or tap gesture recognizer, in general - some clickable object to first child (background), it will works on UWP and Android, but on IOS it wont work, because second child overlap first. So you can't tap through second child.

    <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            **<!--First Child-->**
            <StackLayout Grid.Row="0" Grid.Column="0">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="OnTap" />
                </StackLayout.GestureRecognizers>
                <Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="Assets/StoreLogo.png" />
            </StackLayout>
            **<!--Second Child-->**
            <StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="Center"  VerticalOptions="Center">
                <Button Text="Login" />
                <Button Text="Password" />
            </StackLayout >
        </Grid>
    

    So, on IOS this code wont work, but still on Android and UWP it works well

  • adamkempadamkemp USInsider, Developer Group Leader mod

    You may be able to attach the gesture recognizer to the Grid itself instead.

Sign In or Register to comment.