I have a problem with a class which extends ListBox in Windows Phone 7 Silverlight. The idea is to have a full ScrollViewer (black, e.g. fills the whole phone screen) and that the ItemsPresenter (red) has a margin (green). This is used to have a margin around the whole list but the scroll bars begin in the top right edge and end in the bottom right edge of the dark rectangle:
The problem is, that the ScrollViewer can't scroll to the very end, it cuts 50 pixels off of the last element in the list. If I use StackPanel instead of VirtualizingStackPanel the margins are correct BUT the list is no longer virtualizing.
Thanks for any ideas, I've tried a lot but nothing is working. Is this a control bug?
SOLUTION: Use the InnerMargin property of the ExtendedListBox control from the MyToolkit library!
C#:
public class MyListBox : ListBox
{
public MyListBox()
{
DefaultStyleKey = typeof(MyListBox);
}
}
XAML (e.g. App.xaml):
<Application
x:Class="MyApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
<Application.Resources>
<ResourceDictionary>
<Style TargetType="local:MyListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter Margin="30,50,30,50" x:Name="itemsPresenter" />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
...
</Application>
Update 1
I created a simple sample app: The scrollbar can't scroll at the end... If you change the VirtualizingStackPanel to StackPanel in App.xaml and it works as expected but without virtualization
Update 2 Added some sample pictures. Scrollbars are blue to show their position.
Expected results (use StackPanel instead of VirtualizingStackPanel):
Correct_01: Scrollbar at top
Correct_01: Scrollbar at middle
Correct_01: Scrollbar at bottom
Wrong examples:
Wrong_01: Margin always visible (example: scroll position middle)
Only solution is to add a dummy element at the end of the list to compensate the margin. I'll try to add this dummy element dynamically inside the control logic... Add some logic into the bound ObservableCollection or the view model is no option.
UPDATE: I added my final solution as a separate answer. Checkout the ExtendedListBox class.
