Make Silverlight DataGridCell contents fill the cell?

Question

I am trying to recognize a MouseLeftButtonDown on every cell in a DataGrid, however two things are stopping me:

• DataGridCell doesn't fire click events
• Using a grid (with click event) as the child element won't fill the cell, and therefore is only clickable on its content which it auto-sizes itself to fit.

Here's my cell template:

    <DataTemplate x:Key="...">
    <Grid MouseLeftButtonDown="..."
          VerticalAlignment="Stretch"
          HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image     HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Width="24" Height="24"
                   Source="..."/>
    </Grid>
    </DataTemplate>

Row heights/column widths mean a cell is 64px high and 80px wide, and resizable, so the 24x24 image inside is the only clickable portion in a potentially large cell. The DataGridCell itself is styled as follows:

    <Style TargetType="data:DataGridCell" x:Key="...">
      <Setter Property="Height" Value="64"/>
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    </Style>

Ideally, the grid should expand to the size of the containing cell. But no matter how many times I assign the alignment properties to stretch, it won't. You can see by setting the Grid's background. It fits to its content, no more.

I have managed to hack together a solution by placing transparent Canvas elements in columns 0 and 2 and setting a column maxwidth, but I feel like there must be a better way.

Answer 1

Actually, the Grid has already fill the cell.You can set a background to the Grid like :

  <Grid MouseLeftButtonDown="Grid_MouseLeftButtonDown"  Background="Red"
      VerticalAlignment="Stretch"
      HorizontalAlignment="Stretch" >

Then try to click it, the MouseLeftButtonDown event will be fired.

The reason is, the Grid's Background is null in default, it means there is no drawing area on UI, so no event will be fired. You can set Background="Transparent" instead.

Background="Transparent" is different from Background= null , Background="Transparent" means the control has a background and there is a drawing area.

here is my example:

<Window.Resources>
    <Style TargetType="DataGridCell">
        <Setter Property="Height" Value="64"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    </Style>
</Window.Resources>

  <DataGrid x:Name="dg">
    <DataGrid.Columns>
        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid MouseLeftButtonDown="Grid_MouseLeftButtonDown" Background="Red"
      VerticalAlignment="Stretch"
      HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image     HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Width="24" Height="24"
               Source="add.png"/>
                    </Grid>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>


public MainWindow()
{
    InitializeComponent();
    List<string> lst = new List<string>() { "123" };
    dg.ItemsSource = lst;
}

private void Grid_MouseLeftButtonDown(object sender,      MouseButtonEventArgs e)
{
    MessageBox.Show("hit");
}