locked
Text Cropping while rotate the Content Control in Border

    Question

  • Hi All,

    Currently i am developing the WinRT app. In one case i have used the Text(Content control) inside the Border and rotate the text to 90 degree by using Render transform. But text ends up being cropped  while rotating as like below image. Could you please help me why label is cropped while rotating and how i will be display the full text without increasing the border width?

     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Border Height="500" Width="50"  HorizontalAlignment="Center" VerticalAlignment="Center" Background="Gray">
                <ContentControl  RenderTransformOrigin=".5,.5" Content="My WinRT Application" HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <ContentControl.RenderTransform>
                        <RotateTransform Angle="90"/>
                    </ContentControl.RenderTransform>
                </ContentControl>
            </Border>
           
        </Grid>

    Thanks,

    M. Sheik

    Thursday, June 5, 2014 12:10 PM

Answers

All replies

  • Because of the width assigned to the parent Border. Split out the Border and Content control separately like this: 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                <Border Height="500" Width="50"  HorizontalAlignment="Center" VerticalAlignment="Center" Background="Gray">
                    
                </Border>
                <ContentControl  RenderTransformOrigin=".5,.5" Content="My WinRT Application" HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <ContentControl.RenderTransform>
                        <RotateTransform Angle="90"/>
                    </ContentControl.RenderTransform>
                </ContentControl>
            </Grid>

    - Ram
    If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

    Thursday, June 5, 2014 1:04 PM
  • Hi Ramprasath,

    Thanks for your quick response. I have showed the above code just for example. Actually in my app i have draw the border and added my content control(text) to child of border. Then i have positioned that border in Canvas. Also i have changed the text angle dynamically. In your answer, if i set 0 degree then text going outside of border. my requirement is text will not display out side of border, it only displayed within border. Could you please help how can i achieve this? I have checked the LayoutTransform in wpf, and that output exactly suited my requirement. But LayoutTransform does not available in WinRT. So please help any possibility?

    Regards,

    M. Sheik

    Friday, June 6, 2014 12:32 PM
  • If you are looking for Layout Transform, then check this out: Layout transform in Windows 8 WinRT XAML

    - Ram
    If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

    Friday, June 6, 2014 1:03 PM