Scrollviewer with Datagrid Inside Expander

Question

Hi

I need to have two expanders with datagrids inside it.The problem I am facing is scroll is not appearing for the datagrids.

I tried to put height on datagrid which enables scroll but when I expand it doesnot looks nice with datagrid occupying only half space of the screen when there is lot of space available.

Please help

---

Dont forget to mark as answer if it helps Happy Programming http://dotnethobbyist.blogspot.com

Answer 1

In what type of panel do you have the Expander? If it's located inside a StackPanel without an explicitly set height, it will grow indefinitely and that's why the DataGrid doesn't get any scrollbars:

    <StackPanel>
        <Expander>
            <!-- No scrollbars: -->
            <DataGrid x:Name="dataGrid" />
        </Expander>
    </StackPanel>

If you replace the StackPanel with a Grid, you will get scrollbars without having to specify a height for the DataGrid:

    <Grid>
        <Expander>
            <!-- No scrollbars: -->
            <DataGrid x:Name="dataGrid" />
        </Expander>
    </Grid>

Answer 2

Expander is located inside grid only.Still i m not getting the datagrid.

I have set the Grid's row height to * 

---

Dont forget to mark as answer if it helps Happy Programming http://dotnethobbyist.blogspot.com

Answer 3

Hi,

have you tried to put the Expanders into a ScrollViewer. If you are using following code

    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Expander Grid.Row="0"
                      Header="Expander1">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBox Grid.Row="0"
                             Text="Row1" />
                    <TextBox Grid.Row="1"
                             Text="Row2" />
                    <TextBox Grid.Row="2"
                             Text="Row3" />
                    <TextBox Grid.Row="3"
                             Text="Row4" />
                </Grid>
            </Expander>
            <Expander Grid.Row="1"
                      Header="Expander2">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBox Grid.Row="0"
                             Text="Row1" />
                    <TextBox Grid.Row="1"
                             Text="Row2" />
                    <TextBox Grid.Row="2"
                             Text="Row3" />
                    <TextBox Grid.Row="3"
                             Text="Row4" />
                </Grid>
            </Expander>
        </Grid>
    </ScrollViewer>

you get this results

Best regards,

---

Chris

Code Samples: Code Samples
Chrigas Blog: Chrigas Blog

Answer 4

Thanks Chris but i require separate scrollbar for Expander1 and Expander 2

---

Dont forget to mark as answer if it helps Happy Programming http://dotnethobbyist.blogspot.com

Answer 5

Please post some XAML that could be used to reproduce your issue for us to be able to help you then. Appearantly, the following markup works just fine:

<Window x:Class="WpfApplication3.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">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0">...</TextBlock>
        <Expander Grid.Row="1">
            <DataGrid x:Name="dataGrid" />
        </Expander>
    </Grid>
</Window>

Answer 6

You can place the Expanders into a DockPanel and put a ScrollViewer into the Expander:

    <DockPanel LastChildFill="False">
        <Expander DockPanel.Dock="Top"
                  Header="Expander1">
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBox Grid.Row="0"
                             Text="Row1" />
                    <TextBox Grid.Row="1"
                             Text="Row2" />
                    <TextBox Grid.Row="2"
                             Text="Row3" />
                    <TextBox Grid.Row="3"
                             Text="Row4" />
                </Grid>
            </ScrollViewer>
        </Expander>

        <Expander DockPanel.Dock="Top"
                  Header="Expander2">
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBox Grid.Row="0"
                             Text="Row1" />
                    <TextBox Grid.Row="1"
                             Text="Row2" />
                    <TextBox Grid.Row="2"
                             Text="Row3" />
                    <TextBox Grid.Row="3"
                             Text="Row4" />
                </Grid>
            </ScrollViewer>
        </Expander>
    </DockPanel>

With following results

---

Chris

Code Samples: Code Samples
Chrigas Blog: Chrigas Blog