vertical scroll bar shifts contents horizontally

Question

I an using a Scrollviewer with an ItemsControl in it. the VerticalScrollBarVisibility of the Scrollviewer is set to "Auto". the problem is that when the scrollbar appears it shifts the contents of the ItemsControl horizontally.

Is there a way that the scroll bar will just be "over" the contents with out moving them?

the code looks something like this

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

Thanks

ASh ASh · Accepted Answer · 2016-12-06T11:01:51

here is a trick I used recently in my project:

ItemsControl.Width is obtained from ScrollViewer.ActualWidth via OneWay binding:

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

also consider using of UniformGrid

vertical scroll bar shifts contents horizontally

1 Answers