WPF ListView and ScrollViewer


The ListView control derives from (inherits from) ListBox. A ListView is basically like a ListBox, but it also has a View property. This property allows you to specify a predefined way of displaying the items.

Are you working on a WPF project that requires a ListView? Are you having trouble with the scroll bar?

Here is an example of a simple program that demonstrates some of the settings you could use to get the scroll bar to appear and disappear as needed. Below is a screenshot of the program. From the top down, It has a Button (“Add ‘hey dude!’ to List”), a ListView and another Button (“Add ‘Cool!’ to the list”). All three are inside a Grid. However, the ListView is actually inside a ScrollBar. There are three RowDefinitions in the Grid and no column definitions because there is only one column. The second RowDefinition Height is set to *. If you set it to Auto the scroll bar will not work.

We have added some items to the list in XAML. They are always there when the program starts. If you click either button we dynamically add an item to the ListViewer.

Below is the XAML code. Notice that the ScrollViewer is the container of the ListView. The ListView is inside the ScrollViwer. Notice that the ListViewItem text is really just a TextBlock. Notice the Height of the second RowDefinition. Feel free to copy and paste this code into your non-production project and test it out.

<Window x:Class="ListViewFit.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ListViewFit"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="ListViewFit" Height="250" Width="350">
    <Grid VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <!-- no column definition need since only one column -->
        <Button Name="btnFill" Content="Add 'hey dude!' to List" Click="BtnFill_Click" />
        <ScrollViewer Grid.Row="1" >
            <ListView Name="lstView">
                <ListViewItem>
                    <TextBlock Text="First in the list and in XAML"/>
                </ListViewItem>
                <ListViewItem>For the scroll to appear as needed</ListViewItem>
                <ListViewItem>we use a Grid and be sure that the Height in</ListViewItem>
                <ListViewItem>RowDefinition for the ScrollViewer position is</ListViewItem>
                <ListViewItem>set to Height="*"</ListViewItem>
                <ListViewItem>Height="Auto" will not work.</ListViewItem>
                <ListViewItem>Click either button a few time to see the</ListViewItem>
                <ListViewItem>scroll bar appear as needed.</ListViewItem>
            </ListView>
        </ScrollViewer>
        <Button Name="btnCool" Content="Add 'Cool!' to the list" Grid.Row="2"
                Click="BtnCool_Click"/>
    </Grid>
</Window>

Below is the code behind. Notice that when we dynamically add items to the ListView, we are adding TextBlocks. We need to instantiate and initialize a TextBlock and then add it to the list in the ListView. We reference the ListView with its XAML Name, lstView. In the Cool button we use object initialization syntax of C#.

using System.Windows;
using System.Windows.Controls;

namespace ListViewFit
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void BtnFill_Click(object sender, RoutedEventArgs e)
        {
            TextBlock tb = new TextBlock();
            tb.Text = "hey dude!";
            lstView.Items.Add(tb);
        }
        private void BtnCool_Click(object sender, RoutedEventArgs e)
        {
            TextBlock tb = new TextBlock { Text = "Cool!" };
            lstView.Items.Add(tb);
        }
    }
}

Leave a Reply