Home/ Questions/Q 8458571
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T13:06:58+00:00

I’m trying to draw a rectangle that is rotated 45° behind the text of

  • 0

I’m trying to draw a rectangle that is rotated 45° behind the text of a grid and the grid is inside a TreeViewItem. So far nothing has worked to get it right…
I have been trying to use the background of the grid as well but no results there.
Here is the code that has got me so far:

<Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TreeViewItem">
                <Grid Margin="0,5,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Rectangle Name="rect" Stretch="Uniform" Fill="{StaticResource ItemAreaBrush}" 
                                   Stroke="{StaticResource ItemBorderBrush}" StrokeThickness="1">
                        <Rectangle.RenderTransform>
                            <RotateTransform CenterX=".5" CenterY=".5" Angle="45" />
                        </Rectangle.RenderTransform>
                    </Rectangle>
                    <ContentPresenter ContentSource="Header" Grid.Row="0" />
                    <ItemsPresenter Grid.Row="1" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <!--<Setter TargetName="Bd" Property="Panel.Background" Value="{StaticResource SelectedItemAreaBrush}" />-->
                        <Setter TargetName="rect" Property="Rectangle.Stroke" Value="{StaticResource SelectedItemBorderBrush}" />
                        <Setter TargetName="rect" Property="Rectangle.StrokeThickness" Value="2" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

Anybody can help me on the way with this problem?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Did you mean this:

    <ControlTemplate TargetType="TreeViewItem">
    <Grid Margin="0,5,0,0" Background="Orange">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Rectangle Name="rect"
                    Stretch="Uniform" Fill="Cyan" Stroke="Red" StrokeThickness="1"
                    Grid.Row="0">
            <Rectangle.LayoutTransform>
                <RotateTransform CenterX=".5" CenterY=".5" Angle="45" />
            </Rectangle.LayoutTransform>
        </Rectangle>

        <ContentPresenter ContentSource="Header" Grid.Row="0" />

        <ItemsPresenter Grid.Row="1" />
    </Grid>

    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="true">
            <Setter TargetName="rect" Property="Rectangle.Stroke" Value="{StaticResource SelectedItemBorderBrush}" />
            <Setter TargetName="rect" Property="Rectangle.StrokeThickness" Value="2" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

    item template screenshot

    Note that I changed the RenderTransform to LayoutTransform – the former caused the rectangle to be layed out ‘horizontally’ and turned around only after everything else was placed, so it was “overflowing” at the bottom. LayoutTransform is a bit slower to process by CPU/GPU, but it actually takes care of the new-size-after-transforms. Also, note that with LayoutTransform now the Rectangle is prone to centering/margins/etc

    • 0