Question

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

这是我要制作的布局。我希望扩展器拉伸到窗口的高度，而不是在其上方，并且第一个扩展器内的ListView应该是可滚动的。

如果我在Expander上设置了固定的高度（如在this answer中可以使它正常工作，但是由于应用程序窗口应可调整大小，因此固定的高度不是解决方案。

我该怎么办？

<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

您即将使其工作，只需将VerticalScrollBarVisibility的{{1}}更改为ScrollViewer

Disabled

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

1 个答案: