Silverlight RichTextBox/ListBox/ScrollViewer strange behaviour - silverlight

Question

I have a user control with the following XAML:
<ScrollViewer>
<ListBox ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<RichTextBox>
<Paragraph>
<Run Text="{Binding}"/>
</Paragraph>
</RichTextBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
And code behind:
public partial class MainPage {
public MainPage() {
InitializeComponent();
Items = new ObservableCollection<string>(Enumerable.Range(0, 100).Select(x => "some text"));
DataContext = this;
}
public ObservableCollection<string> Items { get; set; }
}
When this code runs, the vertical scroll bar for the ScrollViewer goes down to the bottom. However, if I remove the binding in the Run in the RichTextBox and hard-code the text:
<Run Text="some text"/>
Now the scroll bar stays at the top (as I would expect).
Is this a bug? If not, what is going on? How can I fix this (note: this is simplified XAML, I need the ScrollViewer because the ListBox is actually in a grid)?

Answer 1

I can´t tell you why the ScrollViewer behaves like that, but i would change the XAML to the following. Then is the scroller at the top, if you use binding or not in the DataTemplate.
XAML:
<ListBox ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<RichTextBox>
<Paragraph>
<Run Text="{Binding}"/>
</Paragraph>
</RichTextBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Answer 2

Make it Fixed width and Height of scrollviewer depends upon the grid row and column size. it help to fixed size in run time. like that
<ScrollViewer VerticalScrollBarVisibility="Auto" VerticalAlignment="Top" HorizontalScrollBarVisibility="Auto" Width="135" Height="463">
<ListBox ItemsSource="{Binding Items}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Orientation="Vertical">
<RichTextBox>
<Paragraph>
<Run Text="{Binding}"/>
</Paragraph>
</RichTextBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I hope its helpful

Answer 3

try setting the listbox's height to auto and make the scrollviewer height fixed. that way, the scrollbars only show when the listbox's height is greater than the scrollviewer's height.
But, looking at the way the objects are defined. You are gonna have one big problem in the future. That is, in SL4, Listboxes take up height and don't give it back. So if you have something that expands inside the listbox (i.e. Accordion items) or allow deleting inside the listbox, the listbox would expand to show all it's items. But once an item is deleted, it will never give back the height. The result would be your scrollbar always shows even when you have nothing more to show at the bottom.
That is completely out of topic but I felt that I should let you know.
I hope I helped, if not now, then for the future.

Answer 4

I finally came up with a solution to this problem. I removed the ScrollViewer from the RichTextBox template.

Answer 5

Set the MaxHeight on the Listbox, this will allow the scrollviewer to only show up when the screen dimensions are too small.

Answer 6

Thank you so much! You just saved me days of pain and suffering... :)
For those (like me) who wonder how to remove the scrollviewer from the rtb template :
Extract the template with blend.
Find the scrollviewer element and replace it with a stackpanel (keep the x:name attribute).