I am writing a small application on WPF. It is necessary that inside the border (Border) there is a figure (for example, a Rectangle) to which certain transformations can be applied (for example, a turn by 30 degrees).
Everything turned out, but only when turning the figure, it goes beyond the bounds of the frame. How to fix it?

The figure got out beyond

partial class AbstractShape : Border { public AbstractShape(in Shape shape) { InitializeComponent(); Child = shape; } }

What is the problem, as it seems to me: The default shape of the figure is the Fill property, that is, it fills the entire accessible area, but instead of distorting itself, it prefers to get out of the box.
If I stretch the frame itself in height and width after the shape is rotated, the shape will also change its size accordingly and pop up again.

  • not sure, but modem helps reduce the index along the z axis of the Panel.ZIndex figure - Sasuke
  • By default, any element allows you to "crawl out" its content for their chapels. To change this logic, it is enough to set ClipToBounds to True with your Border 'a, then everything that goes beyond this element will be cut off . - EvgeniyZ
  • @EvgeniyZ, And how to make it not cut off, but distorted but fit entirely? - Daniel Demidko
  • then scale the element - tym32167
  • In general, there are 2 types of transformation: RenderTransform and LayoutTransform . Choose the one that suits you - Andrew NOP

1 answer 1

There are 2 types of transformations:

  • RenderTrahsform - the transformation is applied after the layout , that is, the parent panel (or control) first measures the shape and allocates space to it, and then the shape transforms relative to that location, so it can go beyond the parent;

  • LayoutTransform - the transformation is applied before the layout , that is, first the transformation is applied to the shape, and then the parent panel (or control) measures the already transformed shape and allocates space to it, taking into account the new dimension, so transformations like TranslateTransform may not add any visible result .

Example:

 <Grid Margin="5"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Border BorderThickness="1" BorderBrush="Brown" Margin="5"> <Border Background="YellowGreen" RenderTransformOrigin="0.5,0.5"> <Border.RenderTransform> <RotateTransform Angle="30"/> </Border.RenderTransform> </Border> </Border> <Border BorderThickness="1" BorderBrush="Brown" Margin="5" Grid.Column="1"> <Border Background="YellowGreen" RenderTransformOrigin="0.5,0.5"> <Border.LayoutTransform> <RotateTransform Angle="30"/> </Border.LayoutTransform> </Border> </Border> </Grid>

enter image description here

  • Thank! That helped. It turns out that when using LayoutTransform it is not necessary to install ClipToBounds. - Daniel Demidko
  • ClipToBounds is generally a trimming of content along the border of the parent and has a mediocre relationship to the transformations. - Andrey NOP
  • Those. ClipToBounds should be ClipToBounds exactly at the parent, and not at the content. - Andrey NOP