#1,060 – Clipping in Grid Happens Before Render Transforms
April 28, 2014 1 Comment
Layout and render transforms fit into the layout logic for panels as follows:
- Layout transforms are performed
- Panel calculates layout of child elements (and clips or resizes)
- Render transforms are performed
Clipping and/or resizing of elements happens after layout transforms have been applied. This means that the layout-transformed object is clipped/resized to fit into the Grid. You can, however, applied a render transform to an object to allow it to extend outside the bounds of the Grid, because this step happens after clipping/resizing.
Below, the first button is rotated before layout, so the rotated button is sized to fit into the Grid cell. The second button is rotated after layout, so is not resized.
<Grid ShowGridLines="True" Background="Bisque" Margin="10" ClipToBounds="false"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Button Content="Click Here Please" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button.LayoutTransform> <RotateTransform Angle="30"/> </Button.LayoutTransform> </Button> <Button Grid.Row="1" Content="Click Here Please" Width="100" VerticalAlignment="Center"> <Button.RenderTransform> <RotateTransform Angle="30"/> </Button.RenderTransform> </Button> </Grid>
Thanks a lot for this explanation Sean, it really made my day!