How do overlap image on stacklayout in Xamarin forms?

SanjayTejaniSanjayTejani USMember ✭✭✭
edited January 2017 in Xamarin.Forms

Hi All,

I want to overlap a image
on stacklayout, can any one please guide me how can i do that???

Please check on uploaded image.

Tagged:

Best Answers

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Set the top margin negative.

    Or look again and envision the layout as not really having anything overlapped. Just the illusion of it, caused by the background image halfway down the circle image.

  • seanydaseanyda GBMember ✭✭✭✭✭

    I would use a grid for that page and use RowSpans and ColumnSpans. The grids can get a bit complicated having invisible rows and columns though.

  • SanjayTejaniSanjayTejani USMember ✭✭✭
    edited January 2017

    Hello @ClintStLaurent and @lpdavies

    Please look into the my below code.

    <StackLayout Spacing="0"> <RelativeLayout HorizontalOptions="CenterAndExpand"> <local:ImageCircle Source="temp.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="CenterAndExpand" Aspect="AspectFit" /> </RelativeLayout> <Frame HasShadow="True" BackgroundColor="#f8f8f8" Margin="0,-20,0,2"> <StackLayout Spacing="2" HorizontalOptions="CenterAndExpand"> <Label Text="Test user" FontSize="18" HorizontalTextAlignment="Center" Style="{DynamicResource PrimaryStyle}"/> <Label Text="Text client" FontSize="12" HorizontalTextAlignment="Center" Style="{DynamicResource SecondaryStyle}"/> </StackLayout> </Frame> </StackLayout>

  • seanydaseanyda GBMember ✭✭✭✭✭

    @SanjayTejani said:
    @lpdavies

    Thanks for your replay.... Can you please provide some little code so i can implement.

    Not tested this code just quickly came up with it as an example

    Grid g = new Grid
                {
                    RowDefinitions = {
                        new RowDefinition { Height = new GridLength(150, GridUnitType.Absolute)},
                        new RowDefinition { Height = new GridLength(30, GridUnitType.Absolute)},
                        new RowDefinition { Height = new GridLength(30, GridUnitType.Absolute)},
                        new RowDefinition { Height = new GridLength(120, GridUnitType.Absolute)},
                    },
                    ColumnDefinitions = {
                        new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)}
                    }
                };
    
                BoxView avatar = new BoxView { BackgroundColor = Color.Red };
                g.Children.Add(avatar, 0, 1);
                Grid.SetRowSpan(avatar, 2); 
    

    Row 1 = Everything above the avatar so just the background image
    Row 2 = The top half of the avatar
    Row 3 = The bottom half of the avatar (which also covers a grid which you'll need to make)
    Row 4 = Grid area with no avatar in

  • seanydaseanyda GBMember ✭✭✭✭✭

    @SanjayTejani said:
    Hello @ClintStLaurent and @lpdavies

    Please look into the my below code.

    <StackLayout Spacing="0"> <RelativeLayout HorizontalOptions="CenterAndExpand"> <local:ImageCircle Source="temp.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="CenterAndExpand" Aspect="AspectFit" /> </RelativeLayout> <Frame HasShadow="True" BackgroundColor="#f8f8f8" Margin="0,-20,0,2"> <StackLayout Spacing="2" HorizontalOptions="CenterAndExpand"> <Label Text="Test user" FontSize="18" HorizontalTextAlignment="Center" Style="{DynamicResource PrimaryStyle}"/> <Label Text="Text client" FontSize="12" HorizontalTextAlignment="Center" Style="{DynamicResource SecondaryStyle}"/> </StackLayout> </Frame> </StackLayout>

    Can't help with this sorry. I don't do XAML

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @lpdavies said:
    Can't help with this sorry. I don't do XAML

    Wow! Really? How else would you make your UI? You're not building UI in C# code behind; are you?
    I just went through that on another thread. XAML is so much cleaner.

    @lpdavies said:
    I would use a grid for that page and use RowSpans and ColumnSpans. The grids can get a bit complicated having invisible rows and columns though.

    @SanjayTejani said:
    @lpdavies
    Thanks for your replay.... Can you please provide some little code so i can implement.

    @SanjayTejani
    There are so many good tutorials out there on XAML. At least make some effort to try @lpdavies advice about building a Grid for your layout. You'll learn more by doing that having someone just give you the markup. Once you've got something and need some help feel free to post it back here.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @ClintStLaurent said:

    @lpdavies said:
    Can't help with this sorry. I don't do XAML

    Wow! Really? How else would you make your UI? You're not building UI in C# code behind; are you?
    I just went through that on another thread. XAML is so much cleaner.

    I think XAML vs C# is open for debate :P There are pros and cons for both.

  • nick5454nick5454 USUniversity ✭✭✭

    @seanyda said:

    @ClintStLaurent said:

    @lpdavies said:
    Can't help with this sorry. I don't do XAML

    Wow! Really? How else would you make your UI? You're not building UI in C# code behind; are you?
    I just went through that on another thread. XAML is so much cleaner.

    I think XAML vs C# is open for debate :P There are pros and cons for both.

    I worked at a shop that thought along the same lines. Full on c# vs XAML becomes a nightmare of proprietary code once you have a large team mix of Juniors(contractors) with Sr.'s. Xaml with as little c# is must faster to edit and maintain.

    It's like comparing Server Controls to Web User Controls in ASP.

Sign In or Register to comment.