CODEWITHSUNDEEP
wpfgridoverflowz-indexexpander
Joe
Joe

Reputation: 2591

How to make expander expand over grid rows

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

Upvotes: 4

Views: 4974

Answers (2)

RayLoveless
RayLoveless

Reputation: 21088

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

Upvotes: 2

Joe
Joe

Reputation: 2591

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.

Upvotes: 3

Related Questions