Hide the child control when it's transformed out of its parent grid or border

Question

Let's say we have a grid with a TextBlock in it. Now if I do some RenderTransform which makes the TextBlock appear outside of the grid, the TextBlock is still visible. My question is simple: how to automatically hide the part of the TextBlock that's outside of the grid? (In other words, how to make the grid act like a visual bound of its child?)

Answer 1

You can use a clipping mask that matches the bounds of the parent element:

<Border Height="200" Width="200" BorderThickness="1" BorderBrush="Black" >
    <Border.Clip>
        <RectangleGeometry Rect="0,0,200,200"></RectangleGeometry>
    </Border.Clip>
    <TextBlock Text="Foo">
        <TextBlock.RenderTransform>
            <TranslateTransform X="180"></TranslateTransform>
        </TextBlock.RenderTransform>
    </TextBlock>
</Border>

In WPF you don't need to do that manually, just set ClipToBounds="True"