In Xamarin Forms I Want To Overlap A Control Center On Top Of Xamarin Forms Map But Couldn’t Expand The Map Under The Control Center

Question

In the cross-platform app that I’m developing on Xamarin Forms, I want to achieve a map look where the map covers the whole screen and a semi-transparent control center covers on top of it at a section in the bottom of the screen as in Apple Maps.

My current code looks like this. I have my desired map view and control center view but I can't get to control center to overlap on top of my map.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:pan ="http://xamarin.com/schemas/2014/forms"  
             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
             mc:Ignorable="d"
             x:Class="GreenPath.MainPage">
    
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="1.8*"/>
        </Grid.RowDefinitions>
        <yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" Grid.Row="1" HorizontalOptions="FillAndExpand">
            <StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical">
                <Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
                <Label  Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
                <SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
                <Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
                <Grid Grid.Row="1" ColumnSpacing="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
                </Grid>
            </StackLayout>
        </yummy:PancakeView>
        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
        </StackLayout>
        </Grid>

        </ContentPage>

David Jesus · Answer 1 · 2020-06-29T04:54:18.790

1

Try putting the StackLayout that contains the map before the yummy:PancakeView (Also remove the Grid.Row="1")

It is similar at this answer.

edited Jun 29 '20 at 04:54

answered Jun 29 '20 at 04:47

David Jesus

1,981
2
29
34

After doing what you told and adding the backgroud color I want the control center covered the whole screen I want it to be just in the bottom. – CANER MURZOGLU Jun 29 '20 at 11:29

score 1 · Accepted Answer · answered Jun 29 '20 at 11:47

After reading what David Jesus recomended I did what he said but unfortunately it was't the answer that I was looking for but I followed his advices and did some cahnges myself. In conclusion, I put StackLayout at the top like David said but ı didn't remove Grid.Row="1" and I added the desired height in yummy:PancakeView as TranslationY="550". My final code is:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:pan ="http://xamarin.com/schemas/2014/forms"  
             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
             mc:Ignorable="d"
             x:Class="GreenPath.MainPage">

    <Grid>
        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
        </StackLayout>
        <yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" HorizontalOptions="FillAndExpand" BackgroundColor="White" TranslationY="550">
            <StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="5">
                <Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
                <Label  Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
                <SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
                <Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
                <Grid Grid.Row="1" ColumnSpacing="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
                </Grid>
            </StackLayout>
        </yummy:PancakeView>

    </Grid>

</ContentPage>

Be careful when using `TranslationY="550"`, this may behave very differently on other devices. — David Jesus, Jun 29 '20 at 15:50

In Xamarin Forms I Want To Overlap A Control Center On Top Of Xamarin Forms Map But Couldn’t Expand The Map Under The Control Center

2 Answers2