Горизонтальная прокрутка не отображается на WrapPanel WPF

У меня есть пользовательский вид, который имеет 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 размещен внутри окна.


mvvm wpf custom-view horizontal-scrolling wrappanel
person Ankesh    schedule 15.11.2011    source источник
comment
Внутри чего размещен ваш пользовательский элемент управления? Вероятно, это проблема.   -  person Kent Boogaart    schedule 15.11.2011
comment
Я добавил свой контроль и просмотр   -  person Ankesh    schedule 15.11.2011
comment
@KentBoogaart Должен ли я добавить код для PlainView??   -  person Ankesh    schedule 15.11.2011

Ответы (3)


arrow_upward
2
arrow_downward

Удалите свойство Width на вашем WrapPanel

ScrollViewers предназначены для прокрутки содержимого, которое больше, чем ViewPort, а ваша привязка Width к WrapPanel ограничивает размер панели фактической шириной окна просмотра ScrollViewer. Это означает, что ScrollViewer нечего прокручивать, поэтому полоса прокрутки не отображается.

<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 недействительна, поэтому я удалил ее.

person Rachel    schedule 15.11.2011

arrow_upward
1
arrow_downward

Дело в том, что вы привязали ширину WrapPanel к ширине области просмотра. Это означает, что он всегда будет таким же большим, как окно просмотра, которое является частью, которую пользователь может видеть без прокрутки. Таким образом, ScrollViewer считает, что прокручивать нечего.

person Kent Boogaart    schedule 15.11.2011
comment
Я изменил это с Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" недавно, но результат был таким же .... нет горизонтальной прокрутки :( - person Ankesh; 15.11.2011
comment
Вот ссылка на код, который я примеряю... В нем есть пример проекта... я также добавил это в вопрос: filefat.com/mkqysgiam2ev - person Ankesh; 15.11.2011
comment
@adcool2007 adcool2007 Кент имеет в виду полное удаление свойства Width из вашего WrapPanel. Он ограничивает ширину WrapPanel шириной вашего ScrollViewer, поэтому ScrollViewer нечего прокручивать. - person Rachel; 15.11.2011

arrow_upward
0
arrow_downward

Не привязывайте ширину WrapPanel. Просто привяжите высоту.

person Amit    schedule 15.11.2011
comment
все еще не повезло, я удалил MinWidth="{Binding (ListView.View).MinWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}" && `Width={Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}} ` из стиля... все тот же - person Ankesh; 15.11.2011
comment
См. ссылку, добавленную в вопрос (пример проекта) - person Ankesh; 15.11.2011