Question

我使用带有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>

由于

Answer 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

垂直滚动条水平移动内容

1 个答案: