Question

I have a datagrid as given below:

    <DataGrid  SizeChanged="dgvMap_SizeChanged" Padding="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" GridLinesVisibility="None" Background="Transparent" 
                                       BorderBrush="Transparent" IsReadOnly="True" ItemsSource="{Binding IsAsync=True}"  EnableColumnVirtualization="True" 
                                       EnableRowVirtualization="True" AutoGenerateColumns="True" AutoGeneratingColumn="dgvMap_AutoGeneratingColumn" 
                                       CanUserAddRows="False" CanUserSortColumns="true" CanUserDeleteRows="False" HeadersVisibility="None" 
                                       Name="dgvMap" SelectionMode="Single" Panel.ZIndex="0" Margin="0,0,0,0" VirtualizingStackPanel.VirtualizationMode="Standard" 
                                       PreviewMouseDown="dgvMap_PreviewMouseDown" >
                                <!--for removing the blue color bkground default for row selection-->
                                <DataGrid.Resources>
                                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                                </DataGrid.Resources>
                                <DataGrid.CellStyle>
                                    <Style TargetType="DataGridCell">
                                        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                                        <Setter Property="Padding" Value="0"/>
                                        <Setter Property="Height" Value="50" />
                                        <Setter Property="Width" Value="50" />
                                    </Style>
                                </DataGrid.CellStyle>
                            </DataGrid>  

This is the style of template column:

<DataTemplate x:Key="MyDataTemplate" DataType="DataRowView">
            <StackPanel Background="Transparent">
                <Image Tag="{Binding}" Name="Layer0" Margin="0,0,0,0"  Panel.ZIndex="1"  
                        ToolTipService.HasDropShadow="True" ToolTipService.ShowDuration="20000" ToolTipService.InitialShowDelay="200" >

                <Image.Resources>
                    <Style TargetType="{x:Type Image}">
                        <Setter Property="Source" Value="{Binding Converter={StaticResource IntToImageConverter}, ConverterParameter = Layer0}" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <!-- Hover image -->
                                <Setter Property="Cursor" Value="Hand"/>
                                <Setter Property="Source" Value="D:\small.png"/>

                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Image.Resources>
            </Image>
        </StackPanel>
    </DataTemplate>

Though in datagridcellstyle i have defined cell value as width and height as 50. But when i load datagrid with 9 rows its height is showing 452 instead of 450 (9*50) and in the same way width also showing more than that.
Why its showing like that??
How to avoid that??

Answer 1

may be because there is some by default padding or margin inside the template. You can either try giving padding for cell to 0 or can see inside control template of datagrid in Expression Blend that where the space is coming from.