ScrollViewer.CanContentScroll 不逐项滚动 ItemsControl答案

【问题标题】：ScrollViewer.CanContentScroll not scrolling ItemsControl item by itemScrollViewer.CanContentScroll 不逐项滚动 ItemsControl
【发布时间】：2017-05-10 14:42:16
【问题描述】：

我在 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>

【问题讨论】：

标签： wpf xaml scrollviewer itemscontrol

【解决方案1】：

只需在 ListBox 上设置此属性：

VirtualizingStackPanel.ScrollUnit ="Item"

另一种模式是“像素”，这是默认模式。

【讨论】：

【解决方案2】：

我找到了解决办法

<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>

【讨论】：

【解决方案3】：

您可以使用 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>

【讨论】：

感谢@Jarosław Rejterada，但我需要从滚动查看器中捕获滚动事件并从代码中更改 ScrollingOffset。我也想使用事件来命令 mvvm light。
仍然可以，您可以编辑列表视图的模板，并且您可以完全访问scrollviewer。（用于生成基本模板右键单击设计器中的控件 -> EditTemplate -> Edit copy）。或查看stackoverflow.com/questions/1585462/…