CODEWITHSUNDEEP
wpfxamlgridlabelstackpanel
Vladimir Kruglov
Vladimir Kruglov

Reputation: 298

Rotate the text inside a small grid/panel

<Label Grid.Row="1"
       Height="70"
       Margin="2"
       Width="300"
       Content="{l:Translate Key={x:Static l:MultistringTags.SHOW_MENU}}"
       DockPanel.Dock="Bottom"
       FontSize="20"
       FontWeight="Bold"
       Foreground="White">
       <Label.RenderTransform>
           <RotateTransform Angle="270" />
       </Label.RenderTransform>
</Label>

Here I want to rotate the text, which is inside a grid and a grid column width equals with text height. In this case I see only part of text like if text was drawn without rotating cutted of by grid width, and rotated to required angle. I have tried panels, they give me same result.

Does anybody know some workaround to make it show all the text and I don't want to use image because text should be translatable.

Upvotes: 1

Views: 1514

Answers (2)

Sheridan
Sheridan

Reputation: 69989

Further to @nekizalb's answer stating that you should use a LayoutTransform, the reason that you would need to do that instead of using a RenderTransform is because of the timing at which each occurs... a LayoutTransform will affect results of layout.

From the UIElement.RenderTransform Property page on MSDN:

A render transform does not regenerate layout size or render size information. Render transforms are typically intended for animating or applying a temporary effect to an element. For example, the element might zoom when focused or moused over, or might jitter on load to draw the eye to that part of the user interface (UI).

From the FrameworkElement.LayoutTransform Property page on MSDN:

In contrast to RenderTransform, LayoutTransform will affect results of layout.

Example scenarios where LayoutTransform would be useful include: rotating elements such as menu components from horizontal to vertical or vice versa, scaling elements (zooming in) on focus, providing editing behavior, etc.

Upvotes: 1

Tyler Lee
Tyler Lee

Reputation: 2785

I believe if you change it to set the LayoutTransform instead of RenderTransform, it will prevent the text from being cut off. 

        <Label.LayoutTransform>
            <RotateTransform Angle="270" />
        </Label.LayoutTransform>

Upvotes: 5

Related Questions