Scrolling In ItemsControl

Here is one way to control a ScrollViewer without Scrollbar

Let say we have this basic UI 

A button on the left to scroll to the left, A button on the right to scroll right and ItemsControl between the buttons which is what we are going to scroll when the buttons are clicked

 <UserControl.Resources>
        <DataTemplate x:Key=”dt”>
            <TextBlock Margin=”5,0,0,0″ Text=”{Binding FirstName}”></TextBlock>
        </DataTemplate>
    </UserControl.Resources>
    <Canvas>
        <Grid Width=”400″ Height=”50″>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=”50″></ColumnDefinition>
                <ColumnDefinition Width=”300″></ColumnDefinition>
                <ColumnDefinition Width=”50″></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Content=”left” x:Name=”btnLeft” Grid.Column=”0″></Button>
            <ScrollViewer Grid.Column=”1″ VerticalScrollBarVisibility=”Hidden” HorizontalScrollBarVisibility=”Hidden” x:Name=”sv” Width=”300″ Height=”50″>
                <ListBox  x:Name=”list1″ ItemTemplate=”{StaticResource dt}”>
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation=”Horizontal”></StackPanel>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </ScrollViewer>
            <Button Content=”right” x:Name=”btnRight” Grid.Column=”2″></Button>
        </Grid>             
    </Canvas>

we hide the scrollbars of the scrollviewer and we have 2 buttons to scroll left and right. Lets  bind the listbox to an ItemsSource and attach eventhandlers to handle the buttonclick events


List<Customer> customers = new List<Customer>();
 for (int i = 0; i < 20; i++)           
    customers.Add(new Customer { FirstName = “Customer..” + i.ToString() });
           
 list1.ItemsSource = customers;
 btnLeft.Click += new RoutedEventHandler(btnLeft_Click);
 btnRight.Click += new RoutedEventHandler(btnRight_Click);

 

In the button click events we can change the ScrollToHorizontalOffset and HorizontalOffset  to get the desired effect


void btnRight_Click(object sender, RoutedEventArgs e)
        {
            if (sv.ScrollableWidth > 0)
            sv.ScrollToHorizontalOffset(sv.HorizontalOffset + 10);
        }

void btnLeft_Click(object sender, RoutedEventArgs e)
        {
            if (sv.HorizontalOffset > 0)
                sv.ScrollToHorizontalOffset(sv.HorizontalOffset – 10);
        }

 

 

Advertisements

7 thoughts on “Scrolling In ItemsControl

  1. This was nice post. It was really useful.
    I Want to Know the way in which i can scroll the text from top to the bottom using the button as in this example.

    1. all you have to do is
      // if (sv.ScrollableWidth > 0)
      // sv.ScrollToHorizontalOffset(sv.HorizontalOffset + 10);

      change ScrollableWidth to ScrollableHeight

      ScrolltoHorizontalOffset to ScrolltoVerticalOffset

      HorizontalOffset to VerticalOffset

      the code with these changes should work

      1. Its not Working Mate for Vertical scrolling.What i Have to do.
        this code is for button down
        if (sv.VerticalOffset > 0)
        sv.ScrollToVerticalOffset(sv.VerticalOffset – 10);

        for button up

        if (sv.ScrollableHeight > 0)
        sv.ScrollToVerticalOffset (sv.VerticalOffset + 10);

  2. Its not Working Mate for Vertical scrolling.What i Have to do.
    this code is for button down
    if (sv.VerticalOffset > 0)
    sv.ScrollToVerticalOffset(sv.VerticalOffset – 10);

    for button up

    if (sv.ScrollableHeight > 0)
    sv.ScrollToVerticalOffset (sv.VerticalOffset + 10);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s