WPF c# Listbox external scrollbuttons

Question

Hi have an listbox and i want external buttons to scroll the listbox. How can i achive this. thanks for help and examples.

Like a have an listbox on the left side. with many vertical items. then on the right side i want 2 buttons. one down button and up button. when i click on this buttons the listviews scrolls down or up.. — Tan, Apr 14 '10 at 12:25

majocha · Accepted Answer · 2010-04-14T12:23:50.553

2

Add handlers for button clicks:

  private void buttonUp_Click(object sender, RoutedEventArgs e) {
   if (listBox1.SelectedIndex > 0) 
     listBox1.SelectedIndex--;
   listBox1.ScrollIntoView(listBox1.SelectedItem);

  }

  private void buttonDown_Click(object sender, RoutedEventArgs e) {
   if (listBox1.SelectedIndex < listBox1.Items.Count - 1) 
     listBox1.SelectedIndex++;
   listBox1.ScrollIntoView(listBox1.SelectedItem);
  }

edited Apr 14 '10 at 12:23

answered Apr 14 '10 at 12:13

majocha

1,161
6
12

This is not scrolling, but selecting items (up or down) to let the control handle scroll itself (if needed). – RvdK Apr 14 '10 at 12:18
It's a general idea of doing it. Anyway I added scrolling code to my example. – majocha Apr 14 '10 at 12:25
In what way it doesn't work? Exception? Compile error? Post your code, or even better a simplified repro. – majocha Apr 14 '10 at 12:46
It most definitely works for me. If we don't see your code we cannot tell what are you doing wrong. – majocha Apr 14 '10 at 13:35

score 1 · Answer 2 · answered Apr 14 '10 at 12:15

XAML

<Window x:Class="WpfApplication36.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="479" Width="385">
<Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>

    <ListBox Name="lstProducts"
             DisplayMemberPath="ModelName"
             IsSynchronizedWithCurrentItem="True"
             ScrollViewer.VerticalScrollBarVisibility="Hidden">

    </ListBox>

    <Border Grid.Row="1"
            Padding="5"
            Margin="0,5,0,5"
            Background="LightSteelBlue">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>

            <TextBlock Margin="7">Model Number:</TextBlock>
            <TextBox Margin="5"
                     Grid.Column="1"
                     Text="{Binding Path=ModelNumber}"></TextBox>
            <TextBlock Margin="7"
                       Grid.Row="1">Model Name:</TextBlock>
            <TextBox Margin="5"
                     Grid.Row="1"
                     Grid.Column="1"
                     Text="{Binding Path=ModelName}"></TextBox>
            <TextBlock Margin="7"
                       Grid.Row="2">Unit Cost:</TextBlock>
            <TextBox Margin="5"
                     Grid.Row="2"
                     Grid.Column="1"
                     Text="{Binding Path=UnitCost}"></TextBox>
            <TextBlock Margin="7,7,7,0"
                       Grid.Row="3">Description:</TextBlock>
            <TextBox Margin="7"
                     Grid.Row="4"
                     Grid.Column="0"
                     Grid.ColumnSpan="2"
                     TextWrapping="Wrap"
                     VerticalScrollBarVisibility="Visible"
                     Text="{Binding Path=Description}"></TextBox>
        </Grid>
    </Border>

    <Grid Grid.Row="2">
        <StackPanel Orientation="Horizontal">
            <Button Name="cmdPrev"
                    Click="cmdPrev_Click">&lt;</Button>
            <TextBlock Margin="5,0,5,0"
                       Name="lblPosition"
                       VerticalAlignment="Center"></TextBlock>
            <Button Name="cmdNext"
                    Click="cmdNext_Click">&gt;</Button>
        </StackPanel>
    </Grid>
</Grid>

Code

namespace WpfApplication36{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
      private ICollection<Product> products;
    private ListCollectionView view;
    private void cmdNext_Click(object sender, RoutedEventArgs e)
    {    
        view.MoveCurrentToNext();          
    }
    private void cmdPrev_Click(object sender, RoutedEventArgs e)
    {
        view.MoveCurrentToPrevious();
    }

