如何将网格动态添加到网格中

Question

对于我当前的项目，我想制作一个 UI，其中信息显示在“瓷砖”上，我将其设计为带有其他标签和进度条的网格。但我不知道如何让这些图块显示在我的主网格上。

我已经尝试过 Gridview，但它不适用于网络上的示例，并且在没有网格的情况下制作某种方式并不容易。

这是可以根据需要多次插入的网格

<Grid Margin="10" Background="AntiqueWhite" Grid.Row="0" Grid.Column="0">
            <Label Content="{Binding fieldname}" FontFamily="Arial Black" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,20,0,0"/>
            <Label Content="{Binding datebegin}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="85,85,0,0" FontFamily="Arial Black" FontSize="18" />
            <Label Content="{Binding dateend}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="285,85,0,0" FontFamily="Arial Black" FontSize="18" />
             <ProgressBar Margin="0,150,0,0" Value="{Binding progression}" Background="White" BorderBrush="Black" VerticalAlignment="Top" Height="50" />
            </Grid>

我需要一种方法将生成的确切图块添加到网格中（或者任何其他可以进入具有 3 列和无限行的滚动查看器的内容）。

Answer 1

下面是xmal。我使用 ItemsControl 和 WrapPanel 作为 ItemsPanelTemplate 来包装 ItemsControl 的项目

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Content="Add" Height="26" Width="75" Command="{Binding Add}" Grid.Row="0"/>
    <ScrollViewer Height="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1">
        <ItemsControl ItemsSource="{Binding Items}" HorizontalAlignment="Left">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Margin="10,10,0,0" BorderBrush="Black" BorderThickness="1">
                        <StackPanel Width="200" Height="Auto">
                            <Label Content="{Binding fieldname}" FontFamily="Arial Black" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0"/>
                            <Label Content="{Binding datebegin}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" FontFamily="Arial Black" FontSize="18" />
                            <Label Content="{Binding dateend}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" FontFamily="Arial Black" FontSize="18" />
                            <ProgressBar Value="{Binding progression}" Margin="5,10,5,10" Background="White" BorderBrush="Black" VerticalAlignment="Top" Height="20" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

而视图模型是

public class Item
{
    public string fieldname
    {
        get;
        set;
    }

    public string datebegin
    {
        get;
        set;
    }

    public string dateend
    {
        get;
        set;
    }

    public string progression
    {
        get;
        set;
    }

    public Item(int number)
    {
        fieldname = "Filed name " + number;
        datebegin = "12-12-12";
        dateend = "14-12-12";
        progression = (5 * number).ToString();
    }
}

public class ViewModel
{
    public ICollection<Item> Items
    {
        get;
        private set;
    }

    public ViewModel()
    {
        Items = new ObservableCollection<Item>();
    }

    public ICommand Add
    {
        get
        {
            return new RelayCommand((a) =>
            {
                Items.Add(new Item(Items.Count));
            });
        }
    }
}

中继命令

public class RelayCommand : ICommand
{
    private Action<object> execute;
    private Predicate<object> canExecute;
    public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
    {
        this.execute = execute;
        this.canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return canExecute == null || canExecute(parameter);
    }

    public void Execute(object parameter)
    {

        execute(parameter);
    }

    public event EventHandler CanExecuteChanged
    {
        add
        {
            CommandManager.RequerySuggested += value;
        }
        remove
        {
            CommandManager.RequerySuggested -= value;
        }
    }