Luna UI Documentation

The GridView<TItem> class is an abstract base class designed for creating paginated and filterable grid views. It displays items in a grid layout, handles pagination, can apply filters, and manage item selection.

Examples

InventoryView

Inventory Ingredients

Heroes

GridView Hero

GridView is a large class with lots of properties so it can be complex, but each property is simple on its own.

Constructor

csharp

public GridViewBase(
    List<TItem> itemList,
    VisualTreeAsset itemSlotTemplate,
    GameObject parent,
    VisualElement parentElement,
    VisualElement slotContainer,
    TooltipController tooltipController = null,
    UIStartVisibility startVisibility = UIStartVisibility.Visible,
    VisualElement focusElement = null,
    float fadeDuration = 0.5f,
    EasingMode easingMode = EasingMode.EaseOutCirc,
    bool disableOtherViewsOnFadeIn = false,
    bool debug = false
)

Parameter	Type	Description
itemList	List<TItem>	Data source, list of items to display
itemSlotTemplate	VisualTreeAsset	Template for each grid item slot
parent	GameObject	Parent GameObject
parentElement	VisualElement	Parent VisualElement
slotContainer	VisualElement	Container for grid items
tooltipController	TooltipController	Optional tooltip controller for closing on page change

Properties

Property	Type	Description
SlotContainer	VisualElement	The container holding item slots
ItemSlots	List<VisualElement>	List of all created item slot elements
SelectedItems	HashSet<TItem>	Currently selected items

Public Methods

CreateSlots

Creates the grid slot elements. Must be implemented by derived classes.

csharp

public abstract void CreateSlots();

Refresh

Refilters and refreshes all items in the grid.

csharp

public void Refresh()

SetItemList

Updates the data source and refreshes the grid.

csharp

public void SetItemList(List<TItem> itemList)

Selection Methods

csharp

public abstract void Select(int slotIndex);
public abstract void Deselect(int slotIndex);
public void DeselectAll();

Filter Methods

SetFilters

Sets the filter functions for the grid.

csharp

public void SetFilters(List<Func<List<TItem>, int, List<TItem>>> filters)

SetFilter

Applies a filter value at the specified filter index.

csharp

public void SetFilter(int filterIndex, int filter)

ClearFilter

Clears the filter at the specified index.

csharp

public void ClearFilter(int filterIndex)

GetFilter

Gets the current filter value at the specified index.

csharp

public int GetFilter(int index)

GetFilteredList

Returns the filtered list based on current filters.

csharp

public virtual List<TItem> GetFilteredList(List<int> filters)

Filter Button Methods

SetFilterButtons

Sets up filter toggle buttons.

csharp

public void SetFilterButtons(List<List<Button>> filterButtons)

SetFilterClearButtons

Sets up filter clear buttons.

csharp

public void SetFilterClearButtons(List<List<Button>> filterClearButtons)

SetEnabledFilterButtons

Enables or disables filter buttons at an index.

csharp

public void SetEnabledFilterButtons(int filterIndex, bool enabled)

UpdateFilterButtons

Updates filter button visual states.

csharp

public void UpdateFilterButtons(int filterIndex)

Configuration Methods

SetHideEmpty

When true, empty slots are hidden instead of shown.

csharp

public void SetHideEmpty(bool hideEmpty)

SetSelectedFilterColor

Sets the color applied to selected filter buttons.

csharp

public void SetSelectedFilterColor(UIColorName color)

SetSelectedFilterClass

Sets the USS class applied to selected filter buttons.

csharp

public void SetSelectedFilterClass(string selectedFilterClass)

SetFilterClass

Sets the USS class applied to all filter buttons.

csharp

public void SetFilterClass(string filterClass)

Input Methods

SetInputPrompt

Sets up input prompts for tab navigation (prev/next filters).

csharp

public void SetInputPrompt(InputPrompt filterItemPrevious, InputPrompt filterItemNext)

PreviousTab / NextTab

Navigate between filter tabs.

csharp

public void PreviousTab()
public void PreviousTab(int filterIndex)
public void NextTab()
public void NextTab(int filterIndex)

RegisterInput / UnregisterInput

Manually register or unregister input handlers.

csharp

public void RegisterInput()
public void UnregisterInput()

Dynamic Layout

RegisterDynamicItemPerLineUpdate

Registers a callback to update items per line when container size changes.

csharp

public void RegisterDynamicItemPerLineUpdate()
public void UnregisterDynamicItemPerLineUpdate()

Abstract Methods to Implement

When extending GridViewBase, implement these methods:

csharp

// Create slot visual elements
public abstract void CreateSlots();

// Refresh items in slots
protected abstract void RefreshItems();

// Filter list based on current filters
protected abstract void FilterList();

