I have a problem with a class that extends ListBox in Windows Phone 7 Silverlight. The idea is to have a full ScrollViewer (black, for example, fills the entire screen of the phone) and that ItemsPresenter (red) has a margin (green). To do this, use the margin around the entire list, but the scroll bars begin in the upper right edge and end in the lower right edge of the dark rectangle:
The problem is that ScrollViewer cannot scroll to the very end; it cuts off 50 pixels from the last item in the list. If I use a StackPanel instead of VirtualizingStackPanel , the fields are correct, but the list is no longer virtualized.
Thanks for any ideas, I tried a lot, but nothing works. Is this a control error?
SOLUTION: Use the InnerMargin property of the ExtendedListBox control from the MyToolkit library
FROM#:
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 application: the scrollbar cannot scroll at the end ... If you change VirtualizingStackPanel to StackPanel in App.xaml and it works as expected, but without virtualization
SampleApp.zip
Update 2 Added some sample images. The scroll bars are blue to show your position.
Expected Results (use StackPanel instead of VirtualizingStackPanel ):
Correct_01: Scroll bar at the top
Correct_01: Mid scroll bar
Correct_01: scroll bar below
Invalid examples:
Wrong_01: margin is always visible (example: average scroll position)
The only solution is to add a dummy element at the end of the list to compensate for the margin. I will try to add this dummy element dynamically inside the control logic ... Add some logic to the ObservableCollection link or the view model is not an option.
UPDATE: I added my final decision as a separate answer. Checkout the ExtendedListBox class.