Grid ClipToBounds=False does not work

DevFear · 12 Sep 2022, 12:25

Grid by default cuts off any nested element if it goes beyond the boundaries. Moreover, everything works well on Canvas
https://ibb.co/TMCQhwF
https://ibb.co/znQswwG

12 Sep 2022, 20:05

The layout system will produce the clipping region of an element depending on various factors:

When an element is bigger than its container, it will activate a clipping rectangle equal to parent's bounding box. That clipping rectangle is moved along with the element, so if it has a RenderTransform the visible part of the element doesn't change.

    <Border Width="200" Height="100" Background="Silver" Margin="0,5,0,0">
      <TextBlock Text="This text is bigger than its container" Background="Red" VerticalAlignment="Center" FontSize="16"/>
    </Border>
    <Border Width="200" Height="100" Background="Silver" Margin="0,5,0,0">
      <TextBlock Text="This text is bigger than its container" Background="Red" VerticalAlignment="Center" FontSize="16">
        <TextBlock.RenderTransform>
          <TranslateTransform X="100"/>
        </TextBlock.RenderTransform>
      </TextBlock>
    </Border>

Negative margins can be specified to extend the available space provided by a container to avoid the clipping:

    <Border Width="200" Height="100" Background="Silver" Margin="0,5,0,0">
      <TextBlock Text="This text is bigger than its container" Background="Red" VerticalAlignment="Center" FontSize="16" Margin="0,0,-100,0"/>
    </Border>

When a container has ClipToBounds="True" then it activates a clipping rectangle that is placed in the container's bounding box. This means that if content is moved (with margins or using a RenderTransform), it will still be clipped:

    <Border Width="200" Height="100" Background="Silver" Margin="0,5,0,0" ClipToBounds="True">
      <TextBlock Text="This text is bigger than its container" Background="Red" VerticalAlignment="Center" FontSize="16" Margin="0,0,-100,0"/>
    </Border>
    <Border Width="200" Height="100" Background="Silver" Margin="0,5,0,0" ClipToBounds="True">
      <TextBlock Text="This text is bigger than its container" Background="Red" VerticalAlignment="Center" FontSize="16">
        <TextBlock.RenderTransform>
          <TranslateTransform X="100"/>
        </TextBlock.RenderTransform>
      </TextBlock>
    </Border>

Some elements reimplement the default behavior to allow rendering outside its bounding box (like Canvas or AdornerLayer) when ClipToBounds="False":

    <Canvas Width="200" Height="100" Background="LightGreen" Margin="0,5,0,0">
      <TextBlock Canvas.Top="35" Text="This text is bigger than its container" Background="Red" VerticalAlignment="Center" FontSize="16"/>
    </Canvas>
    <Canvas Width="200" Height="100" Background="LightGreen" Margin="0,5,0,0" ClipToBounds="True">
      <TextBlock Canvas.Top="35" Text="This text is bigger than its container" Background="Red" VerticalAlignment="Center" FontSize="16"/>
    </Canvas>

Summarizing, the behavior you are seeing is correct.

Grid ClipToBounds=False does not work

Grid ClipToBounds=False does not work

Re: Grid ClipToBounds=False does not work

Who is online