4

I was looking for the answer of this, but all solutions I've found was not working properly.
Here is the problem. I have interface,based on grid like the below:


| __________________________________|
|(v)expander |(v)expander  |(v)expander |  <- grid inside the row of main grid
|___________________________________|
|                                        |
|                                        |
|                                        |
.                                        . <- grid, stackpanel, etc. inside row
.                                        .
.                                        .
|                                        |
|___________________________________|
|(^)expander  | (^) expander   |         | <- grid inside the row of main grid
|___________________________________|

Each expander is placed on it's own border.
Now I want expanders to expand over the rest of interface. Top expanders expand down, bottom ones - up. I can't use RowSpan. It should be done with zIndex somehow I guess, but I was trying with that in a lot and didn't work. I set all grids and borders Panel.ZIndex property to let's say 99, and the content of expander was set on ZIndex about 999.

Is there any way to do it?
Thanks,
Joe

Joe
  • 2,551
  • 6
  • 38
  • 60
  • Should the expanders stay open which checked or should they close similar to how the drop-down of a ComboBox works? – CodeNaked Apr 30 '11 at 00:09
  • Well, both would be fine, but it would be better if it would stay open until you click to close it. – Joe Apr 30 '11 at 11:20

2 Answers2

3

After a while (when I have been doing sth else to refresh my mind on this topic) I found the solution. It is based on Karl Shifflet solution ( http://karlshifflett.wordpress.com/2008/02/05/wpf-sample-series-expander-control-with-popup-content/ ).
I placed the Grid that holds top expanders onto the Canvas. I set the Canvas Panel.ZIndex property to about 99 and set the Background to desired colour. The Grid.Background property was set to Transparent and Width to fill canvas size:

Background="Transparent" Width="{Binding RelativeSource=
  {RelativeSource Mode=FindAncestor, AncestorType={x:Type Canvas}}, 
  Path=ActualWidth}"

Important thing was to set all expanders VerticalAlignment to Top, because when one of them expands, the Grid Height (which should not be hard defined in this case) also resizes, and when Vertical Alignment of them is not set to Top, all expanders are placed in the middle.

I hope it helps someone.

jmgardn2
  • 981
  • 2
  • 8
  • 21
Joe
  • 2,551
  • 6
  • 38
  • 60
  • 1
    Look's like Karl may have deleted his site. The link is dead now. :( – itsmatt Jun 07 '16 at 13:58
  • I can't find any page with the solution anymore but I hope my explanation is helpful enough to help you make it work – Joe Jun 08 '16 at 06:24
2

You may want to use a pop up instead of an expander if you want to guarantee that it will appear on top.

RayLoveless
  • 19,880
  • 21
  • 76
  • 94