How to enable scrolling in Expander without a fixed height

Question

I'm having problems with scrolling inside the Expander control. Since the default behaviour of the Expander is to grow to fit all content, scrolling doesn't work for any child controls as there's no height limit.

Here's a layout I'm trying to make work. I want the Expanders to stretch to the window's height, not over it, and the ListView inside the first Expander should be scrollable.

I can get it to work if I set a fixed height on the Expander (like in this answer), but as the app window should be resizable, fixed height isn't a solution.

What can I do?

<Page.Resources>
  <Style TargetType="my:Expander">
    <Setter Property="ExpandDirection" Value="Right"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
  </Style>
  <Style TargetType="ListView" x:Key="ListStyle">
    <Setter Property="Width" Value="350"/>
    <Setter Property="Padding" Value="10"/>
    <Setter Property="BorderBrush" Value="Gray"/>
    <Setter Property="BorderThickness" Value="0,0,1,0"/>
  </Style>
</Page.Resources>

<my:MasterDetailsView ItemsSource="{x:Bind Models}" 
                      HorizontalAlignment="Stretch" 
                      VerticalAlignment="Stretch">
  <my:MasterDetailsView.ItemTemplate>
    <DataTemplate x:DataType="local:Model">
      <TextBlock Text="{x:Bind Title}"/>
    </DataTemplate>
  </my:MasterDetailsView.ItemTemplate>
  <my:MasterDetailsView.DetailsTemplate>
    <DataTemplate x:DataType="local:Model">
      <ScrollViewer VerticalScrollMode="Disabled"
                    VerticalScrollBarVisibility="Hidden"
                    HorizontalScrollMode="Enabled"
                    HorizontalScrollBarVisibility="Auto">
        <StackPanel x:Name="root" Orientation="Horizontal">

          <my:Expander Header="Expander 1" IsExpanded="True">
            <!-- Should be scrollable! -->
            <ListView ItemsSource="{x:Bind Items}"
                      Style="{StaticResource ListStyle}"
                      ScrollViewer.VerticalScrollBarVisibility="Auto"
                      ScrollViewer.VerticalScrollMode="Enabled">
              <ListView.ItemTemplate>
                <DataTemplate x:DataType="x:String">
                  <TextBlock Text="{x:Bind}" TextWrapping="Wrap"/>
                </DataTemplate>
              </ListView.ItemTemplate>
            </ListView>
          </my:Expander>

          <my:Expander Header="Expander 2"></my:Expander>
          <my:Expander Header="Expander 3"></my:Expander>
        </StackPanel>
      </ScrollViewer>
    </DataTemplate>
  </my:MasterDetailsView.DetailsTemplate>
</my:MasterDetailsView>

Answer 1

You're pretty close to getting it to work, you just need to change the VerticalScrollBarVisibility of your ScrollViewer to Disabled

            <ScrollViewer VerticalScrollMode="Disabled"
                          VerticalScrollBarVisibility="Disabled"
                          HorizontalScrollMode="Enabled"
                          HorizontalScrollBarVisibility="Auto">