18

I have a Grid in my WPF window. When a particular button is pressed, I want a control in one of the Grid cells to expand downward to double its original size. When this happens, the control is clipped to the visual bounds of the containing cell. However, I need all of the content to be visible, over the top of the cell below. I tried setting Panel.ZIndex to a high value, to no avail. I basically need to emulate the functionality of "overflow:visible" in CSS. Is this possible in WPF/Xaml?

1
  • Have you tried ClipToBounds = false ?
    – Tormod
    Jul 2, 2011 at 13:27

3 Answers 3

15

Set the ClipToBounds property of the control within the cell to False and then wrap the cell's content in a Canvas. The Canvas is a guaranteed break out of bounds, not all controls do (such as Buttons).

Example:

<Canvas Grid.Row="5" Grid.Column="3">
    <TextBlock Text="Long text here" ClipToBounds="False">
</Canvas>
3
  • Just a comment for Silverlight: There is no 'ClipToBounds' property on the control classes like in WPF (msdn.microsoft.com/en-us/library/…). In Silverlight it is enough to wrap the control within a Canvas.
    – Martin
    Jan 26, 2016 at 10:25
  • Note that canvas will only break the bounds of its parent container. If their are more ancestor elements up the tree, the canvas will still be bound to them.
    – Josh Noe
    May 10, 2018 at 16:10
  • if an element is put within a Canvas panel, elements within do not participate in layout at all you will end up breaking your layout
    – Shah Aadil
    May 5, 2020 at 11:27
3
  • use RowSpan or columnspan
  • when defining the grid place the cell at the bottom. Since rendering engine renders from top to bottom and you want this cell to be on top of your other cells. You might be able to get away with zindex but i try to minimize maintaining zindex.
1
  • This would be the answer, because ClipToBounds="True" does not preserve required space for displaying component when grid row width is not fixed.
    – n0ne
    Feb 9, 2017 at 4:06
2

You can probably do this with a popup: http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup.aspx, especially if you want the overflow to disregard window boundaries (solutions involving adorners, for instance, may not). You'd want to put the control into the popup, and then expand the popup's height to get the overflow effect. You might need to put another panel or something behind the popup to ensure the non-expanded size stays correct.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.