How to Creating a curved header layout Making a button that overlaps the header in xamarin form ??

unknown123unknown123 Member ✭✭✭
edited February 7 in Xamarin.Forms

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Nobody is doing to write your code for you.
    Nobody is going to invest any time in your issue when you can't even invest 20 seconds to write a decent question asking for help.

    Show us what you've tried, what you've done and what trouble you've run in to and someone may be able to help put you on track. But you really do have to make an effort of your own first.

    https://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias=aps&field-keywords=xaml

  • unknown123unknown123 Member ✭✭✭


    <Grid.RowDefinitions>


    </Grid.RowDefinitions>

      <!-- header background -->
            <StackLayout Grid.Row="0" BackgroundColor="White">
                <Grid ColumnSpacing="0" RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <StackLayout Grid.Row="0" HorizontalOptions="Center" VerticalOptions="Start"  Padding="0,50,0,00">
                        <Label Text="Name" HorizontalOptions="Start"/>
                        <Entry Placeholder="Enter Your Name" HorizontalOptions="Center" HorizontalTextAlignment="Center" />
                    </StackLayout>
                    <StackLayout Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Start" Padding="0,50,0,00">
                        <Label Text="Place" HorizontalOptions="Start"/>
                        <Entry Placeholder="place" HorizontalOptions="Center" HorizontalTextAlignment="Center"  />
                    </StackLayout>
                </Grid>
            </StackLayout>
    
      <Image Source="ProfilePic.jpg" Margin="0,0,0,-50" HeightRequest="50" WidthRequest="50" HorizontalOptions="Center" VerticalOptions="EndAndExpand"/>
    

    Here im using stacklayout as header,How to create a curved header layout?????

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    How to create a curved header layout?????

    Photoshop or another graphics program. Make your background as an image.

  • unknown123unknown123 Member ✭✭✭

    No man we want to scroll down the list if we are making background as a image it will reflect the list view alsoo

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited February 7

    Background for the page - not the ListView

    Also... What it will do is not always what something guesses. Take 10 minutes and actually try it. Code it and put it in and work the code. See what it really does on a physical device.

    If you still have an issue, then post screen shots with a better description of the problem.

  • unknown123unknown123 Member ✭✭✭

    Ohh okay image is the only possible solution

    so there is no way to curve my layout or framess ??

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited February 7

    {laugh} No you can't curve frames.
    You could actually draw a vector on the background behind the control. maybe in a CustomRenderer or maybe with Skiasharp.

    But it would still be a form of background art. The only difference is that a real-time drawn vector may look more crisp than a bitmap.

    https://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias=aps&amp;field-keywords=xaml

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    > @AjithKumar123 said:
    > No man we want to scroll down the list if we are making background as a image it will reflect the list view alsoo

    Not sure what you mean here. Can you elaborate?

    If you want the appearance of a curved header, maybe an image as the stacklayout background with a transparent colour below the top one.

    Or go back to the designer who came up with this idea and say 'no! Some things may look good but are a complete pain to implement.
  • unknown123unknown123 Member ✭✭✭
    edited February 7

    page has split up into two section 1.top section contains some detail to fill up and its bottom looks like curved not a flattened one 2.below section having some property lists

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    I'm still not clear what the header is in the image. Is it the lighter top area, with a ListView or similar in the darker area below?

    It would be useful if you could provide an annotated image to show what you want.

    But as @ClintStLaurent says - there is no easy way to have a curved View in Forms. You may be able to do it with a custom renderer or dropping to Xamarin.iOS and Xamarin.Android - but it's likely to be a significant amount of work.
  • unknown123unknown123 Member ✭✭✭

    page has split up into two section 1.top section contains some detail to fill up and its bottom looks like curved not a flattened one 2.below section having some property lists

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    There are several imaginative ways of getting that UI while the bottom area isn't scrolled. But getting the behaviour where the bottom area scrolls under the curved edge is not possible or very hard.
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited February 7

    @JamesLavery said:
    But as @ClintStLaurent says - there is no easy way to have a curved View in Forms.

    To be more clear - and let me just say "Welcome to writing software"... There is no easy way to write any UI that is curved in any system.

    Windows, forms, views, panes... are all square by design and for a reason. They all have bounds of left, right, top bottom. They have properties of width and height. They have to take a physically rectangular region simply due to the reality of geometry and how systems do things like... Hit testing if the user clicked within the boundaries of a control - going back to that left, right, top, bottom definitions.

    At best, you can simulator curves... you can fake out a curved bottom and transparencies and so on. but in the end, a window is a window is a window. They are rectangular.

    Your job as a developer is to deal with it. Educate the schmuck designer right out of school with no understanding of the real world limitations. Just because an Architect wants a building that's an upside-down pyramid doesn't mean it can really be built or that anyone is really going to do it. So just because some artsy-fartsy kid designed that crap, doesn't mean you will or even can do it - at least not without investing a couple hundred more man-hours than the boss is willing to approve.

    I think the facts are this...

    • If you have to ask, and ask, and keep asking and just don't understand why its a problem, then you don't have the skills to make this.
    • The designer is asking more than you can do.
    • Tell the boss you can do it, but they have to approve an additional 750 hours to develop that weird artistic b.s. Then the boss will cancel it and rope in the design to things that are practical.
  • unknown123unknown123 Member ✭✭✭

    see the below image like wise i have to do but here they were using cover pic as a image but i need to fill some details in top layer

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    That's achievable - as long as you don't expect stuff to scroll up under the curved edge.

    Where did you get that screenshot?
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    but i need to fill some details in top layer

    Ok. Do it. We've told you how... This is what they are paying you to do. No there is not a ready-made triangular frame you can just drag-n-drop in. You have to actually make that. Either in a custom renderer if you want to get fancy... Or you make a graphic that is the background... Then make another graphic with transparency to be a mask and put that on top.. then have a Grid with information on top of that.

    Again... Many ways to do it. Its your job to pick one based on your skills. So pick a method and run with it and start coding.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @JamesLavery said:
    Where did you get that screenshot?

    Can I guess?
    The designer made it in a pirated version of Photoshop, using UI they plagiarized from other apps.

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    > @ClintStLaurent said:
    > @JamesLavery said:
    > Where did you get that screenshot?
    >
    >
    >
    >
    >
    > Can I guess?
    > The designer made it in a pirated version of Photoshop, using UI they plagiarized from other apps.

    Looks suspiciously like one if the Xamarin demo apps. In which case download the app and look at how it's done.

    Or as cynical Clint says - it's a design drawn up by a designer in Photoshop which hasn't been implemented.
Sign In or Register to comment.