WPF change ListView scroll speed

3.8k Views Asked by At

I have a ListView with custom-made cells (items).

This ListView represents a conversation between two persons exchanging messages with my application. Each time a message is added, the conversation auto-scrolls to the last item.

I am facing a few "strange" issues :

When a user writes a rather long message (say, 10 lines), it can then take up almost the whole screen (meaning the space allocated to the ListView) which is normal of course but then the scrolling is somewhat broken.

First, when the list auto-scrolls to this message, a big white space appears below the item all the way down to the bottom of my ListView. See picture : Example whith big message and big white space

And when messages are very short (single line) : Example with short messages

Second, and in all cases, the scroll speed is way to fast. A single mous-wheel "stroke" (the feeling in your finger as you scroll) will move the scroll bar too fast : up to 4 small messages are scrolled ! That's too much !

So question is : how to control the scroll speed ? How to slow it down ? Why is there this big white space ? Thanks for the help !

[UPDATE 1]

Requested by @CurtisHx my ListView XAML is as follow :

http://pastebin.com/FFZGhi6w

I hope it helps understanding my issue!

2

There are 2 best solutions below

7
On

One way to be to set ScrollViewer.CanContentScroll="False" on the ListView. https://social.msdn.microsoft.com/Forums/vstudio/en-US/47bd6a75-7791-4c0f-93ae-931e9a6540e7/smooth-scrolling-on-listbox?forum=wpf

You will loose virtualization on the ListView, so keep the number of elements in the ListView to something reasonable. That should fix the fast scroll speed.

Text Alignment

The text is being aligned correctly. Currently, the parent container limits the width of the TextBlocks. TextBlocks will fill all of the horizontal space it can before wrapping the text. So for long messages, the TextBlock will expand horizontally until it hits the limits of the parent container.

In order to get the staggered text, the width of the message needs to be less than width of the ListView. If you widen the window, you'll see the text become staggered. Below is a snippit of code, pointing out the TextBlock that needs to be width limited.

<ListView x:Name="ConversationList" ScrollViewer.IsDeferredScrollingEnabled="False" ScrollViewer.CanContentScroll="False" ScrollViewer.VerticalScrollBarVisibility="Auto"
            BorderBrush="Transparent" Grid.Row="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,10,10">
     <!-- Big Snip /!-->
     <ListView.ItemTemplate>
        <DataTemplate>
           <!-- Snip /!-->
           <Border Padding="0, 15, 0, 15">
              <Grid x:Name="ConversationBubble">
                 <Grid.RenderTransform>
                    <TranslateTransform />
                 </Grid.RenderTransform>
                 <Border Margin="70, 5, 70, 5" HorizontalAlignment="{Binding Alignment}" BorderBrush="#ECECEC" Visibility="Visible" Background="#F1F1F2"  Padding="10">
                    <StackPanel>

1
On

I know this is too late, but you can set this property on a ListView:

VirtualizingPanel.ScrollUnit="Pixel"