WPF datagrid template

Question

Hi,

I want to make a WPF datagrid look similar to the HTML grid in the following picture:

http://img443.imageshack.us/img443/2563/saltoftheearth.jpg

Does anyone know an easy way to do this ?

Regards, S.

Answer 1

You can take a look here, at C# Corner, there are lots of useful tutorials there, and Im pretty sure you can find it, like this one.

Answer 2

I managed to make it look like this ( http://img697.imageshack.us/img697/9417/failedwpfdatagridstylin.jpg ) using the following code in a resource file. However, it still does not look like the HTML counterpart ( http://img443.imageshack.us/img443/2563/saltoftheearth.jpg )....It has to many borders .... Any ideas on how to make this WPF datagrid look nicer ?

Value="12" />

<Style x:Key="DataGridCellStyle" TargetType="{x:Type my:DataGridCell}" >
    <Setter Property="FontFamily" 
            Value="Tahoma" />
    <Setter Property="FontSize"   
            Value="12" />
    <Style.Triggers>
        <Trigger Property="IsSelected"    Value="True">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="BorderBrush" Value="Transparent" />
        </Trigger>
    </Style.Triggers>
</Style>

<Style x:Key="DataGridStyle" 
       TargetType="{x:Type my:DataGrid}" >
    <Setter Property="RowHeaderWidth" 
            Value="0" />
    <Setter Property="HorizontalAlignment" 
            Value="Left" />
    <Setter Property="SelectionUnit" 
            Value="Cell" />
    <Setter Property="SelectionMode" 
            Value="Single" />
    <Setter Property="AutoGenerateColumns" 
            Value="false" />
    <Setter Property="CanUserAddRows" 
            Value="False" />
    <Setter Property="CanUserDeleteRows" 
            Value="False" />
    <Setter Property="CanUserResizeRows" 
            Value="False" />
    <Setter Property="CanUserResizeColumns" 
            Value="False" />
    <Setter Property="CanUserSortColumns" 
            Value="True" />
    <Setter Property="CanUserReorderColumns" 
            Value="False" />
    <Setter Property="IsReadOnly"
            Value="True" />
</Style>