How to get a DataGrid's scrollbars to show up when it is in an Expander?

Question

I have a DataGrid that is in one of a series of Expanders in a resizable window. When the DataGrid rows are loaded, the DataGrid extends off the bottom of the window without any scrollbars.

I've reduced the issue to the simplest elements I could below

I've tried putting the DataGrid in a separate ScrollViewer but had the same issue.

I also need the other two Expanders to remain visible in the window and not be pushed off the edge. I had a little success putting the three Expanders in a DockPanel, but the DataGrid still expanded to fill the entire window, pushing the other Expanders out of view.

XAML

<Window x:Class="WPFTestApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFTestApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid Name="root">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Expander Grid.Row="0" Name="Expander1" Expanded="Expander_Expanded">
            <Expander.Header>Expander</Expander.Header>
            <Expander.Content>
                <ScrollViewer>
                <DataGrid Grid.Row="1" Name="dataGrid">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="A" Binding="{Binding A}" />
                        <DataGridTextColumn Header="B" Binding="{Binding B}" />
                        <DataGridTextColumn Header="C" Binding="{Binding C}" />
                        <DataGridTextColumn Header="D" Binding="{Binding D}" />
                    </DataGrid.Columns>
                </DataGrid>
                </ScrollViewer>

            </Expander.Content>
        </Expander>
        <Expander Grid.Row="1" Name="Expander2" Expanded="Expander_Expanded">
            <Expander.Content>
                <TextBlock>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...</TextBlock>
            </Expander.Content>
        </Expander>
        <Expander Grid.Row="2" Name="Expander3" Expanded="Expander_Expanded">
            <Expander.Content>
                <TextBlock>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...</TextBlock>
            </Expander.Content>
        </Expander>
    </Grid>
</Window>

Codebehind

using System;
using System.Windows;

namespace WPFTestApp {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>

    public class Data {
        public Guid A { get; set; }
        public Guid B { get; set; }
        public Guid C { get; set; }
        public Guid D { get; set; }

        public Data() {
            A = Guid.NewGuid();
            B = Guid.NewGuid();
            C = Guid.NewGuid();
            D = Guid.NewGuid();
        }
    }


    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();

            for (int x = 0; x < 20; x++) {
                dataGrid.Items.Add(new Data());
            }

        }

        private void Expander_Expanded(object sender, RoutedEventArgs e) {
            if (Expander1 != sender)
                Expander1.IsExpanded = false;

            if (Expander2 != sender)
                Expander2.IsExpanded = false;

            if (Expander3 != sender)
                Expander3.IsExpanded = false;
        }
    }
}

score 1 · Answer 1 · edited May 23 '17 at 12:25

Remove the ScrollViewer element around the DataGrid and specify a height (either a fixed size or a star-sized one) for the RowDefinitions:

<Grid Name="root">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Expander Grid.Row="0" Name="Expander1" Expanded="Expander_Expanded">
        <Expander.Header>Expander</Expander.Header>
        <Expander.Content>
            <DataGrid Grid.Row="1" Name="dataGrid">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="A" Binding="{Binding A}" />
                    <DataGridTextColumn Header="B" Binding="{Binding B}" />
                    <DataGridTextColumn Header="C" Binding="{Binding C}" />
                    <DataGridTextColumn Header="D" Binding="{Binding D}" />
                </DataGrid.Columns>
            </DataGrid>
        </Expander.Content>
    </Expander>
    <Expander Grid.Row="1" Name="Expander2" Expanded="Expander_Expanded">
        <Expander.Content>
            <TextBlock>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...</TextBlock>
        </Expander.Content>
    </Expander>
    <Expander Grid.Row="2" Name="Expander3" Expanded="Expander_Expanded">
        <Expander.Content>
            <TextBlock>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...</TextBlock>
        </Expander.Content>
    </Expander>
</Grid>

You won't get any vertical scrollbars when the Height is set to Auto because then the Expander is considered to have an infinite height.

That gives all three Expanders the same amount of vertical space in the grid, no matter if they are expanded or not. I played around with the RowDefinition heights and realized I could change the Heights between Auto and 1* in the Expander_Expanded function and it gave me exactly what I wanted. — Hypersapien, Feb 17 '17 at 17:09
You can set the Height to whatever you want but Auto - either in the XAML markup or programmatically. 1* was just an example. — mm8, Feb 17 '17 at 17:11
I'm just saying that the heights of the RowDefinitions need to be set differently depending on whether the Expander is expanded or not. I posted my solution here. — Hypersapien, Feb 17 '17 at 17:24

score 0 · Answer 2 · answered Feb 17 '17 at 17:12

Changing the RowDefinitions to

<Grid.RowDefinitions>
    <RowDefinition Name="gridRowEx1" Height="Auto" />
    <RowDefinition Name="gridRowEx2" Height="Auto" />
    <RowDefinition Name="gridRowEx3" Height="Auto" />
</Grid.RowDefinitions>

And changing the Expander_Expanded function to

    private void Expander_Expanded(object sender, RoutedEventArgs e) {
        switch (((Expander)sender).Name) {
            case "Expander1":
                Expander2.IsExpanded = false;
                Expander3.IsExpanded = false;
                gridRowEx1.Height = new GridLength(1.0, GridUnitType.Star);
                gridRowEx2.Height = new GridLength(1.0, GridUnitType.Auto);
                gridRowEx3.Height = new GridLength(1.0, GridUnitType.Auto);
                break;
            case "Expander2":
                Expander1.IsExpanded = false;
                Expander3.IsExpanded = false;
                gridRowEx1.Height = new GridLength(1.0, GridUnitType.Auto);
                gridRowEx2.Height = new GridLength(1.0, GridUnitType.Star);
                gridRowEx3.Height = new GridLength(1.0, GridUnitType.Auto);

                break;
            case "Expander3":
                Expander1.IsExpanded = false;
                Expander2.IsExpanded = false;
                gridRowEx1.Height = new GridLength(1.0, GridUnitType.Auto);
                gridRowEx2.Height = new GridLength(1.0, GridUnitType.Auto);
                gridRowEx3.Height = new GridLength(1.0, GridUnitType.Star);
                break;
        }
    }

Gives me exactly what I needed

What about removing the ScrollViewer as I suggested? And I think I also suggested that you should not set the Height of the RowDefinitions to Auto but I don't know...of course you may do this programmatically in the Expanded event handler if you want to but that doesn't really matter as far as why you don't get to see any scrollbars is concerned. — mm8, Feb 17 '17 at 17:56
Yeah. Honestly, I had forgotten that the ScrollViewer was still in there when I posted it. It wasn't supposed to be there in the first place. I could probably bind the Height of the RowDefinitions to the IsExpanded state of the Expander, but I'm not sure I want to go through the trouble. — Hypersapien, Feb 17 '17 at 18:40
The point is still that the key to get the scrollbars working as expected is to set the height of the rows to something else than Auto. — mm8, Feb 17 '17 at 18:59
I stated this in my answer but yet you didn't even bother to vote it up. Instead you posted your own answer which was (is) basically a repitition of what I suggested. — mm8, Feb 17 '17 at 19:01

How to get a DataGrid's scrollbars to show up when it is in an Expander?

2 Answers2