How to make a data-grid scrollable while placing a userControl under it in WPF app using XAML?

Question

I have a WPF application. I am rendering the data into a data-grid. I want the DataGrid to expand as need to take the full height of the screen. If there are more data than the height of the screen, I want to automatically show scrollbar.

Also, below the data-grid, I have a ContentControl section which renders a pagination for the data. How can I place these two under each other at the same time while showing scroll bar if needed around the data-grid.

Here is my XAML code

<Grid Style="{StaticResource ContentRoot}">
    <StackPanel>

        <DataGrid ItemsSource="{Binding Vendors}"
                  SelectedItem="{Binding SelectedVendor}"
                  AutoGenerateColumns="False"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Center"
                  CanUserAddRows="False"
                  VerticalContentAlignment="Center"
                  ScrollViewer.CanContentScroll="True"
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto">

            <DataGrid.Columns>

            <DataGridTextColumn Header="Name"
                                Binding="{Binding Name}"
                                />
                <DataGridTextColumn Header="Account Number"
                                    Binding="{Binding AccountCode}" />

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button VerticalAlignment="Center"
                                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                    Path=DataContext.ShowVendor}"
                                    CommandParameter="{Binding}">
                                <StackPanel Orientation="Horizontal">

                                    <fa:FontAwesome Icon="Eye"
                                                    FontSize="18" />
                                    <Label Content="Details" 
                                           Padding="7 0 0 0" />
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button VerticalAlignment="Center"
                                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                                      Path=DataContext.DeleteVendor}"
                                    CommandParameter="{Binding}">
                                <StackPanel Orientation="Horizontal">

                                    <fa:FontAwesome Icon="Trash"
                                                    FontSize="18" />
                                    <Label Content="Delete"
                                           Padding="7 0 0 0" />
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

            </DataGrid.Columns>

        </DataGrid>


        <ContentControl Content="{Binding PageMeta}"></ContentControl>

    </StackPanel>

</Grid>

I also tried to add DockPanel and wrap my datagrid with ScrollViewer but that did not work either. The scroll bar works but the PageMeta Content Control is not visible.

Here is how I added the ScrollViewer

<Grid Style="{StaticResource ContentRoot}">

    <DockPanel>
        <ScrollViewer DockPanel.Dock="Top">
        <StackPanel >

                <DataGrid ItemsSource="{Binding Vendors}"
                          SelectedItem="{Binding SelectedVendor}"
                          AutoGenerateColumns="False"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Center"
                          CanUserAddRows="False"
                          VerticalContentAlignment="Center">

                    <DataGrid.Columns>

                        <DataGridTextColumn Header="Name"
                                            Binding="{Binding Name}" />
                        <DataGridTextColumn Header="Account Number"
                                            Binding="{Binding AccountCode}" />

                        <DataGridTemplateColumn>
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Button VerticalAlignment="Center"
                                            Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                            Path=DataContext.ShowVendor}"
                                            CommandParameter="{Binding}">
                                        <StackPanel Orientation="Horizontal">

                                            <fa:FontAwesome Icon="Eye"
                                                            FontSize="18" />
                                            <Label Content="Details"
                                                   Padding="7 0 0 0" />
                                        </StackPanel>
                                    </Button>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

                        <DataGridTemplateColumn>
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Button VerticalAlignment="Center"
                                            Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                                              Path=DataContext.DeleteVendor}"
                                            CommandParameter="{Binding}">
                                        <StackPanel Orientation="Horizontal">

                                            <fa:FontAwesome Icon="Trash"
                                                            FontSize="18" />
                                            <Label Content="Delete"
                                                   Padding="7 0 0 0" />
                                        </StackPanel>
                                    </Button>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

                    </DataGrid.Columns>

                </DataGrid>


        </StackPanel>
        </ScrollViewer>
        <StackPanel DockPanel.Dock="Bottom">
            <ContentControl Content="{Binding PageMeta}"></ContentControl>

        </StackPanel>

    </DockPanel>

</Grid>

Answer 1

This did the trick

<DockPanel Style="{StaticResource ContentRoot}"
           Margin="0"
           LastChildFill="True"
           VerticalAlignment="Top">

    <StackPanel DockPanel.Dock="Bottom" Margin="0 10 0 0">
        <ContentControl Content="{Binding PageMeta}"></ContentControl>
    </StackPanel>


    <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalAlignment="Top">

            <DataGrid ItemsSource="{Binding Vendors}"
                        SelectedItem="{Binding SelectedVendor}"
                        AutoGenerateColumns="False"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Center"
                        CanUserAddRows="False"
                        VerticalContentAlignment="Center">

            <DataGrid.Columns>

                <DataGridTextColumn Header="Name"
                                    Binding="{Binding Name}" />
                <DataGridTextColumn Header="Account Number"
                                    Binding="{Binding AccountCode}" />

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button VerticalAlignment="Center"
                                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                        Path=DataContext.ShowVendor}"
                                    CommandParameter="{Binding}">
                                <StackPanel Orientation="Horizontal">

                                    <fa:FontAwesome Icon="Eye"
                                                    FontSize="18" />
                                    <Label Content="Details"
                                           Padding="7 0 0 0" />
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button VerticalAlignment="Center"
                                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                                            Path=DataContext.DeleteVendor}"
                                    CommandParameter="{Binding}">
                                <StackPanel Orientation="Horizontal">

                                    <fa:FontAwesome Icon="Trash"
                                                    FontSize="18" />
                                    <Label Content="Delete"
                                           Padding="7 0 0 0" />
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

            </DataGrid.Columns>
        </DataGrid>


    </ScrollViewer>



</DockPanel>