how to format the data inside the DataGridTemplateColumn in datagrid

Question

hi,

this is my xaml code where i have 2 fields placed under one template column.

now i am getting the format the output like this so that i can specify the space betweeen these 2 columns

    Color

red        image1

green     image2

green     image2

white     image6

so that output looks good.

How can i define space between them so that it looks like the above one

right now thw output is like this

    color

    Redimage1

    greenimage2

    greenimage2

    whiteimage6

<sdk:DataGridTemplateColumn  Header="Color" Width="80">
    <sdk:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Loaded ="StackPanel_Loaded" Orientation="Horizontal" Background="Transparent">
                <TextBlock Text="{Binding Color}" TextWrapping="NoWrap" HorizontalAlignment="Center" Foreground="Blue"></TextBlock>
                <Image x:Name="imgTargetScore" Source ="{Binding ColorImage}" Width="20" Height="20" Stretch ="Fill"/>
            </StackPanel>
        </DataTemplate>
    </sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>

loking forward for an solution

thanks in advance

prince

Answer 1

You need to put a bit of Margin on your TextBlock and/or Image controls:

<TextBlock Text="{Binding Color}" Margin="0,0,5,0" TextWrapping="NoWrap" HorizontalAlignment="Center" Foreground="Blue" />

This example puts a 5px margin on the right edge of the TextBlock. If you want your images to line up vertically then you may want to also make the TextBlock a set width, by default it is only as long as the text in it.