Scrolling inside selected Item of a ListView

Question

On a WPF-ListView Control the selected item has to visualize some additional details. If an item is selected, it needs more space then the ListView control provides.

As default, it is not possible to scroll inside the selected item. scrolling down, it jumps down directly to the next item and it is not possible to see the bottom part of the selected item.

Anyone an idea how to enable scrolling inside the selected item?

The following code demonstrates the behaviour. In real code the selected item is more complex, but for give an example, the selected item size is just modified when it is selected:

XAML:

<Window x:Class="ListViewWithLargeSelectedItem.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="300" Width="300">
<Grid>
    <ListView ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}" HorizontalContentAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border x:Name="border" Padding="10" HorizontalAlignment="Stretch">
                    <TextBlock Text="{Binding Text}" />
                </Border>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsSelected}"
                                             Value="true">
                        <Setter TargetName="border" Property="Padding"
                                        Value="40,200" />
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

Code behind:

public partial class MainWindow : Window
{
    private CustomItem _selectedItem;
    public CustomItem SelectedItem
    {
        get { return _selectedItem; }
        set
        {
            if (_selectedItem != null)
            {
                _selectedItem.IsSelected = false;
            }
            _selectedItem = value;
            _selectedItem.IsSelected = true;
        }
    }

    public List<CustomItem> Items
    {
        get { return (List<CustomItem>)GetValue(ItemsProperty); }
        set { SetValue(ItemsProperty, value); }
    }

    public static readonly DependencyProperty ItemsProperty =
            DependencyProperty.Register("Items", typeof(List<CustomItem>), typeof(MainWindow), new UIPropertyMetadata(null));

    public MainWindow()
    {
        InitializeComponent();
        Items = new List<CustomItem>();
        for (int i = 0; i < 10; i++)
        {
            Items.Add(new CustomItem() { IsSelected = false, Text = "ITEM " + i });             
        }
        DataContext = this;
    }
}

public class CustomItem : INotifyPropertyChanged
{
    public string Text { get; set; }
    private bool _isSelected;
    public bool IsSelected
    {
        get { return _isSelected; }
        set
        {
            if (_isSelected == value)
            {
                return;
            }

            _isSelected = value;
            NotifyOfPropertyChange("IsSelected");
        }
    }

    private void NotifyOfPropertyChange(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;
}

Answer 1

You question is not very clear, but if you are saying that your ListView scrolls using whole items and that you want it to scroll using pixels instead, then please see the ScrollViewer.CanContentScroll property page on MSDN. If that is the case, then you just need to set this Attached Property to False on your ListView to enable smooth scrolling:

<ListView ScrollViewer.CanContentScroll="False" ... />