CODEWITHSUNDEEP
wpfxamlscrollvieweritemscontrol
Nicu Besliu
Nicu Besliu

Reputation: 513

ScrollViewer.CanContentScroll not scrolling ItemsControl item by item

I have an ItemControl on a ScrollViewer. I want to scroll item by item, now is scrolling pixel by pixel.

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

Upvotes: 1

Views: 2381

Answers (3)

Nicu Besliu
Nicu Besliu

Reputation: 513

I found a solution

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

Upvotes: 1

Parag
Parag

Reputation: 543

Just set this property on ListBox:

VirtualizingStackPanel.ScrollUnit ="Item"

Another mode is "Pixel", which is default mode.

Upvotes: 1

cptiv
cptiv

Reputation: 166

You can use ListBox instead of ScrollViewer. I thought you did not want to have a selection style so I changed it.

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

Upvotes: 0

Related Questions