How can I design the below attached Image? on click two button should scroll in xamarin.forms

I am able to make the scroll those two yellow buttons on click, but I am not able to position the tap in center and those two yellow button from the edge of the screen. these tap button as well as two yellow buttons should be infront of an image which is in orange section.

I have made the same in xamarin.android but i want to make it in xamarin.forms which I am not able to do so.

Answers

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    I would use a RelativeLayout.

  • JSparrowJSparrow USMember

    Thomas sir,
    I have been trying this but i could not make it would you please share some working code with me..

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    Please show us what you have done so far. As stated otherwise, nobody will write your App for you.

  • JSparrowJSparrow USMember

    I made the following thing by below code, but the problem is the "posting section goes here" also comes up which should be like below The HP image.....

    attached is the images of output on click hide and visible...

    using System;

    using Xamarin.Forms;

    namespace againtest
    {
    public class first : ContentPage
    {
    public first ()
    {
    var img = new Image () {Source = "hp.jpg", WidthRequest = 150, HeightRequest = 150 };
    Button tp = new Button { WidthRequest = 40, HeightRequest = 20, BackgroundColor = Color.FromHex ("0000FF") };
    Button post = new Button { WidthRequest = 80, HeightRequest = 40, BackgroundColor = Color.FromHex ("FF0000") };
    Button photos = new Button { WidthRequest = 80, HeightRequest =40, BackgroundColor = Color.FromHex("FF0000")};

            post.IsVisible = false;
            photos.IsVisible = false;
    
            int c=0;
            tp.Clicked += delegate {
    
    
                if( c%2 == 0)
                {
                    post.IsVisible = true;
                    photos.IsVisible = true;
    
                    c++;
                }
                else 
                {
                    post.IsVisible = false;
                    photos.IsVisible = false;
                    c++;
                }
    
            };
    
            Content = new StackLayout { 
                Children = {
    
    
                    new StackLayout {
                        Children = {
                            new StackLayout {
                                HeightRequest = 1,
                                Children = {
                                    img
                                }
                            },
                            new StackLayout {
                                HorizontalOptions = LayoutOptions.Center,
    
                                Children =
                                {
                                    tp
    
                                }
                            },
    
    
                            new StackLayout {
                                Orientation = StackOrientation.Horizontal,
                                Children =
                                {
                                    post,photos
    
                                }
                            },
    
                        }
                    },
    
    
                    new StackLayout {
                        BackgroundColor = Color.FromHex("FFF"),
                        Children = {
                            new Label { Text = "Posting section goes here", TextColor = Color.FromHex("000")}
                        }
                    }
    
    
    
                }
            };
        }
    }
    

    }

    a.png 76.1K
    b.png 70.3K
  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    @Bikash.5581 First of all, your code is hard to read! Please name variable with sense. So make Image->ImageHP, tp->ButtonTP and a like.
    Then you always should set the orientation in stacklayouts. I' don't knbow if this will make the difference. Also don't do HeightRequest on the StackLayout, but on the Image if yoiu need to, but actually it does not make any sense as it would request to make you StackLayout one Pixel high.

    I would recommend to use Xaml which is a lot easier to read.

Sign In or Register to comment.