With WinUI3 and C#, how do you take a Observable list of Image paths and display them as a horizontal list that fills width?

I have a list of image paths and would like to display the images they refer to in a single horizontal row. The width of each image should be the same and they should all fill the Window's height or their allocated width as the window is resized.

I tried to do this with a StackPanel, but it does not resize the images like a Grid with *-sizing would.

    <ItemsControl
        x:Name="HandImages"
        Padding="5"
        ScrollViewer.HorizontalScrollBarVisibility="Visible">

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Image  
                    Source="{Binding}"
                    Tapped="ImageTapped"
                    Stretch="UniformToFill"
                    FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

    </ItemsControl>

You could use the UniformGrid from the Windows CommunityToolkit and use it as an ItemsPanel.

1. Name your page. We need to to do this to do bindings from the DataTemplate to the Items.Count property in the page.

2. Install the CommunityToolkit.WinUI.UI.Controls.Primitives NuGet package.

3. And this:

<ItemsControl ItemsSource="{x:Bind Items, Mode=OneWay}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:UniformGrid
                Columns="{Binding ElementName=RootPage, Path=Items.Count}"
                Rows="0" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

It is possible to do this programmatically with minimal XAML. Here is the XAML I used.

    <Grid x:Name="HandGrid"
          RowDefinitions="*">
        
    </Grid>

Then create an observable collection of the views. I used this in my case.

public ObservableCollection<string> images = new();

Then, add code to respond to changes in the collection like this.

// Observe the collection somewhere where it is safe to do so
viewModel.images.CollectionChanged += HandChanged;
...
        private readonly List<ColumnDefinition> ColumnDefinitions = new();
        private readonly List<string> ImagePaths = new();
        private readonly List<Image> Images = new();

        private void HandChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            if(e.OldItems != null)
            {
                foreach (string item in e.NewItems)
                {
                    HandGrid.ColumnDefinitions.Remove(ColumnDefinitions[^1]);
                    ColumnDefinitions.RemoveAt(ColumnDefinitions.Count - 1);
                    Images.RemoveAt(ImagePaths.IndexOf(item));
                    ImagePaths.Remove(item);
                }
            }

            if (e.NewItems != null)
            {
                foreach (string item in e.NewItems)
                {
                    ColumnDefinition cd = new()
                    {
                        Width = new GridLength(1, GridUnitType.Star)
                    };
                    ColumnDefinitions.Add(cd);
                    HandGrid.ColumnDefinitions.Add(cd);

                    Image image = new() {
                        Source = new BitmapImage(new Uri(FileUtil.GetFullPath(item))),
                        Stretch = Stretch.Uniform,
                    };
                    
                    Images.Add(image);
                    ImagePaths.Add(item);
                    Grid.SetColumn(image, Images.Count - 1);
                    HandGrid.Children.Add(image);
                }
            }
        }