Question

I have list box with 10 items.
By default vertical scroll is enabled and i can see first 3 items.
Customer wants me to add 2 buttons “UP” and “down” and on a button click list box should show next 3 items.

For example i want to show by “down” click item 4,item 5, item 6.

How its possible to do with default WPF controls listbox and scrollview?

Answer 1

You can use ScrollViewer.ScrollToVerticalOffset method (msdn).

Example:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="20" />
        <RowDefinition Height="50" />
        <RowDefinition Height="20" />
        <RowDefinition Height="25" />
    </Grid.RowDefinitions>

    <Button x:Name="btnUp" Content="UP" Click="btnUp_Click" />

    <ScrollViewer x:Name="scroll" Grid.Row="1">
        <ListBox x:Name="lbData">
            <ListBoxItem>Item1</ListBoxItem>
            <ListBoxItem>Item2</ListBoxItem>
            <ListBoxItem>Item3</ListBoxItem>
            <ListBoxItem>Item4</ListBoxItem>
            <ListBoxItem>Item5</ListBoxItem>
            <ListBoxItem>Item6</ListBoxItem>
            <ListBoxItem>Item7</ListBoxItem>
            <ListBoxItem>Item8</ListBoxItem>
            <ListBoxItem>Item9</ListBoxItem>
            <ListBoxItem>Item10</ListBoxItem>
        </ListBox>
    </ScrollViewer>

    <Button x:Name="btnDown" Content="Down" Click="btnDown_Click" Grid.Row="2" />

    <StackPanel Grid.Row="3" Orientation="Horizontal">
        <TextBlock Text="Start with:" Margin="2" />
        <ComboBox x:Name="cbIndex" Loaded="cbIndex_Loaded" Margin="2" />
        <Button x:Name="btnGo" Content="GO" Click="btnGo_Click" Margin="2" />
    </StackPanel>
</Grid>

Code-behind:

private void btnUp_Click(object sender, RoutedEventArgs e)
{
    scroll.ScrollToVerticalOffset(scroll.VerticalOffset - 50);
}

private void btnDown_Click(object sender, RoutedEventArgs e)
{
    scroll.ScrollToVerticalOffset(scroll.VerticalOffset + 50);
}

public double GetOffset(int itemIndex)
{
    double result = 0;           
    for (int i = 0; i < itemIndex; i++)
    {
        result += (lbData.Items[i] as ListBoxItem).ActualHeight;
    }

    return result;
}

private void cbIndex_Loaded(object sender, RoutedEventArgs e)
{
    cbIndex.ItemsSource = Enumerable.Range(1, lbData.Items.Count);
}

private void btnGo_Click(object sender, RoutedEventArgs e)
{
    scroll.ScrollToVerticalOffset(GetOffset(cbIndex.SelectedIndex));
}