WPF datagrid problem

Question

I created this datagrid, and it all works fine, but there's this little annoying problem

here's a screenshot of my datagrid

http://users.telenet.be/i_dislike_mushrooms/datagridproblem.JPG

But there's this small "column" to the left which annoys me like hell. Here's my code:

<Window x:Class="IMDB.ML.Window1"
Name="This"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
Title="IMDB.ML" Width="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenWidthKey}}"
Height="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenHeightKey}}"
WindowStartupLocation="CenterScreen" WindowStyle="None">
<Window.Resources>
    <Style x:Key="HeaderTextStyle" TargetType="{x:Type dg:DataGridColumnHeader}">
        <Setter Property="Background" Value="DarkSlateGray" />
        <Setter Property="Foreground" Value="White" />
    </Style>
</Window.Resources>
<Grid>
    <Menu Height="22" Name="TopMenu" FontFamily="Verdana" FontSize="12" VerticalAlignment="Top" Background="DarkSlateGray">
        <Menu.BitmapEffect>
            <DropShadowBitmapEffect />
        </Menu.BitmapEffect>
        <MenuItem Header="_File" Background="Transparent" Foreground="White">
            <MenuItem Header="_Close" Background="DarkSlateGray" Foreground="White" Click="close_Click" />
        </MenuItem>
        <MenuItem Header="_Edit" Background="Transparent" Foreground="White">
        </MenuItem>
    </Menu>
    <dg:DataGrid Background="DarkSlateGray" ItemsSource="{Binding ElementName=This, Path=GameData}" ColumnWidth="*"
          Margin="5,35,5,5" AutoGenerateColumns="False" ColumnHeaderStyle="{StaticResource HeaderTextStyle}">
        <dg:DataGrid.Columns>
            <dg:DataGridTextColumn IsReadOnly="True" Binding="{Binding Title}" Header="Title" />
            <dg:DataGridTextColumn IsReadOnly="True" Width="60"  Binding="{Binding Score}" Header="Score" />
            <dg:DataGridTextColumn IsReadOnly="True" Width="60" Binding="{Binding Year}" Header="Year" />
            <dg:DataGridTextColumn IsReadOnly="True" Binding="{Binding Genre}" Header="Genre" />
            <dg:DataGridHyperlinkColumn IsReadOnly="True" Width="200" Binding="{Binding Link}" Header="Link" />
            <dg:DataGridCheckBoxColumn Width="50" Binding="{Binding Seen}" Header="Seen" />
        </dg:DataGrid.Columns>
    </dg:DataGrid>
</Grid>

Anyone has any idea how i can make this stop? Cuz it's ugly :)

Answer 1

WtFudgE,

Hello, I think I've got a solution to your problem. This "Column" that you're seeing is not a column really, it is a header for your rows. It allows you to select a full row at once, and resize the row height at run time. However, if these are not features you need, you can simply set your RowHeaderWidth="0" to solve this problem. Here is your updated code:

<Window x:Class="IMDB.ML.Window1"
Name="This"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
Title="IMDB.ML" Width="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenWidthKey}}"
Height="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenHeightKey}}"
WindowStartupLocation="CenterScreen" WindowStyle="None">
<Window.Resources>
    <Style x:Key="HeaderTextStyle" TargetType="{x:Type dg:DataGridColumnHeader}">
        <Setter Property="Background" Value="DarkSlateGray" />
        <Setter Property="Foreground" Value="White" />
    </Style>
</Window.Resources>
<Grid>
    <Menu Height="22" Name="TopMenu" FontFamily="Verdana" FontSize="12" VerticalAlignment="Top" Background="DarkSlateGray">
        <Menu.BitmapEffect>
            <DropShadowBitmapEffect />
        </Menu.BitmapEffect>
        <MenuItem Header="_File" Background="Transparent" Foreground="White">
            <MenuItem Header="_Close" Background="DarkSlateGray" Foreground="White" Click="close_Click" />
        </MenuItem>
        <MenuItem Header="_Edit" Background="Transparent" Foreground="White">
        </MenuItem>
    </Menu>
    <dg:DataGrid Background="DarkSlateGray" ItemsSource="{Binding ElementName=This, Path=GameData}" ColumnWidth="*"
          Margin="5,35,5,5" AutoGenerateColumns="False" RowHeaderWidth="0" ColumnHeaderStyle="{StaticResource HeaderTextStyle}">
        <dg:DataGrid.Columns>
            <dg:DataGridTextColumn IsReadOnly="True" Binding="{Binding Title}" Header="Title" />
            <dg:DataGridTextColumn IsReadOnly="True" Width="60"  Binding="{Binding Score}" Header="Score" />
            <dg:DataGridTextColumn IsReadOnly="True" Width="60" Binding="{Binding Year}" Header="Year" />
            <dg:DataGridTextColumn IsReadOnly="True" Binding="{Binding Genre}" Header="Genre" />
            <dg:DataGridHyperlinkColumn IsReadOnly="True" Width="200" Binding="{Binding Link}" Header="Link" />
            <dg:DataGridCheckBoxColumn Width="50" Binding="{Binding Seen}" Header="Seen" />
        </dg:DataGrid.Columns>
    </dg:DataGrid>
</Grid>

Also, here is a screen shot of my grid (obviosly without the data that yours does - I used a simple Person object with firstname and lastname.):

I hope this helps,

Thanks!