// Handle filter changes
protected abstract void OnFilterChange(int filterIndex);

// Handle dynamic layout changes
protected abstract void DynamicItemPerLineUpdate(GeometryChangedEvent evt);

// Called when creating each slot
protected abstract void OnItemCreate(VisualElement slot);

// Unbind item from slot
protected abstract void UnbindItem(VisualElement slot);

// Bind item to slot
protected abstract void BindItem(VisualElement slot, TItem item, int slotIndex, bool selected);

// Selection handling
public abstract void Select(int slotIndex);
public abstract void Deselect(int slotIndex);

Example Implementation

csharp

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;
using CupkekGames.Luna;

public class InventoryGridView : GridViewBase<InventoryItem>
{
    private List<InventoryItem> _filteredList;
    
    public InventoryGridView(
        List<InventoryItem> items,
        VisualTreeAsset template,
        GameObject parent,
        VisualElement parentElement,
        VisualElement container
    ) : base(items, template, parent, parentElement, container)
    {
        _slotPerLine = 4;
        _itemWidth = 80;
    }
    
    public override void CreateSlots()
    {
        _slotContainer.Clear();
        ItemSlots.Clear();
        
        int lineCount = Mathf.CeilToInt((float)_itemList.Count / _slotPerLine);
        for (int i = 0; i < lineCount; i++)
        {
            VisualElement line = MakeLine();
            _slotContainer.Add(line);
        }
        
        RefreshItems();
    }
    
    protected override void FilterList()
    {
        _filteredList = GetFilteredList(_currentFilters);
    }
    
    protected override void RefreshItems()
    {
        for (int i = 0; i < ItemSlots.Count; i++)
        {
            VisualElement slot = ItemSlots[i];
            
            if (i < _filteredList.Count)
            {
                InventoryItem item = _filteredList[i];
                bool selected = _selectedItems.Contains(item);
                BindItem(slot, item, i, selected);
                slot.style.visibility = Visibility.Visible;
            }
            else
            {
                UnbindItem(slot);
                slot.style.visibility = _hideEmpty ? Visibility.Hidden : Visibility.Visible;
            }
        }
    }
    
    protected override void OnItemCreate(VisualElement slot)
    {
        // Initial slot setup
        slot.AddToClassList("inventory-slot");
    }
    
    protected override void BindItem(VisualElement slot, InventoryItem item, int index, bool selected)
    {
        var icon = slot.Q<VisualElement>("Icon");
        icon.style.backgroundImage = new StyleBackground(item.Icon);
        
        var label = slot.Q<Label>("Name");
        label.text = item.Name;
        
        if (selected)
        {
            slot.AddToClassList("selected");
        }
        else
        {
            slot.RemoveFromClassList("selected");
        }
    }
    
    protected override void UnbindItem(VisualElement slot)
    {
        var icon = slot.Q<VisualElement>("Icon");
        icon.style.backgroundImage = null;
        
        var label = slot.Q<Label>("Name");
        label.text = "";
        
        slot.RemoveFromClassList("selected");
    }
    
    protected override void OnFilterChange(int filterIndex)
    {
        // Handle filter change - e.g., update category header
    }
    
    protected override void DynamicItemPerLineUpdate(GeometryChangedEvent evt)
    {
        float width = _slotContainer.resolvedStyle.width;
        int newSlotPerLine = Mathf.Max(1, Mathf.FloorToInt(width / _itemWidth));
        
        if (newSlotPerLine != _slotPerLine)
        {
            _slotPerLine = newSlotPerLine;
            CreateSlots();
        }
    }
    
    public override void Select(int slotIndex)
    {
        if (slotIndex < _filteredList.Count)
        {
            _selectedItems.Add(_filteredList[slotIndex]);
            RefreshItems();
        }
    }
    
    public override void Deselect(int slotIndex)
    {
        if (slotIndex < _filteredList.Count)
        {
            _selectedItems.Remove(_filteredList[slotIndex]);
            RefreshItems();
        }
    }
}

Pagination - For paginated grids
Tooltip - Item tooltips

GridView

Examples

Constructor

Properties

Public Methods

CreateSlots

Refresh

SetItemList

Selection Methods

Filter Methods

SetFilters

SetFilter

ClearFilter

GetFilter

GetFilteredList

Filter Button Methods

SetFilterButtons

SetFilterClearButtons

SetEnabledFilterButtons

UpdateFilterButtons

Configuration Methods

SetHideEmpty

SetSelectedFilterColor

SetSelectedFilterClass

SetFilterClass

Input Methods

SetInputPrompt

PreviousTab / NextTab

RegisterInput / UnregisterInput

Dynamic Layout

RegisterDynamicItemPerLineUpdate

Abstract Methods to Implement

Example Implementation

Related