ScrollViewer.CanContentScroll不逐项滚动ItemsControl

时间:2017-05-10 14:42:17

标签: wpf xaml scrollviewer itemscontrol

我在ScrollViewer上有一个ItemControl。我想逐项滚动,现在逐像素滚动。

<ScrollViewer Height="299" Margin="10,10,0,0" 
HorizontalScrollBarVisibility="Visible" x:Name="Scroll"
                  VerticalAlignment="Top"  
                  Grid.Column="0" Grid.Row="1" 
                  PanningMode="HorizontalOnly" 
                  CanContentScroll="True">
        <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=Items, Mode=OneWay}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border  Width="175" Height="64" Margin="0,0,16,16" HorizontalAlignment="Center" Focusable="False">
                        <TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>

3 个答案:

答案 0 :(得分:1)

您可以使用ListBox而不是ScrollViewer。我以为你不想选择款式,所以我改了。

    <ListView ScrollViewer.CanContentScroll="True" 
              ScrollViewer.VerticalScrollBarVisibility="Hidden"
              ScrollViewer.PanningMode="HorizontalOnly"
              ScrollViewer.HorizontalScrollBarVisibility="Visible"
              ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=Items, Mode=OneWay}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                            <ContentPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border Width="175" Height="64" Margin="0,0,16,16" HorizontalAlignment="Center" Focusable="False">
                    <TextBlock Text="{Binding }" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

答案 1 :(得分:1)

只需在ListBox上设置此属性:

VirtualizingStackPanel.ScrollUnit ="Item"

另一种模式是&#34; Pixel&#34;,这是默认模式。

答案 2 :(得分:0)

我找到了解决方案

<ItemsControl ItemsSource="{Binding TypeHeaders}" 
                                      x:Name="ActivityItemsControl" 
                                      Grid.Column="0" Grid.Row="1">
                            <ItemsControl.Template>
                                <ControlTemplate>
                                    <ScrollViewer HorizontalScrollBarVisibility="Hidden" 
                                                  VerticalScrollBarVisibility="Visible" 
                                                  CanContentScroll="True"                                                       
                                                  x:Name="ActivityScrollViewer">
                                        <ItemsPresenter/>
                                        <i:Interaction.Triggers>
                                            <i:EventTrigger EventName="ScrollChanged">
                                                <cmd:EventToCommand PassEventArgsToCommand="True" 
                                                        Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=DataContext.VmCommands.ActivityScrollChangedCommand}" />
                                            </i:EventTrigger>
                                        </i:Interaction.Triggers>
                                    </ScrollViewer>
                                </ControlTemplate>
                            </ItemsControl.Template>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Button Content="{Binding Description}" Style="{DynamicResource ZoneTypeHeaderButtonStyle}"
                                                        Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, Path=DataContext.VmCommands.ZoneOverviewControlTypeHeaderClickedCommand}"
                                                        CommandParameter="{Binding}"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>