如何在没有固定高度的情况下在 Expander 中启用滚动

Question

我在 Expander control 中滚动时遇到问题。由于 Expander 的默认行为是扩展以适应所有内容，因此滚动对任何子控件都不起作用，因为没有高度限制。

这是我正在尝试制作的布局。我希望扩展器伸展到 window 的高度，而不是超过它，并且第一个扩展器内的 ListView 应该是可滚动的。

如果我在 Expander 上设置固定高度（如 this answer），我可以让它工作，但由于应用程序 window 应该可以调整大小，固定高度不是解决方案.

我能做什么？

<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

你已经非常接近让它工作了，你只需要将 ScrollViewer 的 VerticalScrollBarVisibility 更改为 Disabled

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

如何在没有固定高度的情况下在 Expander 中启用滚动

How to enable scrolling in Expander without a fixed height

xaml

expander

uwp

windows-community-toolkit