Zordering with custom items in a listbox - Silverlight

I'm cooking up a custom button. This screenshot will be helpful. There's no problem with the button as seen in the image because the badge is hanging off to the left. But if I want the badge to hang off the right then the next item in the listbox will obscure the parts of the badge that go beyond the bounds of it's container (the width of the button). Now I can't fix this with zordering, right? Because that only applies to the ordering within its container, in this case the ListBoxItem. Is there anything that can be done here? FYI, I'm hoping to avoid a work-around such as putting in large enough margins to give the badges room. I have another custom button whose text is editable and the e开发者_StackOverflow社区xpansion of the TextBox used to take the inputted text will expend well wide beyond the underlying button.

You need to add a ZIndex to the containing ListBoxItem itself. One approach that might work for a small set of items it so create a new ListBox type.

public class ZOrderedListBox : ListBox
{
    private int _ZIndex = 0;

    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        Canvas.SetZIndex((UIElement)element, _ZIndex--);
    }
}

The ZorderedListBox above will assign a descending ZIndex so that the earlier items have a higher zindex than later ones. Caveat this simplistic solution only works with StackPanel as the Items panel, it won't work with the default VirtualizingStackPanel, what will take greater sophistication.