    private void lstProducts_SelectionChanged(object sender, RoutedEventArgs e)
    {
       // view.MoveCurrentTo(lstProducts.SelectedItem);
    }

    private void view_CurrentChanged(object sender, EventArgs e)
    {
        lblPosition.Text = "Record " + (view.CurrentPosition + 1).ToString() +
            " of " + view.Count.ToString();
        cmdPrev.IsEnabled = view.CurrentPosition > 0;
        cmdNext.IsEnabled = view.CurrentPosition < view.Count - 1; 
    }
    public Window1()
    {
         InitializeComponent();

        products = AddProduct() ;

        this.DataContext = products;
        view = (ListCollectionView)CollectionViewSource.GetDefaultView(this.DataContext);
        view.CurrentChanged += new EventHandler(view_CurrentChanged);

        lstProducts.ItemsSource = products;            

    }

    private Collection<Product> AddProduct()
    {

        Collection<Product> test = new Collection<Product>();
        Product prod=null;

        prod=new Product();
        prod.ModelName ="BMW";
            prod.ModelNumber ="Q234";
                prod.Description="BMWWWWWWWWWWWW";
                    prod.UnitCost="$3333333";
                    test.Add(prod);

                    prod = new Product();
                    prod.ModelName = "BMW11";
                    prod.ModelNumber = "Q234111";
                    prod.Description = "BMWWbbb";
                    prod.UnitCost = "$3333333";
                    test.Add(prod);

                    prod = new Product();
                    prod.ModelName = "BM3W";
                    prod.ModelNumber = "Q233334";
                    prod.Description = "BMWb33bbb";
                    prod.UnitCost = "$3333333";
                    test.Add(prod);
        return test;
    }



}

public class Product
{
    private string modelNumber;
    public string ModelNumber
    {
        get {return modelNumber;  }
        set{ modelNumber=value; }
    }
     private string modelName;
    public string ModelName
    {
        get {return modelName;  }
        set{ modelName=value ;}
    }
    private string unitCost;
    public string UnitCost
    {
        get { return unitCost; }
        set { unitCost = value; }
    }
    private string description;
    public string Description
    {
        get { return description; }
        set { description = value; }
    }


}

}

score 0 · Answer 3 · answered Apr 14 '10 at 13:52

Heres my Code guys! Thanks for the help

        private void btnArrowUp_Click(object sender, RoutedEventArgs e) {
        if(lbZones.SelectedIndex > 0) {
            lbZones.SelectedIndex--;
            lbZones.ScrollIntoView(lbZones.SelectedIndex);
        }
    }

    private void btnArrowDown_Click(object sender, RoutedEventArgs e) {
        if(lbZones.SelectedIndex < lbZones.Items.Count - 1) {
            lbZones.SelectedIndex++;
            lbZones.ScrollIntoView(lbZones.SelectedIndex);
        }
    }

And heres the wpf

<Button Template="{StaticResource EmptyButton}" Name="btnArrowUp" Click="btnArrowUp_Click">
                                                <Canvas x:Name="ArrowUp" HorizontalAlignment="Left" VerticalAlignment="Top" Width="101" Height="72" ClipToBounds="True">
                                                    <Image x:Name="up" Width="100" Height="50" Source="pil 3_Images\Image.png" Canvas.Left="0" Canvas.Top="10.543"/>
                                                </Canvas>
                                            </Button>

You don't usually need canvas to put image in a button. So does it work finally? — majocha, Apr 14 '10 at 17:39
No sorry but it doesnt scroll down or up. Is there any other ways? — Tan, Apr 15 '10 at 06:24
you made a mistake in your code. lbZones.ScrollIntoView(lbZones.SelectedIndex); should be lbZones.ScrollIntoView(lbZones.SelectedItem); post the rest of your XAML not only the button. I got a feeling there may be more problems. Also you can create a stripped down simplified sample without custom styles, make it work and then work up from it. — majocha, Apr 15 '10 at 16:33

WPF c# Listbox external scrollbuttons

3 Answers3

Linked