Заполните сетку, затем продолжите вниз в WPF

Question

[введите описание изображения здесь] [1] Я хочу создать приложение, которое отображает все файлы в папке в виде кнопок, чтобы я мог открыть их из приложения. Таким образом, они добавляются динамически. Но у меня есть проблема: мне нужно показать их как сетку, рядом. И если существует более 9 файлов, необходимо прокрутить вниз. Я пробовал с макетом:

<Grid Name="buttonGrid">
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
        <Grid Height="450" Width="800" Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
        </Grid>
    </ScrollViewer>
</Grid>

И я C #:

public partial class PlayGame : Page
{
    public PlayGame()
    {
        InitializeComponent();
        AddButtons();

    }

    //Add buttons to grid
    private void AddButtons()
    {
        var folderName = $"{AppDomain.CurrentDomain.BaseDirectory}games";
        if (!Directory.Exists(folderName))
        {
            Directory.CreateDirectory(folderName);
        }

        var allFiles = Directory.GetFiles(folderName);

        foreach (string fileName in allFiles)
        {
            var fi = new FileInfo(fileName);


            Button newBtn = new Button
            {
                Content = fi.Name,
                Name = "Button" + fi.Name.Replace(".", "_"),
                BorderThickness = new Thickness(0)
            };

            Grid.SetRow(newBtn, 0);
            Grid.SetColumn(newBtn, 0);

            newBtn.Click += OpenFile;

            buttonGrid.Children.Add(newBtn);

        }
    }
}

И это работает частично ... Кнопки добавляются, и они работают, но они накладываются друг на друга. Так как бы это исправить?

Я хочу это так: https://i.stack.imgur.com/6EUKS.png Но динамически для каждого файла, есть в папке. А если количество файлов больше 9, то прокрутка начинает действовать.

Answer 1

Попробуйте использовать

<ScrollViewer Height="300">
    <WrapPanel Name="listView" Orientation="Horizontal">
    </WrapPanel>
</ScrollViewer>

Answer 2

Ты очень близко. Попробуйте увеличить столбец

Grid.SetColumn(newBtn, i);

за каждую итерацию.

Тогда вы также можете установить строку

Grid.SetRow(newBtn, i % 3);

для добавления новой строки каждые три кнопки.

Теперь, если вы хотите новую строку, вы можете добавить ее с помощью этой команды:

buttonGrid.RowDefinitions.Add(new RowDefinition());