如何填充基于二维阵列上的WPF网格如何填充基于二维阵列上的WPF网格(How to populate

2019-05-10 10:48发布

我有对象的2维阵列和我基本上要数据绑定每一个以一个细胞在WPF网格。 目前我有这个工作,但我在程序上做的大部分。 我创建了正确数量的行和列的定义,然后我遍历细胞和创建控件并设置正确的绑定每一个。

最起码,我想能够使用模板来指定XAML的控件和绑定。 理想情况下,我想摆脱的程序代码,只是做这一切与数据绑定,但我不知道这是可能的。

这是我目前使用的代码:

public void BindGrid()
{
    m_Grid.Children.Clear();
    m_Grid.ColumnDefinitions.Clear();
    m_Grid.RowDefinitions.Clear();

    for (int x = 0; x < MefGrid.Width; x++)
    {
        m_Grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star), });
    }

    for (int y = 0; y < MefGrid.Height; y++)
    {
        m_Grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star), });
    }

    for (int x = 0; x < MefGrid.Width; x++)
    {
        for (int y = 0; y < MefGrid.Height; y++)
        {
            Cell cell = (Cell)MefGrid[x, y];                    

            SolidColorBrush brush = new SolidColorBrush();

            var binding = new Binding("On");
            binding.Converter = new BoolColorConverter();
            binding.Mode = BindingMode.OneWay;

            BindingOperations.SetBinding(brush, SolidColorBrush.ColorProperty, binding);

            var rect = new Rectangle();
            rect.DataContext = cell;
            rect.Fill = brush;
            rect.SetValue(Grid.RowProperty, y);
            rect.SetValue(Grid.ColumnProperty, x);
            m_Grid.Children.Add(rect);
        }
    }

}

Answer 1:

网格的目的不是真正的数据绑定,它仅仅是一个面板。 我列出下来的最简单的方法来完成二维表的可视化

<Window.Resources>
    <DataTemplate x:Key="DataTemplate_Level2">
            <Button Content="{Binding}" Height="40" Width="50" Margin="4,4,4,4"/>
    </DataTemplate>

    <DataTemplate x:Key="DataTemplate_Level1">
        <ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_Level2}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </DataTemplate>

</Window.Resources>
<Grid>
    <ItemsControl x:Name="lst" ItemTemplate="{DynamicResource DataTemplate_Level1}"/>
</Grid>

而在后面的代码设置LST的的ItemsSource与TwoDimentional数据结构。

  public Window1()
    {
        List<List<int>> lsts = new List<List<int>>();

        for (int i = 0; i < 5; i++)
        {
            lsts.Add(new List<int>());

            for (int j = 0; j < 5; j++)
            {
                lsts[i].Add(i * 10 + j);
            }
        }

        InitializeComponent();

        lst.ItemsSource = lsts;
    }

这使您如下面的屏幕输出。 您可以编辑DataTemplate_Level2以添加对象的更具体的数据。



Answer 2:

下面是一个称为控制DataGrid2D可以基于2D或填充
1D阵列(或任何实现的IList接口)。 它的子类DataGrid并增加了一个称为属性ItemsSource2D其用于对2D或1D源结合。 图书馆可以下载在这里和源代码可以下载在这里 。

要使用它只需添加到DataGrid2DLibrary.dll参考,添加这个命名空间

xmlns:dg2d="clr-namespace:DataGrid2DLibrary;assembly=DataGrid2DLibrary"

然后创建一个DataGrid2D并将其绑定到你的IList,二维数组或一维数组像这样

<dg2d:DataGrid2D Name="dataGrid2D"
                 ItemsSource2D="{Binding Int2DList}"/>


旧文章
这里是可以结合的2D阵列的数据网格WPF的实现。

假设我们有这个二维数组

private int[,] m_intArray = new int[5, 5];
...
for (int i = 0; i < 5; i++)
{
    for (int j = 0; j < 5; j++)
    {
        m_intArray[i,j] = (i * 10 + j);
    }
}

