Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

The problem of region clipping occurs when VisualBrush and Rotatetransform are used together

See original GitHub issue

.NET Core Version:.NET 6
Windows version: Windows 11
Does the bug reproduce also in WPF for .NET Framework 4.8?: Yes

Problem description: I want to implement a tiled and rotated watermark effect in wpf But when I use VisualBrush and RotateTransform, the excess area is clipped

Actual behavior: 【VisualBrush without RotateTransform】

【VisualBrush with RotateTransform】

Expected behavior: I found a html demo like this:

or this:

Minimal repro: xaml code


<Grid ClipToBounds="False">
        <Grid.Background>
            <VisualBrush
                Stretch="None"
                TileMode="Tile"
                Viewport="0,0,100,50"
                ViewportUnits="Absolute">
                <VisualBrush.Visual>
                    <TextBox
                        Width="100"
                        Height="50"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        VerticalContentAlignment="Center"
                        Background="Blue"
                        Foreground="White"
                        Text="Hello .NET 6">
                        <TextBox.RenderTransform>
                            <RotateTransform Angle="45" CenterX="50" CenterY="25" />
                        </TextBox.RenderTransform>
                    </TextBox>
                </VisualBrush.Visual>
            </VisualBrush>
        </Grid.Background>
    </Grid>

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

BigHeadDevcommented, Sep 15, 2022

Two problem:

You should use LayoutTransform instead of RenderTransform
Your VisualBrush.Viewport limit the width and height that is the main reasons for clipping

The fixed code:

        <Grid ClipToBounds="False">
            <Grid.Background>
                <VisualBrush
                    Stretch="None"
                    TileMode="Tile"
                    Viewport="0,0,0.2,0.2"
                    ViewportUnits="RelativeToBoundingBox">
                    <VisualBrush.Visual>
                        <TextBox
                            Width="100"
                            Height="50"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            VerticalContentAlignment="Center"
                            Background="Blue"
                            Foreground="White"
                            Text="Hello .NET 6">
                            <TextBox.LayoutTransform>
                                <RotateTransform Angle="15" CenterX="50" CenterY="25" />
                            </TextBox.LayoutTransform>
                        </TextBox>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Grid.Background>
        </Grid>

The demo code: https://github.com/lindexi/lindexi_gd/tree/fa7dfe687c00baaf083c875afa36d0b223a972b8/DakajoheachuNercairrihijal

Thank you for your reply.

I found that your code can only work properly under specific circumstances, but if The Grid’s width and height isn‘t auto,or TextBox’s angle is bigger than 15 will not take effect~ like this:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Width="200">
            <Slider
                x:Name="sliderAngle"
                Maximum="180"
                Minimum="0" />
            <TextBox x:Name="input" Text="Hello .Net 6" />
        </StackPanel>

        <Grid
            Grid.Row="1"
            Width="1000"
            Height="300"
            ClipToBounds="False">
            <Grid.Background>
                <VisualBrush
                    Stretch="None"
                    TileMode="Tile"
                    Viewport="0,0,0.2,0.2"
                    ViewportUnits="RelativeToBoundingBox">
                    <VisualBrush.Visual>
                        <TextBox
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            VerticalContentAlignment="Center"
                            Background="Blue"
                            Foreground="White"
                            Text="{Binding ElementName=input, Path=Text, UpdateSourceTrigger=PropertyChanged}">
                            <TextBox.LayoutTransform>
                                <RotateTransform Angle="{Binding ElementName=sliderAngle, Path=Value}" CenterX="50" CenterY="25" />
                            </TextBox.LayoutTransform>
                        </TextBox>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Grid.Background>
        </Grid>

    </Grid>

actually, in my actual development process, the angle, the Width and Height of the Grid, and the content of the TextBox can change dynamically

Sorry, this may be a complicated requirement, and I hope it can be solved

（by the way 林德熙大佬, I often see your articles, ha ha😁）

1reaction

lindexicommented, Sep 15, 2022

Two problem:

You should use LayoutTransform instead of RenderTransform
Your VisualBrush.Viewport limit the width and height that is the main reasons for clipping

The fixed code:

        <Grid ClipToBounds="False">
            <Grid.Background>
                <VisualBrush
                    Stretch="None"
                    TileMode="Tile"
                    Viewport="0,0,0.2,0.2"
                    ViewportUnits="RelativeToBoundingBox">
                    <VisualBrush.Visual>
                        <TextBox
                            Width="100"
                            Height="50"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            VerticalContentAlignment="Center"
                            Background="Blue"
                            Foreground="White"
                            Text="Hello .NET 6">
                            <TextBox.LayoutTransform>
                                <RotateTransform Angle="15" CenterX="50" CenterY="25" />
                            </TextBox.LayoutTransform>
                        </TextBox>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Grid.Background>
        </Grid>

The demo code: https://github.com/lindexi/lindexi_gd/tree/fa7dfe687c00baaf083c875afa36d0b223a972b8/DakajoheachuNercairrihijal