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?
3 Answers
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>
-
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.– MartinJan 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 NoeMay 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 May 5, 2020 at 11:27
- 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.
-
This would be the answer, because
ClipToBounds="True"
does not preserve required space for displaying component when grid row width is not fixed.– n0neFeb 9, 2017 at 4:06
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.