Question

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

SampleApp.zip

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.

Answer 1

My current solution: Always change the margin of the last element of the list…

public Thickness InnerMargin
{
    get { return (Thickness)GetValue(InnerMarginProperty); }
    set { SetValue(InnerMarginProperty, value); }
}

public static readonly DependencyProperty InnerMarginProperty =
    DependencyProperty.Register("InnerMargin", typeof(Thickness),
    typeof(ExtendedListBox), new PropertyMetadata(new Thickness(), InnerMarginChanged));

private static void InnerMarginChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var box = (ExtendedListBox)d;
    if (box.lastElement != null)
        box.UpdateLastItemMargin();
    box.UpdateInnerMargin();
}

private void UpdateInnerMargin()
{
    if (scrollViewer != null)
    {
        var itemsPresenter = (ItemsPresenter)scrollViewer.Content;
        if (itemsPresenter != null)
            itemsPresenter.Margin = InnerMargin;
    }
}

private void UpdateLastItemMargin()
{
    lastElement.Margin = new Thickness(lastElementMargin.Left, lastElementMargin.Top, lastElementMargin.Right,
        lastElementMargin.Bottom + InnerMargin.Top + InnerMargin.Bottom);
}

private FrameworkElement lastElement = null;
private Thickness lastElementMargin;
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
    base.PrepareContainerForItemOverride(element, item);
    OnPrepareContainerForItem(new PrepareContainerForItemEventArgs(element, item));

    if ((InnerMargin.Top > 0.0 || InnerMargin.Bottom > 0.0))
    {
        if (Items.IndexOf(item) == Items.Count - 1) // is last element of list
        {
            if (lastElement != element) // margin not already set
            {
                if (lastElement != null)
                    lastElement.Margin = lastElementMargin;
                lastElement = (FrameworkElement)element;
                lastElementMargin = lastElement.Margin;
                UpdateLastItemMargin();
            }
        }
        else if (lastElement == element) // if last element is recycled it appears inside the list => reset margin
        {
            lastElement.Margin = lastElementMargin;
            lastElement = null; 
        }
    }
}

Using this “hack” to change the margin of the last list item on the fly (no need to add something to the bound list) I developed this final control:

• https://xp-dev.com/svn/mytoolkit/Shared/Controls/ExtendedListBox.cs

(The listbox has a new event for PrepareContainerForItem, a property and event for IsScrolling (there is also an extended LowProfileImageLoader with IsSuspended property, which can be set in the IsScrolling event to improve scrolling smoothness…) and the new property InnerMargin for the described problem…

• https://xp-dev.com/svn/mytoolkit/Shared/Media/ImageHelper.cs

Update: Checkout the ExtendedListBox class of my MyToolkit library which provides the solution described here…