Share via

Text Wrapping Issue in WPF TextBox When Resizing Based on Zoom Factor

Yaminisri M 0 Reputation points
2025-11-19T10:43:02.2066667+00:00

In a simple WPF application, we use a TextBox and update its width, height, and font size based on the zoom factor. When adjusting the TextBox size for each zoom level, we noticed an issue:

  • At 100% zoom, the last letter wraps to the next line.
  • At 200% zoom, the same text does not wrap.

We have shared a sample code and output screenshot with TextBoxes that use the same width, height, and font size based on zoom.

  <Grid>
      <Canvas Background="LightGray" UseLayoutRounding="False">
          <!-- First  50 -TextBox -->
          <TextBox Text="qwerqwrwqrqwer"
           Width="61.867095947265625" Height="20"
           FontSize="8"
           FontFamily="Arial"
           BorderThickness="0"        
           Canvas.Left="20" Canvas.Top="20"
           HorizontalAlignment="Left"
           VerticalAlignment="Top"
           TextWrapping="Wrap"
           Margin="0" />
          <!-- Second 100- TextBox -->
          <TextBox Text="qwerqwrwqrqwer"
           Width="123.73419189453125" Height="27.833353042602539"
           FontSize="16"
           FontFamily="Arial"
           BorderThickness="0"
           Canvas.Left="200" Canvas.Top="20"
           HorizontalAlignment="Left"
           VerticalAlignment="Top"
           TextWrapping="Wrap"
           Margin="0" />
          <!-- Third 200- TextBox -->
          <TextBox Text="qwerqwrwqrqwer"
           Width="247.4683837890625" Height="55.666706085205078"
           FontSize="32"
           FontFamily="Arial"   
           BorderThickness="0"
           Canvas.Left="20" Canvas.Top="100"
           HorizontalAlignment="Left"
           VerticalAlignment="Top"
           TextWrapping="Wrap"
           Margin="0" />
          <!-- Fourth 400 -TextBox -->
          <TextBox Text="qwerqwrwqrqwer"
           Width="494.936767578125" Height="111.33341217041016"
           FontSize="64"
           FontFamily="Arial"  
           BorderThickness="0"        
           Canvas.Left="200" Canvas.Top="200"
           HorizontalAlignment="Left"
           VerticalAlignment="Top"
           TextWrapping="Wrap"
           Margin="0" />
      </Canvas>
  </Grid>

Output:

User's image

Is there a way to fix this text wrapping issue? This seems to be a general issue caused by the default behavior of the TextBox. Is there any framework-level solution to handle this scenario?

Developer technologies | Windows Presentation Foundation
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Viorel 125.6K Reputation points
    2025-11-19T11:31:40.5466667+00:00

    I think there is a more suitable and simple method. Instead of calculating the sizes, use the same values and try the LayoutTransform:

    <Grid>
    <Canvas Background="LightGray" UseLayoutRounding="False">
        <!-- First  50 -TextBox -->
        <TextBox Text="qwerqwrwqrqwer"
            Width="123.73419189453125" Height="27.833353042602539"
            FontSize="16"
            FontFamily="Arial"
            BorderThickness="0"
            Canvas.Left="20" Canvas.Top="20"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            TextWrapping="Wrap"
            Margin="0" >
            <TextBox.LayoutTransform>
                <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
            </TextBox.LayoutTransform>
        </TextBox>

        <!-- Second 100- TextBox -->
        <TextBox Text="qwerqwrwqrqwer"
            Width="123.73419189453125" Height="27.833353042602539"
            FontSize="16"
            FontFamily="Arial"
            BorderThickness="0"
            Canvas.Left="200" Canvas.Top="20"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            TextWrapping="Wrap"
            Margin="0" />

        <!-- Third 200- TextBox -->
        <TextBox Text="qwerqwrwqrqwer"
            Width="123.73419189453125" Height="27.833353042602539"
            FontSize="16"
            FontFamily="Arial"
            BorderThickness="0"
            Canvas.Left="20" Canvas.Top="100"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            TextWrapping="Wrap"
            Margin="0" >
            <TextBox.LayoutTransform>
                <ScaleTransform ScaleX="2" ScaleY="2"/>
            </TextBox.LayoutTransform>
        </TextBox>

        <!-- Fourth 400 -TextBox -->
        <TextBox Text="qwerqwrwqrqwer"
            Width="123.73419189453125" Height="27.833353042602539"
            FontSize="16"
            FontFamily="Arial"
            BorderThickness="0"
            Canvas.Left="200" Canvas.Top="200"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            TextWrapping="Wrap"
            Margin="0" >
            <TextBox.LayoutTransform>
                <ScaleTransform ScaleX="4" ScaleY="4"/>
            </TextBox.LayoutTransform>
        </TextBox>
    </Canvas>
</Grid>

    See also: RenderTransform.

    0 comments

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.