Winui3 ListView - show button between list items - xaml

Question

I'm trying to learn WinUI by building an app that can help with planning holidays. One of the things I'm trying to do is build a UI that shows a list of destinations (currently using a ListView), and then have a button to the right essentially pointing to the line between them that could pop up a UI for 'travel' between the two destinations.
This is a mockup of what I'm trying to achieve:
The buttons with the badly drawn plane and train icons should represent the travel between the two locations and therefore should be in the middle.
I've mainly been flailing about trying to get it to work using a grid inside of the DataTemplate, but haven't been able to get the 'half-way' alignment without making the gap between the destinations bigger.
Does anyone have any suggestions as to how I could achieve this, or is it a fools errand?

Answer 1

I guess you need to create a user control (or a custom control). Something like this:
CustomList.xaml
<UserControl
x:Class="UserControls.CustomList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:UserControls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="RootContainer" />
</UserControl>
CustomList.xaml
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Data;
using System.Collections.Generic;
using Windows.Foundation.Collections;
namespace UserControls;
public sealed partial class CustomList : UserControl
{
public static readonly DependencyProperty MainItemsProperty = DependencyProperty.Register(
nameof(MainItems),
typeof(IEnumerable<string>),
typeof(CustomList),
new PropertyMetadata(default, (d, e) => (d as CustomList)?.OnItemsPropertyChanged()));
public static readonly DependencyProperty SubItemsProperty = DependencyProperty.Register(
nameof(SubItems),
typeof(IEnumerable<string>),
typeof(CustomList),
new PropertyMetadata(default, (d, e) => (d as CustomList)?.OnItemsPropertyChanged()));
public CustomList()
{
this.InitializeComponent();
this.RootContainer.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(0, GridUnitType.Auto) });
this.RootContainer.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(0, GridUnitType.Auto) });
}
public IEnumerable<string> MainItems
{
get => (IEnumerable<string>)GetValue(MainItemsProperty);
set => SetValue(MainItemsProperty, value);
}
public IEnumerable<string> SubItems
{
get => (IEnumerable<string>)GetValue(SubItemsProperty);
set => SetValue(SubItemsProperty, value);
}
private ICollectionView? MainItemsCollectionView { get; set; }
private ICollectionView? SubItemsCollectionView { get; set; }
private void OnItemsPropertyChanged()
{
CollectionViewSource mainCollectionViewSource = new()
{
Source = MainItems
};
if (MainItemsCollectionView is not null)
{
MainItemsCollectionView.VectorChanged -= ItemsCollectionView_VectorChanged;
}
MainItemsCollectionView = mainCollectionViewSource.View;
MainItemsCollectionView.VectorChanged += ItemsCollectionView_VectorChanged;
CollectionViewSource subCollectionViewSource = new()
{
Source = SubItems
};
SubItemsCollectionView = subCollectionViewSource.View;
RefreshList();
}
private void ItemsCollectionView_VectorChanged(IObservableVector<object> sender, IVectorChangedEventArgs #event)
{
RefreshList();
}
private void RefreshList()
{
this.RootContainer.Children.Clear();
this.RootContainer.RowDefinitions.Clear();
if (MainItemsCollectionView is not null)
{
UpdateRowDefinitions(MainItemsCollectionView.Count);
for (int i = 0; i < MainItemsCollectionView.Count; i++)
{
TextBlock mainItemTextBlock = new()
{
Text = MainItemsCollectionView[i] as string,
};
Grid.SetColumn(mainItemTextBlock, 0);
Grid.SetRow(mainItemTextBlock, i * 2);
Grid.SetRowSpan(mainItemTextBlock, 2);
this.RootContainer.Children.Add(mainItemTextBlock);
if (SubItemsCollectionView?.Count > i)
{
TextBlock subItemTextBlock = new()
{
Text = SubItemsCollectionView[i] as string,
};
Grid.SetColumn(subItemTextBlock, 1);
Grid.SetRow(subItemTextBlock, (i * 2) + 1);
Grid.SetRowSpan(subItemTextBlock, 2);
this.RootContainer.Children.Add(subItemTextBlock);
}
}
}
}
private void UpdateRowDefinitions(int mainItemsCount)
{
int requiredRowsCount = mainItemsCount * 2;
while (this.RootContainer.RowDefinitions.Count != requiredRowsCount)
{
if (this.RootContainer.RowDefinitions.Count < requiredRowsCount)
{
this.RootContainer.RowDefinitions.Add(new RowDefinition()
{
Height = new GridLength(0, GridUnitType.Auto),
});
continue;
}
if (this.RootContainer.RowDefinitions.Count > requiredRowsCount)
{
this.RootContainer.RowDefinitions.RemoveAt(this.RootContainer.RowDefinitions.Count - 1);
continue;
}
}
}
}
MainPageViewModel.cs
using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;
namespace UserControls;
public partial class MainPageViewModel : ObservableObject
{
[ObservableProperty]
private ObservableCollection<string> mainItems = new()
{
"New York",
"London",
"Edinburgh"
};
[ObservableProperty]
private ObservableCollection<string> subItems = new()
{
"Airplane",
"Train",
};
}
MainPage.xaml
<Grid>
<local:CustomList
MainItems="{x:Bind ViewModel.MainItems, Mode=OneWay}"
SubItems="{x:Bind ViewModel.SubItems, Mode=OneWay}" />
</Grid>