How to keep Tools component open?

[Ilham]

Halo,
I have 2 questions here :

1. How to keep Tools component open, like in TextTool ? because i just use TextTool for my application, it's look so bad when just one tool. (Attached Image is what i want)
2. How to remove focus textbox when I tap TextTool.

Thanks

[Deyan]

Hi Ilham,

Thanks for writing.

I am not quite sure that I correctly understand your requirement. You need to use the TextTool only, right? I suppose your scenario includes loading a picture, applying text to it and saving it?

If you need to use the visual texttool experience, you will need to use RadImageEditor and load the tool there. Otherwise, if you want to programmatically apply text to a picture, you can create an instance of the TextTool class, set the text you want to print on the picture and pass it to the tool just as demonstrated here with some of the other tools:

http://www.telerik.com/help/windows-phone/imageeditor-features-tools.html

I hope this helps.

Regards,
Deyan
Telerik

[Quang]

Hi Deyan,
I want to use TextTool only, but it not work. It appear exception below:

"{System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Windows.Controls.TextTool.RenderText(WriteableBitmap image)
   at Telerik.Windows.Controls.TextTool.ApplyCore(WriteableBitmap actualImage)
   at Telerik.Windows.Controls.ImageEditorTool.<>c__DisplayClass4.<<Apply>b__0>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.AsyncMethodBuilderCore.<ThrowAsync>b__0(Object state)}"

My Sample code:
XAML: <Image Name="img" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
C#:
​async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
TextTool tool = new TextTool();
tool.Text = "Enter Text Here!";
tool.Foreground = new SolidColorBrush(Colors.Red);
tool.FontSize = 50;
tool.TextPosition = new Point(10, 10);

BitmapImage bitmap = new BitmapImage(new Uri("WP_20140401_16_52_02_0_Smart.jpg", UriKind.Relative));
WriteableBitmap textImage = await tool.Apply(bitmap);
img.Source = textImage;
}

Please help!

[Rosy Topchiyska]

Hi Quang,

You have to set the PreviewImage property of the TextTool to a WritableBitmap instance. The size of the WritebleBitmap is used to scale the rendered text. If you wish the text to be rendered with its actual size, you have to use the pixel dimensions of the picture. I have attached a sample project for demonstration. Also, please note that the TextPosition property uses relative units.

I hope this helps.

Regards,
Rosy Topchiyska
Telerik

 

 

[Quang]

Hi Rosy,
Is it possible to display real TextTool with cycle in rectangle corner around text to support gesture base like drag, scale, rotation by the sample code you've provided?
Quang

[Rosy Topchiyska]

Hi QUang,

The TextUIControl is used by the RadImageEditor to add text to an image. You can use this control as a standalone component, but you will have to make some changes to its Template in order to add the image as a background. I have attached a sample project that demonstrates how you can do this. You also have to set the DataContext of the TextUIControl to an instance of the TextTool  class.

Please, take a look at the attached project and let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik

 

 

[Quang]

Rosy, Thanks for your help!