DataGrid doesn't resize when rows are collapsed

Question

I have a datagrid with rows that appear or disappear depending on some user preferences. This datagrid is part of a stackpanel that contains a few of these grids. The problem is that when the user hides some rows, the datagrid height doesn't shrink. This only happens on windows xp and not on windows 7 where the grid shrinks as expected.

Here is a small example that shows the issue:

The xaml:

<Window x:Class="TestDataGridResize.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>
    <StackPanel Orientation="Vertical">
        <Button Content="Hide some rows" Click="Button_Click"/>
        <DataGrid Name="dataGrid" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn IsReadOnly="True" Binding="{Binding Name}" Header="Name" />
            </DataGrid.Columns>
            <DataGrid.RowStyle>
                <Style TargetType="{x:Type DataGridRow}">
                    <Setter Property="Visibility" Value="{Binding Visibility}"/>
                </Style>
            </DataGrid.RowStyle>
        </DataGrid>
        <TextBlock Text="THE END" Background="AliceBlue" TextAlignment="Center"/>
    </StackPanel>

</Grid>

The code behind it:

public partial class MainWindow : Window
{
    private ObservableCollection<Element> elements = new ObservableCollection<Element>();

    public MainWindow()
    {
        InitializeComponent();

        this.dataGrid.ItemsSource = this.elements;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        for (int i = 0; i < 5; i++)
            this.elements[i].Visibility = System.Windows.Visibility.Collapsed;
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        for (int i = 0; i < 10; i++)
            this.elements.Add(new Element("Element " + i));
    }
}

public class Element : INotifyPropertyChanged
{
    private static PropertyChangedEventArgs VisibilityChanged = new PropertyChangedEventArgs("Visibility");

    private string name;
    public string Name
    {
        get { return this.name; }
        set { this.name = value; }
    }

    private Visibility visibility;
    public Visibility Visibility
    {
        get { return this.visibility; }
        set
        {
            this.visibility = value;
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, VisibilityChanged);
        }
    }

    public Element(string name)
    {
        this.name = name;
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

The target framework is 4.0. Any help would be much appreciated.

Answer 1

Try using the Grid to arrange the controls instead of the StackPanel :

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Button Grid.Row="0" Content="Hide some rows" Click="Button_Click"/>
    <DataGrid Grid.Row="1" Name="dataGrid" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn IsReadOnly="True" Binding="{Binding Name}" Header="Name" />
        </DataGrid.Columns>
        <DataGrid.RowStyle>
            <Style TargetType="{x:Type DataGridRow}">
                <Setter Property="Visibility" Value="{Binding Visibility}"/>
            </Style>
        </DataGrid.RowStyle>
    </DataGrid>
    <TextBlock Grid.Row="2" Text="THE END" Background="AliceBlue" TextAlignment="Center"/>
</Grid>