Touch event on a control under a Transparent Grid

BacNongTienBacNongTien VNMember ✭✭

Hi all,

I have a Relative layout like this.

  1. Google Map full screen
  2. Grid with full screen (BackgroundColor="Transparent"), inside this grid, I have a stacklayout and I set VerticalOptions="End". This also means my control box is always at the bottom of the screen and the google map is behind. Remember my control box height is dynamic. Not fixed

My issue is I want to zoom, drag the google map. But the Grid has a bigger z-index (althought it's Transparent) so I could not touch any event to my google map.

If I set InputTransparent="True" to grid. I can touch the google map but I cannot touch to my control box...

Do you have any suggestion with that kind of layout?

Thank you so much,

Best Answer

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    Well, do you want to get the Touch events of google map and grid at the same time?

  • BacNongTienBacNongTien VNMember ✭✭

    @jezh said:
    Well, do you want to get the Touch events of google map and grid at the same time?

    The google map width, height is full to the screen
    The grid width, height is full to the screen but BackgroundColor=Transparent

    In the grid, I set my controlbox aligned to bottom of screen. Normally, the controlbox height is about 1/2 to the grid parent.

    I can describe like this.

    Googlemap & grid are put in the relativelayout.

  • jezhjezh Member, Xamarin Team Xamurai

    Could you please post the code if the layout?
    And Since the controlbox height is about 1/2 to the grid parent,why are you set the grid width, height to the full screen ?

  • BacNongTienBacNongTien VNMember ✭✭

    @jezh said:
    Could you please post the code if the layout?
    And Since the controlbox height is about 1/2 to the grid parent,why are you set the grid width, height to the full screen ?

    I can say, the google map is in the background, user can touch like zoom in, zoom out the map. And at the bottom of the screen, I have a control box, it contains some buttons and text fields allow user to type value then click Next - Back. When you click Next - Back. The layout would be changed, so the control box height will be adjusted according to the current step.

    So with this kind of layout, do you have any recommendation?

    I don't have my code now, but I can give you a screen like this.

    Remember, the control box height is not fixed. (it depends on the current step when clicking Next - Back button)

  • jezhjezh Member, Xamarin Team Xamurai
    edited April 16

    Do you mean the layout of the control box will been changed when you click the Next - Back button ?
    If that's the case, why not add a floating button on the Map , when you need the control box to type value, you just click the floating button to show the the control box, and hide it when you don't need it.

    In this way, the UI will also be beautiful and the floating button will not cover a large part of the Map.

  • BacNongTienBacNongTien VNMember ✭✭

    @jezh said:
    Do you mean the layout of the control box will been changed when you click the Next - Back button ?
    If that's the case, why not add a floating button on the Map , when you need the control box to type value, you just click the floating button to show the the control box, and hide it when you don't need it.

    In this way, the control box will also be beautiful and will not cover a large part of the Map.

    it's a requirement from our customer. It would be look like this.

  • jezhjezh Member, Xamarin Team Xamurai
    edited April 16

    In this case ,you don't need to set the height of this control box to full screen, just wrap the content of the layout .
    I have created a simple demo to simulate this layout.
    The effect image is as follows(the yellow box is the map, the pink is the control box ):

    The main code is

           <ContentPage.Content>
        <RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <BoxView Color="Yellow"                      
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 1}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 1}" />
    
            <StackLayout   VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" Margin="10"
                BackgroundColor="pink"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 1}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 1}" 
                Orientation="Vertical">
                <Entry IsPassword="False" Placeholder="name" x:Name="nameEntry"/>
                <Entry IsPassword="true" Placeholder="Password"
                       x:Name="pwdEntry"
                       />
                <Label Text="my test text!"
                       x:Name="label"
                    VerticalOptions="CenterAndExpand"
                     HorizontalOptions="Center"/>
                <Button Text="Click!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                        Clicked="Button_Clicked"
                 />
            </StackLayout>
        </RelativeLayout>
    </ContentPage.Content>
    

    class MyPage : ContentPage

     bool isShow = false;
     private void Button_Clicked(object sender, EventArgs e)
        {
            if (isShow)
            {
                pwdEntry.IsVisible = true;
                label.IsVisible = true;
                isShow = false;
            }
            else {
                pwdEntry.IsVisible = false;
                label.IsVisible = false;
                isShow = true;
            }
        }
    
  • BacNongTienBacNongTien VNMember ✭✭

    @jezh said:
    In this case ,you don't need to set the height of this control box to full screen, just wrap the content of the layout .
    I have created a simple demo to simulate this layout.
    The effect image is as follows(the yellow box is the map, the pink is the control box ):

    The main code is

       <ContentPage.Content>
        <RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    
            <BoxView Color="Yellow" 
              RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 1}"
              RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 1}" />
    
            <StackLayout   VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" Margin="10"
                BackgroundColor="pink"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 1}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 1}" 
                Orientation="Vertical">
                <Entry IsPassword="False" Placeholder="name" />
                <Entry IsPassword="true" Placeholder="Password" />
                <Label Text="my test text!"
                    VerticalOptions="CenterAndExpand"
                     HorizontalOptions="Center"/>
                <Button Text="Click!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                 />
            </StackLayout>
        </RelativeLayout>
    </ContentPage.Content>
    

    Hi Jezh,

    It looks nice, I haven't tried it yet but I have a question

    In the stacklayout, I can see the width and height of it are being set Factors = 1

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

    Does it mean, stacklayout size is being set as the same with the yellow BoxView?

    But in the image, it looks smaller (wraps content). So why is that?

    Is that because of stacklayout? And by this way, we can touch the BoxView?

    Thanks & best regards,

  • BacNongTienBacNongTien VNMember ✭✭

    @jezh said:
    If I don't add the property ( VerticalOptions="EndAndExpand"), the stacklayout size is being set as the same with the yellow BoxView , just as follows.

    But when we add the property VerticalOptions="EndAndExpand", it will be what we want.

    In this condition, we could touch the BoxView because the stacklayout does not cover the map.

    It's so awesome. Thank you so much Jezh!

  • jezhjezh Member, Xamarin Team Xamurai

    You're welcome. I'm glad to be able to help you.

Sign In or Register to comment.