WPF - Panel with expandable control for chopped elements

Question

I have an application with minimizable controls. Minimized items are displayed in a horizontal stackpanel. On resize (shrink) of the application items could be chopped because of too little space.
To avoid this my idea was to move chopped elements to an expandable control (like this)

The application follows the MVVM pattern, the items in the panel are in an ItemsControl bound to the view model.

My implementation for now is to use a custom panel where the chopped elements are handed out with a property "SpillOverElements". I wanted to bind another control (panel, expander or popup) to this property. The problem is that I am not able to bind to the "SpillOverElements" property of the "SpillOverPanel" inside the ItemsControl.

<ItemsControl>
    ItemTemplate="{StaticResource DummyContentDataTemplate}"
    ItemsSource="{Binding DisplayElementsCollection}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <local:SpillOverPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
</ItemsControl>

So the question is how could I bind to "SpillOverElements" property of the "SpillOverPanel". Any other ideas how to implement this are welcome, too. I am not sure if my way is the right approach.

Thanks in advance for your help!

Why not throw away that `StackPanel` and use a `Grid` that will display a `ScrollBar` to enable users to scroll to the hidden controls? — Sheridan, Jan 06 '15 at 14:00
Bit hacky but could you bind your SpillOverElements property to the ItemsControl.Tag property (via RelativeSource). Then you could bind your StackPanel to that instead. — GazTheDestroyer, Jan 06 '15 at 16:23

BTownTKD · Answer 1 · 2015-01-06T11:24:21.263

Forgive me, there's a lot of spitballing in the text below.

A Single, Reusable ItemsControl class

This will probably be a rather involved implementation. You will likely need to create entirely new WPF Controls, in the form of both a "SpilloverItemsControl" class and a "SpilloverItem" class to serve as the item container, for items displayed in the spillover control. The SpilloverItemsControl class would of course inherit from ItemsControl.

The SpilloverItem container will expose a property - "IsSpilledOver" (or something like that), which the parent control will automatically set to true or false based on various size and visibility calculations.

Your SpilloverItemsControl class will be layed out as a sort of composite control, providing 2 different ItemsControls within its ControlTemplate - one whose items' Visibility will be set to Visible if "IsSpilledOver" set to 'false', and set to 'Collapsed' if not; and another one to serve as the 'spillover' area, which will display only the items with "IsSpilledOver" set to true.

An Alternate Approach

An alternative approach, but slightly less reusable, is to have the "IsSpilledOver" property exist in your item ViewModel, and create a minimal Behavior to determine when it should be set to true or false. Then in your View, you would again just have two different ItemsControls bound to the same collection. One to display the 'non spilled-over' items and one to display the 'spilled-over' items. The visibility here, would be set in your ItemTemplate.

WPF - Panel with expandable control for chopped elements

1 Answers1