Home/ Questions/Q 8446669
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:59:15+00:00

I have an application where I am adding various instances to a Canvas dynamically

  • 0

I have an application where I am adding various instances to a Canvas dynamically and the underlying Canvas has a scaling LayoutTransform. This works great for visuals like rectangles, where they correctly maintain a fixed stroke width, but expand in shape width/height as the canvas is ‘zoomed’ with the LayoutTransform. For TextBlock instances, however, the layout transformation is actually scaling the rendering of the text, making the font effectively larger. What I’d like to have happen instead is for the upper left origin of the TextBlock to translate with the layout transformation, with the text remaining the same size.

Here is the XAML for the ItemsControl that creates the Canvas:

            <ItemsControl ItemsSource="{Binding Annotations}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style>
                        <Setter Property="Canvas.Left" Value="{Binding StartX}"/>
                        <Setter Property="Canvas.Top" Value="{Binding StartY}"/>                            
                    </Style>
                </ItemsControl.ItemContainerStyle>
                <ItemsControl.LayoutTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="{Binding ZoomScale}" ScaleY="{Binding ZoomScale}" 
                                        CenterX="0.5" CenterY="0.5"/>
                    </TransformGroup>
                </ItemsControl.LayoutTransform>
            </ItemsControl>

Here are some of the data templates that render the Annotations from the bound collection:

    <DataTemplate DataType="{x:Type Annotations:RectangleAnnotation}">
        <Rectangle Width="{Binding Width}" Height="{Binding Height}" Stroke="Blue" IsHitTestVisible="False"/>
    </DataTemplate>

    <DataTemplate DataType="{x:Type Annotations:TextAnnotation}">
        <TextBlock Text="{Binding Text}" Foreground="Orange" IsHitTestVisible="False"/>
    </DataTemplate>

The Annotation instances themselves are simple INotifyPropertyChanged implementations with the relevant bound properties (StartX, StartY and Text for the TextAnnotation.)

I haven’t been able to find any easy way to prevent the layout scaling of the text. However, before I start hacking my way to a solution, I thought I’d check: does anybody know of a clean way to fix this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Every Transform has an Inverse property which undoes its effect. So, you can bind the TextBlock’s RenderTransform to the Inverse of the Transform which scales the Canvas, that should undo its effect on the text rendering.

    The upper left corner normally is the origin for scaling, so if all is default, the Text should move to the upper left corner as you specified. However, if you’re using combined transforms or a different zoom center on the canvas, you might have to play around with the parameters a bit, but it should be quite easy to e.g. write a converter which only takes the scale factors of a transform in order to create an inverse scale transform without shifting the zoom center.

    • 0