然后,我们希望这个二维数组到WPF DataGrid和我们做应在阵列中反映的变化结合。 要做到这一点我用埃里克利珀的参考类从这个线程。

public class Ref<T>  
{ 
    private readonly Func<T> getter;  
    private readonly Action<T> setter; 
    public Ref(Func<T> getter, Action<T> setter)  
    {  
        this.getter = getter;  
        this.setter = setter;  
    } 
    public T Value { get { return getter(); } set { setter(value); } }  
} 

然后我做了一个静态辅助类,可以采取一个二维数组,并返回使用上述参考文献类一个DataView的方法。

public static DataView GetBindable2DArray<T>(T[,] array)
{
    DataTable dataTable = new DataTable();
    for (int i = 0; i < array.GetLength(1); i++)
    {
        dataTable.Columns.Add(i.ToString(), typeof(Ref<T>));
    }
    for (int i = 0; i < array.GetLength(0); i++)
    {
        DataRow dataRow = dataTable.NewRow();
        dataTable.Rows.Add(dataRow);
    }
    DataView dataView = new DataView(dataTable);
    for (int i = 0; i < array.GetLength(0); i++)
    {
        for (int j = 0; j < array.GetLength(1); j++)
        {
            int a = i;
            int b = j;
            Ref<T> refT = new Ref<T>(() => array[a, b], z => { array[a, b] = z; });
            dataView[i][j] = refT;
        }
    }
    return dataView;
}

这几乎足以结合,但在绑定的路径将指向参考,而不是对象的Ref.Value这就需要我们,所以我们必须得到时产生的列来改变这一点。

<DataGrid Name="c_dataGrid"
          RowHeaderWidth="0"
          ColumnHeaderHeight="0"
          AutoGenerateColumns="True"
          AutoGeneratingColumn="c_dataGrid_AutoGeneratingColumn"/>

private void c_dataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    DataGridTextColumn column = e.Column as DataGridTextColumn;
    Binding binding = column.Binding as Binding;
    binding.Path = new PropertyPath(binding.Path.Path + ".Value");
}

并在此之后,我们可以使用

c_dataGrid.ItemsSource = BindingHelper.GetBindable2DArray<int>(m_intArray);

和输出将看起来像这样

在所做的任何更改DataGrid将反映在m_intArray。



Answer 3:

我写的附加属性的一个小型图书馆的DataGrid 。 这里是源

样品,其中Data2D是int[,]

<DataGrid HeadersVisibility="None"
          dataGrid2D:Source2D.ItemsSource2D="{Binding Data2D}" />

呈现:



Answer 4:

你可能想看看这个链接: http://www.thinkbottomup.com.au/site/blog/Game_of_Life_in_XAML_WPF_using_embedded_Python

如果您使用列表中的列表,你可以使用myList中[X] [Y]进入细胞。



Answer 5:

这是基于另一种解决方案Meleak的答案,但无需为AutoGeneratingColumn每个绑定背后的代码的事件处理程序DataGrid

public static DataView GetBindable2DArray<T>(T[,] array)
{
    var table = new DataTable();
    for (var i = 0; i < array.GetLength(1); i++)
    {
        table.Columns.Add(i+1, typeof(bool))
                     .ExtendedProperties.Add("idx", i); // Save original column index
    }
    for (var i = 0; i < array.GetLength(0); i++)
    {
        table.Rows.Add(table.NewRow());
    }

    var view = new DataView(table);
    for (var ri = 0; ri < array.GetLength(0); ri++)
    {
        for (var ci = 0; ci < array.GetLength(1); ci++)
        {
            view[ri][ci] = array[ri, ci];
        }
    }

    // Avoids writing an 'AutogeneratingColumn' handler
    table.ColumnChanged += (s, e) => 
    {
        var ci = (int)e.Column.ExtendedProperties["idx"]; // Retrieve original column index
        var ri = e.Row.Table.Rows.IndexOf(e.Row); // Retrieve row index

        array[ri, ci] = (T)view[ri][ci];
    };

    return view;
}


文章来源: How to populate a WPF grid based on a 2-dimensional array