xamlwinui-3winuiwindows-app-sdkwinui-xaml

Can I change WinUI 3 ListViewItemPresenter selection indicator placement from left to top?


I want to create a horizontally scrollable ListView with a selection indicator located at the top or bottom. Can I achieve that by restyling ListViewItemPresenter or anyhow else reusing it?


Solution

  • I'm not sure if you can restyle ListViewItemPresenter.

    The selection indicator is a Border with no name, so you need to find it by yourself. In the example below, I'm using the CommunityToolkit.WinUI.Extensions NuGet package.

    private void MemberListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (sender is not ListView listView ||
            listView.ContainerFromItem(listView.SelectedItem) is not ListViewItem selectedListViewItem ||
            selectedListViewItem.FindDescendant<ListViewItemPresenter>() is not { } selectedListViewItemPresenter ||
            selectedListViewItemPresenter.FindDescendants().OfType<Border>().LastOrDefault() is not Border selectionIndicator)
        {
            return;
        }
    
        selectionIndicator.Width = 64;
        selectionIndicator.Height = 3;
        selectionIndicator.Margin = new Thickness(0, 0, 0, -8);
        selectionIndicator.HorizontalAlignment = HorizontalAlignment.Center;
        selectionIndicator.VerticalAlignment = VerticalAlignment.Bottom;
    }