DOCSEARCHbyAlgolia
Submit Docs

Sharpnado.CollectionView

repository·main·Indexed 43 days ago

https://github.com/roubachof/sharpnado.collectionview

A high-performance collection view library for .NET MAUI and Xamarin.Forms. It supports multiple layout types including Grid, Carousel, Horizontal, and Vertical, and provides advanced features such as drag-and-drop, infinite loading via a Paginator, and custom reveal animations for cells.

Tokens
4.1K
Snippets
17
Records
21
Agent score
55%

What's inside Sharpnado.CollectionView

  1. Use DraggableViewCell for drag state styling

    main
    While any ViewCell can be dragged, using DraggableViewCell allows you to react to the drag state. Specifically, you can use the IsDragAndDropping property within a DataTrigger to change the visual appearance (like background color or elevation) of a cell while it is being moved.

  4. Initialize Sharpnado.CollectionView in Xamarin.Forms

    main

    For Xamarin.Forms projects, initialization is required in multiple locations to ensure namespace schema and platform-specific features work correctly.

    Core Project

    In App.xaml.cs, call the initializer in the constructor:

    public App()
{
    InitializeComponent;
    Sharpnado.CollectionView.Initializer.Initialize(true, false);
    ...
}

    iOS

    In AppDelegate.cs, call Initializer.Initialize() before Xamarin.Forms.Forms.Init() and LoadApplication():

    public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    Initializer.Initialize();
    global::Xamarin.Forms.Forms.Init();
    LoadApplication(new App());
}

    Android

    In MainActivity.cs, call Initializer.Initialize() before Xamarin.Forms.Forms.Init() and LoadApplication():

    public override OnCreate(Bundle savedInstanceState)
{
    Initializer.Initialize();
    global::Xamarin.Forms.Forms.Init();
    LoadApplication(new App());
}

  5. Use Sharpnado.CollectionView layouts

    main

    Sharpnado provides several specialized layout components and a general CollectionView with layout configurations.

    Layout Types

    • GridView (sho:GridView): Displays items in a grid with a configurable ColumnCount.
    • CollectionView (sho:CollectionView): A versatile component where you specify the layout via the CollectionLayout property (e.g., Vertical). Supports headers, footers, and grouping via ItemTemplate.
    • CarouselView (sho:CarouselView): Optimized for carousel-style scrolling.
    • HorizontalListView (sho:HorizontalListView): Optimized for horizontal list scrolling.

    Common Properties

    • ItemsSource: The collection of data to display.
    • CollectionPadding: Sets padding for the collection.
    • ItemHeight: Defines the height of individual items.
    • EnableDragAndDrop: Boolean to enable drag and drop functionality (available on GridView).
    • ColumnCount: Specifies the number of columns for a GridView.
    <!-- Example: Grid Layout -->
<sho:GridView
    x:Name="HorizontalListView"
    CollectionPadding="30"
    ColumnCount="3"
    EnableDragAndDrop="True"
    HeightRequest="390"
    HorizontalOptions="Fill"
    ItemHeight="110"
    ItemsSource="{Binding Logo, Mode=OneTime}" />

<!-- Example: Vertical List with Groups -->
<sho:CollectionView
    CollectionLayout="Vertical"
    CollectionPadding="0,30,0,30"
    CurrentIndex="{Binding CurrentIndex}"
    ItemHeight="120"
    ItemTemplate="{StaticResource HeaderFooterGroupingTemplateSelector}"
    ItemsSource="{Binding SillyPeople}"
    ScrollBeganCommand="{Binding OnScrollBeginCommand}"
    ScrollEndedCommand="{Binding OnScrollEndCommand}"
    TapCommand="{Binding TapCommand}" />

  6. Install Sharpnado.CollectionView.Maui

    main

    To use Sharpnado.CollectionView in a .NET MAUI project, you must initialize it in your MauiProgram.cs file using the .UseSharpnadoCollectionView() extension method on the MauiAppBuilder. You can optionally pass loggerEnable: false to disable logging.

    public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp()
        .UseSharpnadoCollectionView(loggerEnable: false);
    return builder.Build();
}

  7. Implement Headers, Footers, and Group Headers

    main

    For linear layouts, you can implement headers, footers, and group headers by combining a DataTemplateSelector with the SizedDataTemplate markup extension.

    Workflow:

    1. Model Layer: Create a hierarchy of view models (e.g., a base interface and specific classes for Header, Footer, and GroupHeader).
    2. Data Preparation: In your ViewModel, construct a list that interleaves these header/footer objects with your actual data items (often using LINQ GroupBy).
    3. XAML Templates: Define DataTemplates for each type. For headers/footers, wrap the content in a DraggableViewCell and set IsDraggable="False" to prevent them from being moved.
    4. Sizing: Use the SizedDataTemplate markup extension to assign a fixed Size to your header and footer templates.
    5. Selector: Implement a DataTemplateSelector that returns the appropriate SizedDataTemplate based on the item type.

    Note: You do not need to assign a size to the standard item template; it will automatically use the ItemWidth or ItemHeight of the layout.

    <views:HeaderFooterGroupingTemplateSelector
    x:Key="HeaderFooterGroupingTemplateSelector"
    DudeTemplate="{StaticResource DudeTemplate}"
    FooterTemplate="{sho:SizedDataTemplate Template={StaticResource FooterTemplate}, Size=60}"
    GroupHeaderTemplate="{sho:SizedDataTemplate Template={StaticResource GroupHeaderTemplate}, Size=75}"
    HeaderTemplate="{sho:SizedDataTemplate Template={StaticResource HeaderTemplate}, Size=40}" />

  8. Enable Drag and Drop in CollectionView

    main

    To enable drag and drop functionality, set the EnableDragAndDrop property to true.

    Important Note on Taps: If you need to support both drag and drop and item tapping, do not use xamEffects:Commands.Tap on the DataTemplate content. Instead, use the TapCommand on the CollectionView itself. While this may omit the visual color ripple effect, it ensures both gestures work correctly.

    Drag and Drop Commands: The DragAndDropStartCommand and DragAndDropEndedCommand provide a DragAndDropInfo object as an argument, which contains:

    • To: The destination index.
    • From: The source index.
    • Content: The object being moved.
    public class DragAndDropInfo
{
    public int To { get; }
    public int From { get; }
    public object Content { get; }
}

  10. Initialize Sharpnado.CollectionView in .NET MAUI

    main

    To use Sharpnado.CollectionView in a .NET MAUI application, you must register it in your MauiProgram.cs file using the UseSharpnadoCollectionView extension method.

    public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp()
        .UseSharpnadoCollectionView(loggerEnable: false);
}

  11. Configure Horizontal list layout

    main

    To create a horizontal list, set the CollectionLayout property to Horizontal. By default, it operates in Linear mode (a single row). You can control the appearance using ItemWidth, ItemHeight, ItemSpacing, and CollectionPadding.

    Alternatively, you can use the HorizontalListView class as a shorthand for a horizontal layout.

    <!-- Using CollectionView with explicit layout -->
<sho:CollectionView 
    CollectionLayout="Horizontal"
    ItemHeight="260"
    ItemWidth="260"
    ItemSpacing="10"
    CollectionPadding="10,30,10,75"
    ItemsSource="{Binding SillyPeople}" />

<!-- Using the shorthand HorizontalListView -->
<sho:HorizontalListView 
    CollectionPadding="10,30,10,75"
    ItemHeight="260"
    ItemWidth="260"
    ItemsSource="{Binding SillyPeople}" />