How to write text on image in windows phone 8?

Question

I have a image and i want write text on it. After write text on image , i want move text to everywhere on screen where i like. I tried write text on image but i just can write on screen and i can't move it. Can you help me. Thank All :)) And this is my code :

WriteableBitmap wb;
wb = new WriteableBitmap((BitmapSource)ImgZoom.Source);
TextBlock tb = new TextBlock();
tb.Text = Txt.Text;
tb.TextWrapping = TextWrapping.Wrap;
tb.Foreground = new SolidColorBrush(Colors.Black);
tb.FontSize = 70;
tb.FontWeight = FontWeights.Bold;
wb.Render(tb, new TranslateTransform() { X = 25, Y = 191 });
wb.Invalidate();

Answer 1

You have one image and you want to write text on it and then move text to everywhere. Then hope so this code will help you.

Xaml : 

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Image Source="/Images/3.png" />
    </Grid>


C# : 
    private TranslateTransform move = new TranslateTransform();
    private TransformGroup rectangleTransforms = new TransformGroup();

    public TestPage()
    {
        InitializeComponent();

        TextBlock tb = new TextBlock();
        tb.Text = "Hello..!";
        tb.TextWrapping = TextWrapping.Wrap;
        tb.Foreground = new SolidColorBrush(Colors.Black);
        tb.FontSize = 70;
        tb.FontWeight = FontWeights.Bold;
        ContentPanel.Children.Add(tb);

        rectangleTransforms.Children.Add(move);

        tb.RenderTransform = rectangleTransforms;

        tb.ManipulationStarted +=
            new EventHandler<ManipulationStartedEventArgs>(Rectangle_ManipulationStarted);
        tb.ManipulationDelta +=
            new EventHandler<ManipulationDeltaEventArgs>(Rectangle_ManipulationDelta);
        tb.ManipulationCompleted +=
            new EventHandler<ManipulationCompletedEventArgs>(Rectangle_ManipulationCompleted);
    }
    void Rectangle_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
    {
       //your code
    }
    void Rectangle_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        // Move the Textbox.
        move.X += e.DeltaManipulation.Translation.X;
        move.Y += e.DeltaManipulation.Translation.Y;


    }
    void Rectangle_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
    {
        //your code
    }

For more about this code please refer this link manipulation events for Windows Phone 8

Answer 2

XAML :

<Grid x:Name="LayoutRoot" Background="#FF69CFC5">
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Image Stretch="Fill" x:Name="image1" Width="300" Height="300" Source="/Assets/fan.jpg" Margin="10,0,-10,176"/>
            <Button Click="Button_Click" Content="Button" HorizontalAlignment="Left" Margin="178,538,0,0" VerticalAlignment="Top"/>           
        </Grid>
    </Grid>

C#:

  int trX = 0;
        int trY = 0;
        TextBlock croppingRectangle;

    public MainPage()
        {
            InitializeComponent();
            //init();      
    }
    public void init()
    {
        TextBlock rect = new TextBlock();
        rect.Text = "Hello......Hello......";

        rect.Height = 94;  //fixed 
        rect.MaxHeight = image1.Height;
        rect.MaxWidth = image1.Width;
        rect.Width = 300; //fixed
        rect.TextWrapping = TextWrapping.Wrap;
        rect.Foreground = new SolidColorBrush(Colors.Black);
        rect.FontSize = 70;
        rect.FontWeight = FontWeights.Bold;
        rect.Margin = image1.Margin;
        rect.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(rect_ManipulationDelta);

        LayoutRoot.Children.Add(rect);
        LayoutRoot.Height = image1.Height;
        LayoutRoot.Width = image1.Width;
    }
    private void rect_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        GeneralTransform gt = ((TextBlock)sender).TransformToVisual(LayoutRoot);
        Point p = gt.Transform(new Point(0, 0));
        int intermediateValueY = (int)((LayoutRoot.Height - ((TextBlock)sender).Height));
        int intermediateValueX = (int)((LayoutRoot.Width - ((TextBlock)sender).Width));
        croppingRectangle = (TextBlock)sender;
        TranslateTransform tr = new TranslateTransform();
        trX += (int)e.DeltaManipulation.Translation.X;
        trY += (int)e.DeltaManipulation.Translation.Y;
        if (trY < (-intermediateValueY / 2))
        {
            trY = (-intermediateValueY / 2);
        }
        else if (trY > (intermediateValueY / 2))
        {
            trY = (intermediateValueY / 2);
        }

        if (trX < (-intermediateValueX / 2))
        {
            trX = (-intermediateValueX / 2);
        }
        else if (trX > (intermediateValueX / 2))
        {
            trX = (intermediateValueX / 2);
        }

        tr.X = trX;
        tr.Y = trY;

        croppingRectangle.RenderTransform = tr;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        init();
    }
    }

Answer 3

Hi try also this to move only in image boundary

C# : 
    int trX = 0;
    int trY = 0;
    TextBlock croppingRectangle;

    public TestPage()
    {
        InitializeComponent();

        init();
    }
    public void init()
    {


        TextBlock rect = new TextBlock();
        rect.Text = "Hello......Hello......";

        rect.Height = 94;  //fixed 
        rect.MaxHeight = image1.Height;
        rect.MaxWidth = image1.Width;
        rect.Width = 300; //fixed
        rect.TextWrapping = TextWrapping.Wrap;
        rect.Foreground = new SolidColorBrush(Colors.Black);
        rect.FontSize = 70;
        rect.FontWeight = FontWeights.Bold;
        rect.Margin = image1.Margin;
        rect.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(rect_ManipulationDelta);

        LayoutRoot.Children.Add(rect);
        LayoutRoot.Height = image1.Height;
        LayoutRoot.Width = image1.Width;
    }
    private void rect_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        GeneralTransform gt = ((TextBlock)sender).TransformToVisual(LayoutRoot);
        Point p = gt.Transform(new Point(0, 0));
        int intermediateValueY = (int)((LayoutRoot.Height - ((TextBlock)sender).Height));
        int intermediateValueX = (int)((LayoutRoot.Width - ((TextBlock)sender).Width));
        croppingRectangle = (TextBlock)sender;
        TranslateTransform tr = new TranslateTransform();
        trX += (int)e.DeltaManipulation.Translation.X;
        trY += (int)e.DeltaManipulation.Translation.Y;
        if (trY < (-intermediateValueY / 2))
        {
            trY = (-intermediateValueY / 2);
        }
        else if (trY > (intermediateValueY / 2))
        {
            trY = (intermediateValueY / 2);
        }

        if (trX < (-intermediateValueX / 2))
        {
            trX = (-intermediateValueX / 2);
        }
        else if (trX > (intermediateValueX / 2))
        {
            trX = (intermediateValueX / 2);
        }

        tr.X = trX;
        tr.Y = trY;

        croppingRectangle.RenderTransform = tr;
    }

XAML :

<Grid x:Name="LayoutRoot" >
    <Image Width="300" Height="300" x:Name="image1" Source="/Images/3.png" Stretch="Fill"/>

</Grid>