locked
Text Curving in windows8.1 store app

    Question

  • Hello All

    I am working on windows store app project for windows 8.1 in visual studio 2013. I need to apply curve on textblock. Can any one help me for this.
     
    How to apply text curving on textblock in windows 8.1 store app in c# ?

    Thanks
    Friday, May 23, 2014 12:18 PM

Answers

  • There is nothing built in to do this in Xaml, but there might be third party controls that do so.

    If you want to implement it yourself you'll get the best results with interop to Direct2D & DirectWrite for this. In Xaml you could break up the text into separate TextBlock for each letter and then calculate transforms around your curve. 

    --Rob

    Friday, May 23, 2014 3:02 PM
    Owner

All replies

  • There is nothing built in to do this in Xaml, but there might be third party controls that do so.

    If you want to implement it yourself you'll get the best results with interop to Direct2D & DirectWrite for this. In Xaml you could break up the text into separate TextBlock for each letter and then calculate transforms around your curve. 

    --Rob

    Friday, May 23, 2014 3:02 PM
    Owner
  • Hello,

    I found a very simple technique for text curving without using any third party tool.

    Use this functions :

    1) For Calculating angle

    private double degrees2radians(double deg)
            {
                return (Math.PI * deg) / 180;
            }

    2) For curved text

              

      int sliderSpacing=11; 

      int radius = 150;

    public void TextCurving()
            {  

               //Get complete text which is going to curve
                string textToCurve = TextTransform.Text;

                //Loop till text length
                for (var i = 0; i <= textToCurve.Length - 1; i++)
                {               
                    x = (radius) * Math.Cos(degrees2radians(i * sliderSpacing)) + 20;
                    y = (radius) * Math.Sin(degrees2radians(i * sliderSpacing)) + 90;               

                    //Create new textblock
                    TextBlock textBlock = new TextBlock();

                    textBlock.Text = textToCurve[i].ToString();
                    textBlock.FontSize = 40;
                    textBlock.Margin = new Thickness { Left = 400, Right = 0, Top = 235, Bottom = 0 };
                        
                    //Set canvas with x and y coordinates
                    Canvas.SetLeft(textBlock, -x);
                    Canvas.SetTop(textBlock, -y);
                    Canvas.SetZIndex(textBlock, 50);
                   //here curve is the name of canvas on which curved text is shown

                   curve.Children.Add(textBlock);

                }

            } 

    Just call this function either on button click or on slider or on text changed event.

    Thanks.


    Friday, June 13, 2014 10:46 AM