Giter VIP home page Giter VIP logo

multicolumnslistview's Introduction

MultiColumnsListView

Xamarin.Forms subclassed ListView for a multi-columns look

What is it about

A Xamarin.Forms subclassed ListView along with some other subclassed controls to create a multi-column recyclable ListView.
No custom renderers, just pure Forms, tested on iOS and Android.

Try click on "Change Cols" it will switch 1-2-3 columns, the "Add" button works too..

How

The main idea was to have several cell templates and switch them between a table row and an empty template for cells that have already been used in the row.

Cell Templates

System templates will be used to create the multi-columns look.
Template 1: A table in wich we are going to place our columns for every row
Template 2: An empty cell template for those items residing above, in the table from template #1.
Template 3: An optional cell template for a case we have only 1 column selected. It is not really needed, we can just use the template #1 with 1 column, but it’s an option for purists.
You could override the resulting template with your own, after our selector has produced one.

And you will of course have your own cell template that will be used by the table from template #1 to fill its columns and to create your unique design.

The resulting look must be the following (2 columns):

[ Template1: [user template cell 1] [user template cell 2] ]

[ Template 2 ]

[ Template1: [user template cell 3] [user template cell 4] ]

[ Template 2 ]

The ListView

You will notice that in the re-subclassed MonkeysListView we could set the caching strategy at will upon platform. An important note is that with our custom data selector you cannot use RecycleElementAndDataTemplate. Another note is that you cannot use RecycleElement when you use uneven rows otherwise it will create a junky effect, but with even rows of fixed equal height it’s no problem. In this example we had uneven rows so we used RetainElement.

ToDo:

Explain the code, maybe create a blog post. Until then please feel free to play with the source code, custom controls are in a shared project so you can include them easily in your own soluctions. The implementation is in the cross-platform project, please take a look i have left some comments inside.

A Quick Note

The project was created using a standart Xamarin.Forms Shell template, then adding custom controls inside. Microsoft.CSharp nuget was added for dynamic extensions but you can adapt to your hardcoded classes and remove it.

Known bugs

Not the ListView bug, but the app one: list page content sometimes goes a bit behind the bottom navigation Tabbar, please tell me if you know how to fix this. This hapens randomly. The similar case was that on ios it went behind the NavBar but was fixed with a 'Shell.SetSetPaddingInsets(this, true);' might be somewhat similar to this, but related to the new buttom tabedbar..

Stay Tuned

For even more Xamarin content: https://twitter.com/nickkovalsky

License

This project is licensed under the MIT License - see the LICENSE.md file for details

multicolumnslistview's People

Contributors

taublast avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.