如何在 WPF 中创建“响应式图像网格”

Question

Good day! I want to make a scrollable image grid like "Unsplash" site, but with WPF. I using Grid and ListBoxes, but the Grid not scrolling, scrolling only 3 ListBoxes apart from each other. What I should use for that type of thing?

What I need

What I have with wrong scrolling

WPF code:

<Grid ScrollViewer.VerticalScrollBarVisibility="Visible">
    <Grid.ColumnDefinitions>
        <ColumnDefinition>
         
        </ColumnDefinition>
            <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <ListBox Grid.Column="0" x:Name="listBox0" ScrollViewer.VerticalScrollBarVisibility="Disabled">

    </ListBox>

    <ListBox Grid.Column="1" x:Name="listBox1" ScrollViewer.VerticalScrollBarVisibility="Disabled">

    </ListBox>

    <ListBox Grid.Column="2" x:Name="listBox2" ScrollViewer.VerticalScrollBarVisibility="Disabled">

    </ListBox>
</Grid>

List filling:

for (int i = 0; i < 20; i++)
        {
            Rectangle temp = new Rectangle();
            temp.Width = 250;
            temp.Height = rnd.Next(100, 300);
            temp.Fill = GetRandColor();

            if(listStateCounter == 2)
            {
                listStateCounter = 0;
                listBox2.Items.Add(temp);
            }
            else if (listStateCounter == 1)
            {
                listStateCounter++;
                listBox1.Items.Add(temp);
            }
            else if (listStateCounter == 0)
            {
                listStateCounter++;
                listBox0.Items.Add(temp);
            }

        }

Answer 1

try this

<ScrollViewer VerticalScrollBarVisibility="Visible">
  <Grid>
    //.............................................
  </Grid>
</ScrollViewer>