Home/ Questions/Q 7560627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T12:57:08+00:00

I have a TextBlock that I want to display vertically in a user control

  • 0

I have a TextBlock that I want to display vertically in a user control that is 30px wide. The TextBlock control has been rotated 90° using a RenderTransform.

The rotation seems to occur fine when I combine it with a 30px translation but the actual content of the TextBlock is truncated at what appears to be 30px.

It seems like the Text is being rendered at the 30px width of the parent and then transformed.

<UserControl x:Class="Xyz.Controls.FooControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="300" d:DesignWidth="30">

    <Grid x:Name="LayoutRoot">
        <Grid Name="barGrid" Background="#BFFFFFFF">
            <Ellipse Width="30" Height="30" Fill="Red" HorizontalAlignment="Center" VerticalAlignment="Top" />
            <TextBlock Name="barText" Text="88.8°" 
                       Width="50" 
                       Height="30" 
                       Foreground="#FF3535C4">
                <TextBlock.RenderTransform> 
                    <CompositeTransform Rotation="90" TranslateX="30"/> 
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>

    </Grid>
</UserControl>

In this screenshot from Visual Studio the expected text is only showing 29px.
Xaml TextBlock content truncated at parent width

The same issue appears in Expression Blend and the Emulator.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve figured out one way to get the intended layout but it seems like a bit of a hack.

    By setting a negative left margin on the TextBlock (-20px) equal to the difference of the TextBox width (50px) and the parents width (30px) the full text is displayed vertically.

    E.g.

    <TextBlock Name="barText" Text="88.8°" 
                   Width="50" 
                   Height="30" 
                   Foreground="#FF3535C4"
                   Margin="0,0,-20,0">
            <TextBlock.RenderTransform> 
                <CompositeTransform Rotation="90" TranslateX="30"/> 
            </TextBlock.RenderTransform>
        </TextBlock>
    • 0