垂直滚动条水平移动内容答案

【问题标题】：vertical scroll bar shifts contents horizontally垂直滚动条水平移动内容
【发布时间】：2016-12-06 19:01:51
【问题描述】：

我使用带有 ItemsControl 的 Scrollviewer。 Scrollviewer 的 VerticalScrollBarVisibility 设置为“Auto”。问题是当滚动条出现时，它会水平移动 ItemsControl 的内容。

有没有办法让滚动条“越过”内容而不移动它们？

代码看起来像这样

<ScrollViewer VerticalScrollBarVisibility="Auto" CanContentScroll="True" SnapsToDevicePixels="True">
  <ItemsControl ItemsSource="{Binding Summaries}" >
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" IsItemsHost="True" CanVerticallyScroll="True" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Margin="15,5,10,5" HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=".166*"></ColumnDefinition>
                    <ColumnDefinition Width=".166*"></ColumnDefinition>
                    <ColumnDefinition Width=".166*"></ColumnDefinition>
                    <ColumnDefinition Width=".166*"></ColumnDefinition>
                    <ColumnDefinition Width=".166*"></ColumnDefinition>
                    <ColumnDefinition Width=".166*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                 <Label Grid.Column="0" Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                <Label Grid.Column="1" Content="{Binding A}" HorizontalContentAlignment="Center"/>
                <Label Grid.Column="2" Content="{Binding B}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
                <Label Grid.Column="3" Content="{Binding C}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
                <Label Grid.Column="4" Content="{Binding D}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
                <Label Grid.Column="5" Content="{Binding E}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
            </Grid>
        </DataTemplate>                                            
    </ItemsControl.ItemTemplate>
</ItemsControl></ScrollViewer>

谢谢

【问题讨论】：

标签： wpf scrollviewer

【解决方案1】：

这是我最近在项目中使用的一个技巧：

ItemsControl.Width 是通过 OneWay 绑定从ScrollViewer.ActualWidth 获得的：

<ScrollViewer VerticalScrollBarVisibility="Auto" CanContentScroll="True" 
              Name="scroller"
              SnapsToDevicePixels="True">
    <ItemsControl ItemsSource="{Binding Summaries}"
                  Width="{Binding Path=ActualWidth, ElementName=scroller, Mode=OneWay}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" IsItemsHost="True" CanVerticallyScroll="True" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <UniformGrid Columns="6" Margin="15,5,10,5" HorizontalAlignment="Stretch">
                  <Label Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                  <Label Content="{Binding A}" HorizontalContentAlignment="Center"/>
                  <Label Content="{Binding B}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
                  <Label Content="{Binding C}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
                  <Label Content="{Binding D}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
                  <Label Content="{Binding E}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
                </UniformGrid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

也可以考虑使用UniformGrid

【讨论】：