Expander Control

May 15, 2013 at 6:03 AM
I am looking to have a series of controls inside an expander - where the expanders may contain more expanders. The idea is to turn a traditional pageframe display of large amounts of data into a series of horizontal expanders where the user can click on the expander to see the detail.

The hope is that this approach will then work just as well on a desktop as it might on a tablet or possibly smaller device.

So the idea is to have a window (similar to the windows in VS2012) with the expanders. The controls that show up with the expander is opened layout based on the screen space available.

And I would have the title of the bar tied to a name (type of data) and the name of the data that will show up if opened (or maybe even enough data that it won't need to be opened most of the time.)

I am guessing that I will have to do this all on my own as there isn't an option in the FW to support it (although the groups is a good start.) But I thought I would check before I just went of and built it.

If I do have to build it, any pointers on approaches to make it generic enough for re-use would be appreciated.

Thanks!
Coordinator
May 16, 2013 at 11:16 PM
This would be really easy to do. There is no real framework support needed for this. WPF just does this out of the box. Something like this will do for instance:
<StackPanel Orientation="Horizontal">
    <Expander Header="Something>
        <!-- Whatever controls in here -->
    </Expander>
    <Expander Header="Something>
        <!-- Whatever controls in here -->
    </Expander>
    <Expander Header="Something>
        <!-- Whatever controls in here -->
    </Expander>
</StackPanel>
That's really all you need.

To make it look real nice, you may want to create a nice style for those expanders. Maybe one that renders the header vertical and expands to the left. That would be pretty easy to do.

One approach I personally like is to not use expanders, but to stick with a tab control instead. This is not real obvious to most people, but you can create tab controls with tab pages and then just create a style that looks exactly like the expanders with multiple tab pages shown at the same time. There really isn't much of a difference between my stack panel and expander example above and using a styled tab control (like I said: Most people don't just intuitively get this, and it is a whole new paradigm). The advantage of doing this is that everyone knows how to do tabs. It is real easy to do and then you style it to use expanders. And you have great flexibility. If you decide tabs would have been better after all, then you just style the whole thing as tabs again. And if you decide you would really like to use a blade style interface (kind of like the xbox does when you hold the yellow button down), then you just style it like that. And so forth. It is really nice and maintainable. And once you have the style, it is extremely easy to create more of those without having to teach your developers how to do the special expander setup.


Markus
May 22, 2013 at 1:18 AM
Markus,
One approach I personally like is to not use expanders, but to stick with a tab control instead. This is not real obvious to most people, but you can create tab controls with tab pages and then just create a style that looks exactly like the expanders with multiple tab pages shown at the same time<<
Ok, now I am confused again (so what else is new... :) )

Could you point me to an example of a grid that behaves like an expander?

Thanks,

Fletcher
Coordinator
May 22, 2013 at 1:49 AM
You mean a tab control acting like an expander? I don't have a specific example for that. But did you see the video in that other link I posted?

Markus
May 22, 2013 at 5:54 AM
Markus,

I did, but it seems to end prematurely and the next video is about an alligator....

So I saw the new UI, but didn't see much that could help before it ended (but I may have missed it.)

Thanks,

Fletcher
Coordinator
May 24, 2013 at 5:55 AM
LOL... yes, these are my personal videos and there is an alligator in there somewhere :-)

The video is just aiming to get people thinking about what one can do with tab controls in WPF. It's the closest I have as far as a demo for your question, unfortunately.
I could probably create an example for you, but at that point we are talking about spending some time on that, which would get us into a premium support situation.


Markus