How do I dynamically add and position CheckBox elements in WPF?

Question

I started making a WinForms application to display a grid of 4×4×4 checkboxes, representing a real-life 4 ³ grid of LEDs.

This is what it looks like right now:

I want to convert this to an WPF app, so that I can use the transparency option of the WPF Checkbox, to make the non-selected layer [there will be 4 layers] of checkboxes slightly transparent, to give it a more true 3D feeling.

I am new to WPF and I have tried to nest 2 elements in the main Window [for example, 2 grids to slightly overlap the position, by maybe 20 pixels, so that they would appear to be 3d-staggered], but it simply won't let me do that, and only lets me add a child grid inside the original grid.

TLDR: How can I dynamically create lots of checkboxes while giving them absolute pixel positions?

My current working WinForms C# code:

int spacing = 25;
int zero = 0;
    for (int z = 1; z <= 4; z++)
            {
                List<string> zString = new List<string>();
                for (int y = 1; y <= 4; y++)
                {
                    for (int x = 1; x <= 4; x++)
                    {

                        int pixel_x = zero + ((x - 1) * spacing);
                        int pixel_y = (zero - 4) + ((y - 1) * spacing);

                        //int id = ((y - 1) * 4) + x;

                        CheckBox box = new CheckBox();
                        box.CheckStateChanged += new System.EventHandler(checkBox2_CheckedChanged);
                        box.Tag = id;
                        zString.Add(id.ToString());
                        //box.Text = id.ToString();
                        box.BackColor = Color.Transparent;
                        //box.
                        box.AutoSize = false;
                        box.Size = new Size(20, 20);
                        box.Padding = new Padding(3);
                        box.Location = new Point(pixel_x, pixel_y);

                        this.Controls.Add(box);
                        id++;
                    }
                }
          zero += 25;
          }

Answer 1

Consider using an ItemTemplate ( or DataTemplate) to establish how each item will look within your viewmodel's collection.

Example:

<ListBox Width="400" Margin="10"
         ItemsSource="{Binding Source={StaticResource myTodoList}}">
   <ListBox.ItemTemplate>
     <DataTemplate>
       <StackPanel>
         <TextBlock Text="{Binding Path=TaskName}" />
         <TextBlock Text="{Binding Path=Description}"/>
         <TextBlock Text="{Binding Path=Priority}"/>
       </StackPanel>
     </DataTemplate>
   </ListBox.ItemTemplate>
 </ListBox>

Answer 2

I would use multiple UniformGrid s stacked on top of each other inside a regular grid (so they overlap). Each UniformGrid would have its Top and Left margins offset by a specific amount.

The item source of each UniformGrid would be bound to a list of Boolean properties on your view model for each "layer".

Answer 3

You can try this. Use a Canvas inside your Window.

<Window x:Name="myWindow1" x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    >
<Canvas x:Name="canvas" >
    </Canvas>

Unlike Location available in Windows Forms, you can use Margin to set the position

    int spacing = 100;
int zero = 0;
for (int z = 1; z <= 4; z++)
{
    List<string> zString = new List<string>();
    for (int y = 1; y <= 4; y++)
    {
        for (int x = 1; x <= 4; x++)
        {

            int pixel_x =  zero + ((x - 1) * spacing);
            int pixel_y =  zero + ((y - 1) * spacing);

            CheckBox box = new CheckBox();
            Canvas.SetLeft(box, pixel_x);
            Canvas.SetTop(box, pixel_y);

            this.canvas.Children.Add(box);
        }
    }

    zero = zero + 50;
}