在WrapPanel WPF上不顯示水平滾動

Question

我在這里有“自定義視圖”，其中包含垂直排列的Wrappanel

問題是它不顯示水平滾動條...

這是代碼的鏈接...
我嘗試的代碼

我的自定義視圖樣式

<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 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的寬度。 綁定高度。