Issue highlighting selection in Windows.UI WinUI GridView

3 weeks ago 11

ARTICLE AD BOX

I've tried several approaches to getting highlighting working for selection in a WinUI Gridview (including using a Border in the GridView.ItemTemplate DataTemplate, and a Border in the GridView.ItemContainerStyle ControlTemplate, but so far no joy. Here are XAML and .cs files that I've created as a test showing my current attempt, using VisualState changes, in a test app displaying a palette of 256 colors. What I want is for a color when selected to highlight showing the selection. Right now, there's no visual change when a colors is selected. Any suggestions would be appreciated. Thanks!

<?xml version="1.0" encoding="utf-8"?> <Window x:Class="Test2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Test2" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Title="Test2"> <Window.SystemBackdrop> <MicaBackdrop /> </Window.SystemBackdrop> <GridView x:Name="PaletteColors" ItemsSource="{x:Bind Path=ColorsModel.Colors, Mode=OneWay}" isItemClickEnabled="False" SelectionChanged="PaletteColors_SelectionChanged" SelectionMode="Extended"> <GridView.ItemContainerStyle> <Style TargetType="GridViewItem">  <Setter Property="Margin" Value="2"/> <Setter Property="MinHeight" Value="20"/> <Setter Property="MinWidth" Value="20"/> </Style> </GridView.ItemContainerStyle> <GridView.ItemsPanel> <ItemsPanelTemplate> <ItemsWrapGrid MaximumRowsOrColumns="16" Orientation="Horizontal" /> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.ItemTemplate> <DataTemplate x:DataType="local:ColorItem"> <Rectangle x:Name="Swatch" Width="20" Height="20" Fill="{Binding Brush}" Stroke="LightGray" StrokeThickness="1" Margin="0" RadiusX="2.0" RadiusY="2.0"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates">  <VisualState x:Name="Normal" /> <VisualState x:Name="Pressed"> <VisualState.Setters> <Setter Target="Swatch.Stroke" Value="DeepSkyBlue"/> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Rectangle> </DataTemplate> </GridView.ItemTemplate> </GridView> </Window> using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Media; using System.Collections.Generic; using System.Collections.ObjectModel; using Windows.UI; namespace Test2 { public class ColorItem { public SolidColorBrush Brush { get; } public string Hex { get; } public ColorItem(Color color) { Brush = new SolidColorBrush(color); Hex = $"#{color.A:X2}{color.R:X2}{color.G:X2}{color.B:X2}"; } } public class ColorsViewModel { public ColorsViewModel() { Colors = new ObservableCollection<ColorItem>(); } public ObservableCollection<ColorItem> Colors { get; set; } } /// <summary> /// An empty window that can be used on its own or navigated to within a Frame. /// </summary> public sealed partial class MainWindow : Window { public ColorsViewModel ColorsModel { get; } = new ColorsViewModel(); public MainWindow() { InitializeComponent(); InitColors(); // WinUI `Window` does not have a DataContext property. Set DataContext on the root content element instead. if (this.Content is FrameworkElement root) { root.DataContext = ColorsModel; } } public void InitColors() { for (int i = 0; i < 256; i++) { int red = 255 - i; int green = (2 * i + 64) % 256; int blue = (384 - i) % 256; ColorsModel.Colors.Add(new ColorItem(new Color() { A = 255, R = (byte)red, G = (byte)green, B = (byte)blue })); } } private void PaletteColors_SelectionChanged(object sender, SelectionChangedEventArgs e) { } } }