Как я могу иметь два вида прокрутки в одном пользовательском элементе управления?

Я пытаюсь иметь два списка элементов (продажи и резервирования) в одном userconrol. Проблема, с которой я столкнулся, заключается в том, что содержимое прокрутки переполняется и не прокручивается.

Я попытался изменить стековые панели на сетку. Это работает при использовании фиксированной высоты в сетке, но я хочу, чтобы она была масштабируемой.

<Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height = "2*"/>
                    <RowDefinition Height = "1*"/>
                </Grid.RowDefinitions>
                <ScrollViewer Grid.Row = "0">
                    <StackPanel>
                        <TextBlock Grid.Row = "0" Margin = "0 25 0 0" Text = "{x:Static properties:Resources.Sales}" FontSize = "20" FontWeight = "Bold"/>
                        <ListView Grid.Row = "1" FontSize = "18" Height  = "{Binding ActualHeight, ElementName=GridListView}" x:Name = "SalesList" ItemsSource = "{Binding CurrentOccupancy.Sales}" SelectedItem = "{Binding SelectedSale}">

                            <i:Interaction.Behaviors>
                                <behavior:EventToCommandBehavior Command = "{Binding SalesViewSelectionChangedCommand}" Event = "SelectionChanged" PassArguments = "True" />
                            </i:Interaction.Behaviors>
                            <ListView.View>

                                <GridView>
                                    <GridViewColumn Header = "{Binding Source = {x:Static properties:Resources.Paid}, StringFormat=is\{0\}}">
                                        <GridViewColumn.CellTemplate>
                                            <DataTemplate>
                                                <TextBlock x:Name = "paid" Text = "{Binding Paid}"/>
                                                <DataTemplate.Triggers>
                                                    <DataTrigger Binding = "{Binding Paid}" Value = "0">
                                                        <Setter TargetName = "paid" Property = "Text" Value = "{x:Static properties:Resources.Unpaid}" />
                                                    </DataTrigger>
                                                    <DataTrigger Binding = "{Binding Paid}" Value = "1">
                                                        <Setter TargetName = "paid" Property = "Text" Value = "{x:Static properties:Resources.Paid}" />
                                                    </DataTrigger>
                                                </DataTemplate.Triggers>
                                            </DataTemplate>
                                        </GridViewColumn.CellTemplate>
                                    </GridViewColumn>
                                    <GridViewColumn
                            DisplayMemberBinding = "{Binding Product.Name}"
                            Header = "{x:Static properties:Resources.Name}" />
                                    <GridViewColumn
                            DisplayMemberBinding = "{Binding Product.Price}"
                            Header = "{x:Static properties:Resources.Price}" />
                                </GridView>
                            </ListView.View>
                        </ListView>
                    </StackPanel>
                </ScrollViewer>
                <ScrollViewer Grid.Row = "1">
                    <StackPanel>
                        <TextBlock Margin = "0 25 0 0" Grid.Row = "2" Text = "{x:Static properties:Resources.Reservations}" FontSize = "20" FontWeight = "Bold"/>
                        <ListView Grid.Row = "3" FontSize = "18" Height  = "{Binding ActualHeight, ElementName=GridListView}" ItemsSource = "{Binding FutureReservations}" SelectedItem = "{Binding SelectedReservation}">
                            <ListView.View>
                                <GridView>
                                    <GridViewColumn
                            DisplayMemberBinding = "{Binding LastName}"
                            Header = "{x:Static properties:Resources.LastName}"/>
                                    <GridViewColumn
                            DisplayMemberBinding = "{Binding AmountPeople}"
                            Header = "{x:Static properties:Resources.AmountOfPeople}"/>
                                    <GridViewColumn
                            DisplayMemberBinding = "{Binding PhoneNumber}"
                            Header = "{x:Static properties:Resources.Phone}"/>
                                    <GridViewColumn
                            DisplayMemberBinding = "{Binding StartTime, StringFormat=HH:mm dd/MM}"
                            Header = "{x:Static properties:Resources.StartTime}"/>
                                </GridView>
                            </ListView.View>
                        </ListView>
                    </StackPanel>

                </ScrollViewer>
            </Grid>

Я пытаюсь иметь два списка, у которых есть собственная полоса прокрутки, первый список (продажи) должен быть больше второго, а высота не должна быть фиксированной.

Вот как должен выглядеть дизайн: Скриншот дизайнера