WPF DataGrid - Why the extra column

Question

I have a WPF app that uses DataGrid to display some data. When I run the program there is an additional column as shown here:

Here is what it looks like when I design it in VS2010

I have turned off AutoGenerateColumns on the data grid and specified the columns individually as such (this is a user control):

<Grid Margin="10,10,10,10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>


    <DataGrid x:Name="EmployeeHours" AutoGenerateColumns="False" ItemsSource="{Binding EmployeeHoursLastWeek}" Width="Auto">
        <DataGrid.Columns>
            <DataGridTextColumn Header="PerceptionistID" Binding="{Binding PerceptionistID}" Width="100" />
            <DataGridTextColumn Header="Week Of" Binding="{Binding WeekOf, StringFormat={}{0:MM/dd/yyyy}}" Width="75" />
            <DataGridTextColumn Header="Regular Hours" Binding="{Binding WorkHours}" Width="100" />
            <DataGridTextColumn Header="PTO Hours" Binding="{Binding PTOHours}" Width="100" />
            <DataGridTextColumn Header="Holiday Hours" Binding="{Binding HolidayHours}" Width="100" />
        </DataGrid.Columns>
    </DataGrid>

    <Button x:Name="ImportHoursButton" Content="Import Hours" 
            Command="{Binding ImportHoursCommand}" 
            Height="25" Width="100" Margin="10"
            VerticalAlignment="Bottom" HorizontalAlignment="Right"                
            Grid.Row="1" />
</Grid>

I also have a MainWindowView that uses injection to display the views as such (this is a regular window):

<Window x:Class="Sidekick.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:Sidekick.ViewModel"
        xmlns:vw="clr-namespace:Sidekick.View"
        Title="Sidekick">

    <!-- Typically done in a resources dictionary -->    
    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:EmployeeHoursViewModel}">
            <vw:EmployeeHoursView />
        </DataTemplate>
    </Window.Resources>

    <StackPanel>
        <ItemsControl ItemsSource="{Binding ViewModels}" Margin="3" />
    </StackPanel>

</Window>

In the designer I have specified both MainWindowView and EmployeeHoursView as Auto Size root as I want the window to be just large enough to accommodate the grid and button. However, when I run the program I get an additional column in the data grid and it makes the program window about twice as large (both width and height) as the EmployeeHoursView needs to be. How can I code this such that my application window is just large enough for the EmployeeHoursView without providing specific values? What is causing this additional column to appear?

Answer 1

The "extra column" is actually just unused space. Each of your columns define a Width value, so once they get assigned there is space left over.

If you want to get rid of that space, make at least one of your columns a * column so it stretches to fill available space.

My best guess as to why it looks normal in Visual Studio is probably because you have the designer width set to something smaller than the runtime width. If it were larger, you'd see the same thing.

If you don't want your control to stretch, then be sure to set it's (or it's parent's) horizontal/vertical alignment to something other than Stretch

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <ItemsControl ItemsSource="{Binding ViewModels}" Margin="3" />
</StackPanel>

Answer 2

Well since its unused space, another way around will be use a weighted width rather than fixed one. You can use a hybrid approach as well wherein some are fixed and some are weighted, in that case ensure one is weighted (*) So in your code it will be :

<DataGridTextColumn Header="PerceptionistID" Binding="{Binding PerceptionistID}" Width="4*" />
        <DataGridTextColumn Header="Week Of" Binding="{Binding WeekOf, StringFormat={}{0:MM/dd/yyyy}}" Width="3*" />
        <DataGridTextColumn Header="Regular Hours" Binding="{Binding WorkHours}" Width="4*" />
        <DataGridTextColumn Header="PTO Hours" Binding="{Binding PTOHours}" Width="4*" />
        <DataGridTextColumn Header="Holiday Hours" Binding="{Binding HolidayHours}" Width="4*" />

Answer 3

Put ColumnWidth="*" in the XAML and it will surely be work.

<DataGrid x:Name="DG_FileShow" ColumnWidth="*" ItemsSource="{Binding}" 
 HorizontalAlignment="Left" VerticalAlignment="Top" Height="345" Width="654" 
 Margin="34,53,0,0" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Names" Binding="{Binding}" />
        </DataGrid.Columns>
 </DataGrid>