How to design beautiful UI for E-Commerce App in Xamarin.Forms?

AliRaza.5445AliRaza.5445 PKMember ✭✭✭

Hi Folks,
How are you doing? I am going to develop an Ecommerce Xamarin.Forms App that I expect to look similar to the one in the picture above. I need your help in designing its UI for Items catalog Page. From the picture, I guess to have a MasterDetailPage , a master page for categories of products and a Detail page for Items of Respective category.

App will fetch data from Sql Azure Database hosted on Microsoft Azure via Asp.Net Web API and I want UI to be automatically updated (New boxes, Item templates or in simple words, Items to be added /shown in the page upon screen refresh) if database has got some new products/items in it. Problem that I have is that I am not sure how to make these products boxes, divide them in 2 columns and two products in each row as shown in the picture.

Kindly guide me on how can I achieve this and which UI controls should I use?
Thanks :smile:

Answers

  • DanielCespedesTamesDanielCespedesTames USMember ✭✭

    i need this too

  • AliRaza.5445AliRaza.5445 PKMember ✭✭✭

    @ClintStLaurent Please help.

  • VenkataSwamyVenkataSwamy INMember ✭✭✭

    Hii @AliRaza.5445,

    You have to design based on screen height and width

  • AliRaza.5445AliRaza.5445 PKMember ✭✭✭

    @VenkataSwamyBalaraju ,
    Which UI controls and layouts should I use to implement this interface design ? Can you explain?

  • Gigex42Gigex42 USMember ✭✭✭✭
    edited June 2017

    You could try the FlowListView so you can show multiple items in one row.
    "ListView derivative with flowing, grid-like columns support."

    For the itemdesign you create a datatemplate within you listview.

    https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView

    The rest is just some simple hamburgermenu + Navigation with toolbaritems.

  • EliasJohannesEliasJohannes ATMember ✭✭

    On top of the page you have a NavigationBar containing a title and Toolbar items (Xamarin.Forms Toolbar)
    Use CustomRenderers or AppDelegate.cs (in your Project.iOS folder) to adjust colors and appearance.
    For the content i would do something like this:
    Create a model folder containing a model called Item. Item needs to have attributes like title, price, information, picture-url, etc.
    I made an example where i tried to recreate twitter for research purpose. My class looks something like that:
    public class Tweet
    {

                    public string Author { get; set; }
    
                    public string Time { get; set; }
    
                    public string ImageUrl { get; set; }
    
                    public string TweetText { get; set; }
    
                } 
    

    Then back in your .xaml.cs create a new list with the items you want:
    var tweets = new List
    {
    new Tweet { },

                ...
            }; 
    

    and assign the Content to your List: iOSList.ItemsSource = tweets;
    Back in your .xaml you can now work with Data Bindings to automatically generate the items by building the layout only once. Looking at your example you could use different kind of layouts. (Xamarin.Forms Layouts
    Use ViewCells in your List, as you can build whatever you want within your ViewCell. It acts as a container for your content. It doesn't matter if you create a Grid or a AbsoluteLayout in your ViewCell.
    DataBinding would work something like that: <Label FontAttributes="Bold" Text="{Binding Author}"/> while Author binds to the attribute of item.
    Hope that helps!

  • AliRaza.5445AliRaza.5445 PKMember ✭✭✭

    @Daniel.Reiter ,
    Is hamburgermenu same as MasterDetailPage in Xamarin.Forms?

  • AliRaza.5445AliRaza.5445 PKMember ✭✭✭

    @EliasJohannes " , How will that ListView automatically grow OR more specifically , How will new Items/Products (Item template boxes) be automatically created on page if products in the database have been added?

  • Gigex42Gigex42 USMember ✭✭✭✭

    Yes its a simpe MasterDetailPage with the hamburger menu like in the picture. There should be some VS template for it in vs2017.

    Normaly you would bind the itemssource of your listview with some data like @EliasJohannes said to a list of products. If you add a new product to you list in your code, the list should normaly refresh itself and add the item.

  • NMackayNMackay GBInsider, University mod

    @AliRaza.5445

    I'm not plugging Telerik but I'd suggest their RadList or an alternative control as that layout is pretty simple with RadList as a grid layout.

    We use that kind of layout a lot.

    http://www.telerik.com/xamarin-ui/listview

  • EliasJohannesEliasJohannes ATMember ✭✭

    @AliRaza.5445 said:
    @EliasJohannes " , How will that ListView automatically grow OR more specifically , How will new Items/Products (Item template boxes) be automatically created on page if products in the database have been added?

    What i explained to you is only the part how to generate the items from your C# list to your Xamarin.Forms layout. If you add more items to that list you created in code behind, those items will be generated to your Layout. If you want to add items from your database you have to find a way to get the content from your DB into that list. I have never done something like this in C#, but usually in java i use Hibernate for that. So using a ORM (object relationship mapping) to create objects of the class and then put them in the list could be a solution.

  • MalikVerdiereMalikVerdiere USMember
    Hi, I am also designing an e-commerce application in xamarin.forms and I would like to integrate a payment solution other than paypal and I find nothing on the internet anyone would have any ideas please.
  • AliRaza.5445AliRaza.5445 PKMember ✭✭✭

    @MalikVerdiere , you can use this Stripe plugin in xamarin.forms app.
    https://components.xamarin.com/view/stripe
    Also , find some cool payment gateways here in this link and check which one of them is available in xamarin.forms :
    https://www.jackrabbitmobile.com/business/ultimate-guide-e-commerce-mobile-app-development/

  • PrabakaranRamasamyPrabakaranRamasamy USMember ✭✭✭

    Syncfusion released a brand new free product called "Essential UI Kit for Xamarin.Forms". This includes more than 35 XAML screens for the Xamarin.Forms apps including beautiful e-commerce screens.

    Source code: https://github.com/syncfusion/essential-ui-kit-for-xamarin.forms

    VS Extension: https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Essential-UI-Kit-Xamarin-Forms

    Preview: https://play.google.com/store/apps/details?id=com.syncfusion.xamarin.uikit&hl=en_IN

    If you are eligible for free community license of Syncfusion. Then you can get all the Xamarin components for free.

    https://www.syncfusion.com/products/communitylicense

    Note: I work for Syncfusion.

  • JohnHardmanJohnHardman GBUniversity mod

    @PrabakaranRamasamy

    Please see the forum rules and guidelines at https://forums.xamarin.com/discussion/87290/xamarin-forum-rules-and-guidelines which say "Successful Contributors Will Not:" ... "Comment on old posts". Typically, anything over 6 months old is considered an old post.

  • PrabakaranRamasamyPrabakaranRamasamy USMember ✭✭✭

    I haven't been aware of these guidelines before. I believed my answer was still helpful for some people because none of the above replies are still marked as "ACCEPTED ANSWER". Thank you for making me aware of these guidelines. I can no longer remove my previous post, so I'll ensure it in my future updates.

Sign In or Register to comment.