Interactive Grid WPF

Question

I am currently working in C# WPF 4.5 and am attempting to create an interactive grid. Given the grid cell square size (width = height), number of columns and number of rows, I'd like to dynamically generate the grid on the screen.

For the generated grid, I'd like the grid lines to be visible. I'm thinking this could be emulated by just drawing a border within each cell if nothing else. On top of all this, I need an event to be able to determine what cell the user clicks on (i.e., on click return gird column and row) with the ability to select one or more cell at a time.

Any help or ideas on how I could create something like this or is there a better way to go about it? Thanks in advance!

Edit: So here's some progress I've made:

1. Created a custom checkbox:

       <Style x:Key="styleCustomCheckBox" TargetType="{x:Type CheckBox}">
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="{x:Type CheckBox}">
                   <Grid x:Name="Background" Background="Transparent">
                       <Rectangle x:Name="fillCheckBox"/>
                   </Grid>
                   <ControlTemplate.Triggers>
                       <Trigger Property="IsChecked" Value="False">
                           <Setter TargetName="fillCheckBox" Property="Fill" Value="Transparent"/>
                       </Trigger>
                       <Trigger Property="IsChecked" Value="True">
                           <Setter TargetName="fillCheckBox" Property="Fill" Value="Red"/>
                           <Setter TargetName="fillCheckBox" Property="Opacity" Value=".3"/>
                       </Trigger>
                   </ControlTemplate.Triggers>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>
   

And then just populate a grid with the custom checkboxes of that style:

<CheckBox Grid.Column="1" Grid.Row="1" Style="{StaticResource styleCustomCheckBox}" />

So now I'd like to map each of checkboxes within the grid where I can gather whether the checkbox is checked or not and what grid row and column it is in, how would I go about this?

Answer 1

I would use an ItemsControl with its ItemsPanelTemplate set to a UniformGrid, and it's ItemTemplate set to your CheckBox

It would be easiest if you could bind your ItemsControl.ItemsSource to a collection of data objects in your code behind. For example:

<ItemsControl ItemsSource="{Binding MyCollection}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="5" Columns="5" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Red" BorderThickness="1">
               <CheckBox Style="{StaticResource styleCustomCheckBox}" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

If you needed to specify the Row or Column index of the checked item, you could add that to your data item and use a regular Grid instead of a UniformGrid, and apply an ItemContainerStyle like this:

<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Grid.Column" Value="{Binding ColumnIndex}" />
        <Setter Property="Grid.Row" Value="{Binding RowIndex}" />
    </Style>
</ItemsControl.ItemContainerStyle>

To determine the item clicked on, that depends on how you structure your data object and what you actually want to do in your click.

If you wanted the data item behind the square, you could just use the DataContext, such as

void MyCheckBox_Clicked(object sender, EventArgs e)
{
    var selectedItem = ((CheckBox)sender).DataContext;
}

Or if you had something like a data item with an IsChecked property like this:

<CheckBox IsChecked="{Binding IsChecked}" 
          Style="{StaticResource styleCustomCheckBox}" />

You could easily attach an event to the PropertyChanged event for the data item's IsChecked property, and run some code there.

As a third alternative you could use a Button for your ItemTemplate and pass the selected item as the CommandParameter

<Border BorderBrush="Red" BorderThickness="1">
    <Button CommandParameter="{Binding }" ... />
</Border>

I can't give you an definite answer because I don't know your code base and what you're trying to do, but I hope this gives you enough information to give you a rough start and point you in the right direction for your situation.