How to create a matrix of buttons

Question

I need to create a static matrix (need to be datagrid) 10*10 that contain buttons in each cell.
Any one have an idea how to do that?

Thank you all.

Xmal:

<Grid>
    <DataGrid ItemsSource="{Binding Arr}">  
        <DataGrid.ItemTemplate>  
            <DataTemplate>  
                <Button />  
            </DataTemplate>  
        </DataGrid.ItemTemplate>  
    </DataGrid>  
</Grid>

Code:

namespace WpfApplication4  
{
    /// <summary>  
    /// Interaction logic for MainWindow.xaml  
    /// </summary>  
    public partial class MainWindow : Window  
    {  
       private List<string> m_Arr;  

        public MainWindow()  
        {  
             InitializeComponent();  
             DataContext = this;  

            m_Arr = new List<string>();  
            for (int i = 0; i < 10; i++)  
            {  
                m_Arr.Add(i.ToString());  
            }  
         }  

        public List<string> Arr  
        {
            get { return m_Arr; }  
            set { m_Arr = value; }  
        }  
    }  
}

I have tried to create an 2d array of buttons in code behind, and bind it to the a data grid, but it didnt give me the expected result, — user1606328, Sep 17 '12 at 18:25
I have tried to create a List> and bind it to a datagrid and this gave me a matrix of int's but i didnt succeeded to change it to buttons instead of int... — user1606328, Sep 17 '12 at 18:32
And just what part of the result was not expected? Don't use the matrix tag - it is for mathematical matrix and in matrix algebra. — paparazzo, Sep 17 '12 at 18:42
instead of buttons i get the toString (system.window.controls.buttons) — user1606328, Sep 17 '12 at 18:55
You probably want something like an `ItemsControl` instead of a `DataGrid`, and to define the `ItemTemplate` as a `Button`. I have some [examples on my blog](https://rachel53461.wordpress.com/2011/09/17/wpf-itemscontrol-example/) that should help explain the process. A very simple way of doing it would be to change the `ItemsPanelTemplate` to a `UniformGrid` that is 10x10, and put all your items in a single `List`, or you can use `List>` and use two nested ItemsControls, one with a Vertical StackPanel for the `ItemsPanelTemplate` and the other with a Horizontal StackPanel — Rachel, Sep 17 '12 at 18:56

score 2 · Answer 1 · answered Sep 17 '12 at 18:29

You probably don't want to bind an array of buttons to a datagrid.

Instead, you should build an array of commands, bind the itemssource of your itemscontrol to your list of commands, and datatemplate those commands as buttons bound back to the command.

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

You can as you stated on your comment, create a 2D array. However, the default WPF DataGrid does not support a 2D ItemsSource

You can for example use the DataGrid2D control introduced here:

How to populate a WPF grid based on a 2-dimensional array

I personally work with that and... It works fine!

Bottom note: Don't create array of Buttons to use as an ItemsSource. You should rather do the following, for example:

<DataGrid ItemsSource="{Binding MyList}">
  <DataGrid.ItemTemplate>
     <DataTemplate>
        <Button Content="{Binding}" />
     </DataTemplate>
  </DataGrid.ItemTemplate>
</DataGrid>

where MyList is an IList<string>

Do it as a test. Then you can use a more complex ItemsSource, including the content string + the Command to call when clicking on the button. Way cleaner, and MVVM-compliant =)

edited May 23 '17 at 12:31

Community

1
1

answered Sep 17 '12 at 18:30

Damascus

6,553
5
39
53

Oops, I did a small mistake, give me a minute to edit this ^^ – Damascus Sep 17 '12 at 18:42
Fixed, an `ItemTemplate` must contain a `DataTemplate` first... This is what happens when I write code without Visual Studio's help =) – Damascus Sep 17 '12 at 18:44
Your code is wrong. Look at your `Button`: you didn't put anything as a Content! – Damascus Sep 17 '12 at 20:18
Oh, you are binding a List (one dimension only). In this case, you should use a `ListBox` rather than a `DataGrid` – Damascus Sep 17 '12 at 20:42
As stated in the answer, go for the exact same idea, but instead of using a `DataGrid`, use the `DataGrid2D` you'll find in the embedded link => bind it to a 2D array and let the magic happen =) – Damascus Sep 17 '12 at 21:06
Ok... its really works, i have 2d array but the datagrid display string and not buttons, ny idea why? – user1606328 Sep 17 '12 at 21:16
You probably forgot the template! Default display is string, to have buttons you have to fill the field `ItemTemplate` as I showed you above – Damascus Sep 19 '12 at 13:19

How to create a matrix of buttons

2 Answers2