WrapPanel WPF 上不显示水平滚动

Question

我这里有自定义视图，它有一个带有垂直方向的包装板，

问题是它不显示水平滚动条...

这是代码的链接...
我正在尝试的代码

我的自定义视图样式

<Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type CustomView:PlainView},
                                    ResourceId=ImageView}"           
       TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListView}}">

    <Setter Property="ItemContainerStyle" Value="{Binding (ListView.View).ItemContainerStyle, RelativeSource={RelativeSource Self}}" />
    <Setter Property="ItemTemplate" Value="{Binding (ListView.View).ItemTemplate, RelativeSource={RelativeSource Self}}" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="FontFamily" Value="Trebuchet MS" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="BorderBrush" Value="#FFB1703C" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Padding" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListView}">
                <Border Name="bd"
                        Margin="{TemplateBinding Margin}"                            
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"  CornerRadius="1">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0.056,0.5" EndPoint="1.204,0.5">
                            <GradientStop Offset="0" Color="#FFFFFFFF" />
                            <GradientStop Offset="1" Color="#FFD4D7DB" />
                        </LinearGradientBrush>
                    </Border.Background>

                    <ScrollViewer Name="plainViewScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="{TemplateBinding Padding}">
                        <WrapPanel  Focusable="False" Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"                                       Height="{Binding ActualHeight,
                                                    RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                                   MinWidth="{Binding (ListView.View).MinWidth,
                                                      RelativeSource={RelativeSource Mode=FindAncestor,
                                                                                     AncestorType={x:Type ListView}}}"
                                   IsItemsHost="True"
                                   ItemWidth="{Binding (ListView.View).ItemWidth,
                                                       RelativeSource={RelativeSource Mode=FindAncestor,
                                                                                      AncestorType={x:Type ListView}}}"
                                   KeyboardNavigation.DirectionalNavigation="Cycle"
                                   Orientation="Vertical" />
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>  

我的 ListView 样式

<Style TargetType="{x:Type ListView}">

    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="Trebuchet MS" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="BorderBrush" Value="{DynamicResource ControlBorderBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Padding" Value="1" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListView}">
                <Grid>
                    <Border x:Name="Border"
                            Background="{DynamicResource ControlBackgroundBrush}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="1">
                        <ScrollViewer Margin="{TemplateBinding Padding}">
                            <WrapPanel Focusable="False" Width="{Binding ActualWidth, 
                                                   RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                                   Height="{Binding ActualHeight,
                                                    RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                                   MinWidth="{Binding (ListView.View).MinWidth,
                                                      RelativeSource={RelativeSource Mode=FindAncestor,
                                                                                     AncestorType={x:Type ListView}}}"
                                   IsItemsHost="True"
                                   ItemWidth="{Binding (ListView.View).ItemWidth,
                                                       RelativeSource={RelativeSource Mode=FindAncestor,
                                                                                      AncestorType={x:Type ListView}}}"
                                   KeyboardNavigation.DirectionalNavigation="Cycle"
                                   Orientation="Vertical" />
                        </ScrollViewer>
                    </Border>
                    <Border x:Name="DisabledVisualElement"
                            Background="#A5FFFFFF"
                            BorderBrush="#66FFFFFF"
                            BorderThickness="1"
                            IsHitTestVisible="false"
                            Opacity="0" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="DisabledVisualElement" Property="Opacity" Value="1" />
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ListView

    <ListView Name="lv"
              Grid.Row="1"
              Height="Auto"
              Width="Auto"
              IsTextSearchEnabled="True"                  
              ItemsSource="{Binding Path=Persons}"
              KeyboardNavigation.DirectionalNavigation="Cycle"
              SelectedItem="{Binding Path=SelectedPerson}"
              SelectionMode="Single" 
              View="{StaticResource ResourceKey=plainView}"
              >            
               </ListView>

自定义视图资源

<DataTemplate x:Key="centralTile">

    <StackPanel Width="80"
                Height="40"
                KeyboardNavigation.AcceptsReturn="True"
                Focusable="True">            
        <Grid>              
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button Command="{Binding Path=DataContext.KeyCommand, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}}"
                            CommandParameter="{Binding}">
                <TextBlock Text="{Binding Path=Name}" />
            </Button>
            <Image Grid.Column="1" Source="Water lilies.jpg" />                
        </Grid>
        <TextBlock HorizontalAlignment="Center"
                   FontSize="13"
                   Text="{Binding Path=Name}" />
    </StackPanel>
</DataTemplate>
<CustomView:PlainView x:Key="plainView"

                      ItemTemplate="{StaticResource ResourceKey=centralTile}"
                      ItemWidth="100" />

我的 ListView 托管在窗口内。

Answer 1

删除 WrapPanel 上的 Width 属性

ScrollViewers 用于滚动大于 ViewPort 的内容，并且您的WrapPanel 上的 Width 绑定将面板的大小限制为实际 ScrollViewer 的 ViewPort 宽度。这意味着 ScrollViewer 没有任何内容可以滚动，因此它不会显示 ScrollBar。

<ScrollViewer Margin="{TemplateBinding Padding}">
    <WrapPanel Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                Focusable="False"
                IsItemsHost="True"
                ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}"
                KeyboardNavigation.DirectionalNavigation="Cycle"
                Orientation="Vertical" />
</ScrollViewer>

另外，我强烈推荐像 Snoop 这样的工具来调试 XAML 问题。它还告诉我您的 MinHeight 绑定无效，因此我将其删除。

Answer 2

事实上，您已将 WrapPanel 的宽度绑定到视口的宽度。这意味着它只会与视口一样大，这是用户无需滚动即可看到的部分。因此，ScrollViewer 认为没有任何内容可以滚动。

Answer 3

不要绑定 WrapPanel 的宽度。只需绑定高度即可。