Question

我有一个数据源，我想在GridView的两列中显示这个数据源。我将可观察的按钮集合添加为父ListBox的项目源，并且所有按钮最终都在第二列中。如何让这三个按钮显示在第1列，然后是第2列，然后是第1列的第1列？

XAML：

<ListView x:Name="listBox">
     <ListView.View>
        <GridView x:Name="gridview">
             <GridViewColumn Header="col1" Width="200" />
             <GridViewColumn Header="col2" Width="200" />
        </GridView>
     </ListView.View>
</ListView>

c＃code：

 private IList<Button> buttons = new ObservableCollection<Button>();

        public MainWindow() {
            InitializeComponent();

            Button b = new Button();
            b.Content = "custom Button 1 ";
            buttons.Add(b);

            b = new Button();
            b.Content = "custom button 2 ";
            buttons.Add(b);

            b = new Button();
            b.Content = "custom button 3 ";
            buttons.Add(b);

            listBox.ItemsSource = buttons;
        }

Answer 1

创建一个表示ListView中一行的数据对象（视图模型），即在这种情况下具有两个属性的类型：
```
public class Row
{
    public object Col1 { get; set; }
    public object Col2 { get; set; }
}
```

将您的源集合转换为IEnumerable<Row>：

public MainWindow()
{
    InitializeComponent();

    Button b = new Button();
    b.Content = "custom Button 1 ";
    buttons.Add(b);

    b = new Button();
    b.Content = "custom button 2 ";
    buttons.Add(b);

    b = new Button();
    b.Content = "custom button 3 ";
    buttons.Add(b);

    Row[] rows = new Row[(int)Math.Ceiling(buttons.Count / 2.0)];
    int buttonIndex = 0;
    for (int i = 0; i < rows.Length; ++i)
    {
        rows[i] = new Row();
        rows[i].Col1 = buttons[buttonIndex++];
        if (buttons.Count > buttonIndex)
            rows[i].Col2 = buttons[buttonIndex++];
    }
    listBox.ItemsSource = rows;
}

<强> XAML：

<ListView x:Name="listBox">
    <ListView.View>
        <GridView x:Name="gridview">
            <GridViewColumn Header="col1" Width="200">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <ContentControl Content="{Binding Col1}" />
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn Header="col2" Width="200">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <ContentControl Content="{Binding Col2}" />
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

这就是ItemsControl的工作方式，即它为ItemsSource中的每个对象创建一个可视容器（行）。

Answer 2

我不认为gridview是一个很好的计划，但无论如何我们都要先了解它。

除了向列表视图显示按钮外，通常的方法是将数据呈现给列表视图，并将该模板放入按钮中。你可以这样：

<Window.DataContext>
    <local:MainWIndowViewModel/>
</Window.DataContext>
<Grid>
    <ListView ItemsSource="{Binding Rows}">
        <ListView.View >
            <GridView >
                <GridViewColumn Header="Col 1" Width="100">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="{Binding Col1.Content}"
                                    Command="{Binding Col1.Command}"
                                    />
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Header="Col 2" Width="100">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="{Binding Col2.Content}"
                                    Command="{Binding Col2.Commmand}"
                                    />
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

Main ViewModel

class MainWIndowViewModel
{
    public ObservableCollection<RowVM> Rows { get; set; }
    = new ObservableCollection<RowVM>
    {
        new RowVM
        {
            Col1=new ButtonData{ Content="Button A" },  Col2=new ButtonData{ Content="Button B" }
        },
                    new RowVM
        {
            Col1=new ButtonData{ Content="Button C" },  Col2=new ButtonData{ Content="Button D" }
        },
                     new RowVM
        {
            Col1=new ButtonData{ Content="Button E" } 
        }
    };
}

行和按钮视图模型

public class RowVM
{
    public ButtonData Col1 { get; set; }
    public ButtonData Col2 { get; set; }
}

public class ButtonData
{
    public string Content { get; set; }
    public ICommand Command { get; set; }
}

不是使用列，而是可以使列表框（或没有任何gridview的listview）中的数据的面板成为一个wrappanel，并且只有一个buttondata集合。 https://wpf.2000things.com/2011/10/04/400-using-a-wrappanel-as-the-items-panel-for-a-listbox/

如何让一个项目源跨越gridview中的多个列

2 个答案: