Skip to content

[Controls] Add multi-selection support to GroupedTileListBox #598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Xavier Fortin (xfortin-devolutions) merged 3 commits into from
Jul 22, 2026
Merged

[Controls] Add multi-selection support to GroupedTileListBox #598

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a0cce1e
Add multi-selection to GroupedTileListBox
xfortin-devolutions Jul 22, 2026
a31038a
[SampleApp] Add GroupedTileListBox multi-selection demo
xfortin-devolutions Jul 22, 2026
41ac7f6
Address review feedback on GroupedTileListBox multi-selection
xfortin-devolutions Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions samples/SampleApp/DemoPages/GroupedTileListBoxDemo.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,86 @@
</Grid>
</StackPanel>

<!-- Scenario 5: Multiple Selection -->
Comment thread
xfortin-devolutions marked this conversation as resolved.
<StackPanel Spacing="10">
<TextBlock FontWeight="Bold" FontSize="16">Scenario 5: Multiple Selection</TextBlock>
<TextBlock TextWrapping="Wrap" Foreground="{DynamicResource TextControlPlaceholderForeground}">
SelectionMode="Multiple" with SelectedItems bound two-way.
Pointer: click replaces, Ctrl/Cmd+click toggles, Shift+click selects a range.
Keyboard: arrows move, Shift+arrows extend the range, Ctrl/Cmd+Space toggles the current tile, Ctrl/Cmd+A selects all.
</TextBlock>

<!-- Selected items display -->
<Border BorderBrush="{DynamicResource BorderBrush}"
BorderThickness="1"
Padding="8"
CornerRadius="4"
Background="{DynamicResource LayoutBackgroundLowBrush}">
<StackPanel Spacing="6">
<TextBlock FontWeight="SemiBold"
Text="{Binding MultiSelectedItems.Count, StringFormat='Selected ({0}):'}"/>
<TextBlock Text="(none)"
Foreground="{DynamicResource TextControlPlaceholderForeground}"
IsVisible="{Binding !MultiSelectedItems.Count}"/>
<ItemsControl ItemsSource="{Binding MultiSelectedItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="vm:FoodItem">
<Border Margin="0,0,6,6"
Padding="8,3"
CornerRadius="10"
Background="{DynamicResource LayoutBackgroundLowBrush}"
BorderBrush="{DynamicResource BorderBrush}"
BorderThickness="1">
<TextBlock Text="{Binding Name}" FontSize="12"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>

<!-- Resizable Grid -->
<Grid Height="400" ColumnDefinitions="2*,Auto,*">
<GroupedTileListBox Grid.Column="0"
ItemsSource="{Binding GroupedItems}"
SelectionMode="Multiple"
SelectedItems="{Binding MultiSelectedItems}"
GroupSelector="{Binding CategoryGroupSelector}"
GroupOrderSelector="{Binding CategoryGroupOrderSelector}"
GroupOrderAlphabetical="True"
ItemWidth="120"
ItemHeight="100"
CornerRadius="10">
<GroupedTileListBox.ItemTemplate>
<DataTemplate DataType="vm:FoodItem">
<StackPanel Spacing="4" VerticalAlignment="Center">
<TextBlock Text="{Binding Name}"
FontWeight="SemiBold"
TextAlignment="Center"
TextWrapping="Wrap"/>
<TextBlock Text="{Binding Category}"
FontSize="11"
TextAlignment="Center"/>
</StackPanel>
</DataTemplate>
</GroupedTileListBox.ItemTemplate>
</GroupedTileListBox>

<GridSplitter Grid.Column="1" Width="4" Background="{DynamicResource BorderBrush}"/>

<TextBlock Grid.Column="2"
Text="← Drag splitter to resize"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Foreground="{DynamicResource TextControlPlaceholderForeground}"/>
</Grid>
</StackPanel>

</StackPanel>
</ScrollViewer>

Expand Down
5 changes: 5 additions & 0 deletions samples/SampleApp/ViewModels/GroupedTileListBoxViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ namespace SampleApp.ViewModels;

using System;
using System.Collections.Generic;
using Avalonia.Collections;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

Expand Down Expand Up @@ -73,6 +74,10 @@ private void SelectLargeAtTarget()
}
}

// Scenario 5: Multiple selection. Two-way bound to GroupedTileListBox.SelectedItems;
// the control mutates this collection directly and the demo observes it live.
public AvaloniaList<FoodItem> MultiSelectedItems { get; } = new();

// Scenario 1: Named groups
public List<FoodItem> GroupedItems { get; } = new()
{
Expand Down
Loading