This is a migrated thread and some comments may be shown as answers.

Background of Tools

13 Answers 97 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
HDC
Top achievements
Rank 1
HDC asked on 08 Nov 2012, 05:36 PM
Hi,

How do I set the background of the Tools (Crop, Rounded Corners, Hue, Tint, ... ) of the RadImageEditor?
I don't want to set the background of the RadImageEditor, only of the Tools of the RadImageEditor. For instance: I want a semi-transparent blue background on all RadImageEditor tools.

Thank you for your help.

13 Answers, 1 is accepted

Sort by
0
Todor
Telerik team
answered on 12 Nov 2012, 11:13 AM
Hello Peter,

To set a different background of the Tools placeholder, you should edit the RadImageEditor theme. To be able to do that, you should use implicit styles. You can check this article to see how to apply these styles in your application. Please note, that you should use NoXaml binaries and external theme files.

For your convenience, I made a demo project which illustrates the above described approach. You can find it in the attachment.

In addition, I left "NOTE:" comments in the Telerik.Windows.Controls.ImageEditor.xaml file at the places that you should apply your changes to in order to achieve the desired change from your previous post, so please, search for them.

Kind regards,
Todor
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
HDC
Top achievements
Rank 1
answered on 15 Nov 2012, 06:09 PM

Hi Todor,

 

Thanks a lot  for your answer. Unfortunately is not applicable for our use. All of the RadImageEditor commands are launched by buttons on a Ribbon. We don’t use (and can’t use, due to the design of the application) the RadImageEditorUI component in XAML.


I need to be able to set a background (or whatever property) in code-behind. I attached an image to clarify the problem. On the image the “Rounded Corner” component is seen. How do I give that component a semi-transparent green background for instance?

 

Thank you for your help.

0
Accepted
Todor
Telerik team
answered on 16 Nov 2012, 03:16 PM
Hi Peter,

When you are not using RadImageEditorUI and you wish to set different InlineToolSettingsPane properties, you should give it a x:Name, by which you will access it in your code-behind. That means that you will have a line like this in your XAML:

<toolsUI:InlineToolSettingsPane x:Name="ToolSettingsPane" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" />

where the toolsUI is a prefix for the following namespace:

xmlns:toolsUI="clr-namespace:Telerik.Windows.Media.Imaging.Tools.UI;assembly=Telerik.Windows.Controls.ImageEditor"

Judging by your screenshot in your previous post, I can assume that you already did the above described things.

You can change some of the InlineToolSettingsPane properties by adding something like these lines of code in your code-behind:
this.ToolSettingsPane.Background = new SolidColorBrush(Color.FromArgb(128,0,255,0));
this.ToolSettingsPane.FontSize = 15;
this.ToolSettingsPane.Width = 300;
this.ToolSettingsPane.BorderBrush = new SolidColorBrush(Color.FromArgb(255,0,0,0));
this.ToolSettingsPane.BorderThickness = new Thickness(1);
this.ToolSettingsPane.Opacity = 0.75;

For your convenience, I made a sample demo project again, so you can check the attachment.

If this approach doesn't work for your scenario or I am missing something, it will be very useful if you create a sample project and send it back to us, saying what exactly should be changed.

Looking forward to your response.

 
Greetings,
Todor
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
saw
Top achievements
Rank 1
answered on 28 Jul 2014, 11:47 AM
Hi,
I want to override RadImageEditorUI default buttons ( Remove two Rotate buttons) and give more spacing to image previewer. How should i achieve this ?
<telerik:RadImageEditorUI x:Name="imageEditor" Grid.Column="3" Margin="10,10,10,298" ImageEditorLoaded="imageEditor_ImageEditorLoaded"> </telerik:RadImageEditorUI>

Need to Remove two Rotate buttons and give more spacing reducing gray (Border ?) area.
0
Todor
Telerik team
answered on 30 Jul 2014, 06:34 AM
Hi Saw,

In order to edit the default look of the RadImageEditorUI and to apply the described changes, you should override its control template. If you are using implicit styles you can edit directly the RadImageEditorUIStyle, which is placed in the Telerik.Windows.Controls.ImageEditor.xaml resource dictionary.

You can read more about editing templates here

Hope this helps.
If you have further questions, please do not hesitate to contact us again.

Regards,
Todor
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
fff
Top achievements
Rank 1
answered on 14 Mar 2017, 06:28 PM

Hi Todor,

(My question is for WPF, but I wanted to use your work above)

I did what you said above & more specificaly : http://docs.telerik.com/devtools/wpf/styling-and-appearance/styling-apperance-editing-control-templates   & the method "right click" Inside VS

I can modified color or whaterver with that, but I get into another problem: as soon as I create the control Template copy, I still see the top icons (open/save/undo/redo), but all the Tools on the left disapear=icons+texts-->all are gone (not a question of color over the backround) ... looks like some binding or link disappears

Note: I do not use any theme & not sure what you mean by "implicit theme" when not using that

-->What am I doing wrong ?

Thanks in advance,

F

0
Evgenia
Telerik team
answered on 17 Mar 2017, 02:09 PM
Hi Heli,

From what you described I got the idea that you want to use the Visual Studio designer to extract the default control template and edit it. Please mind that the approach is one and the same for Silverlight and WPF only the Control Template extracted will be different.
I'm unsure what do you mean by saying that you still see the top icons (open/save/undo and etc.) Can you be more specific on what do you want to change by extracting the default control template? Also do you extract the template of the whole RadImageEditorUI or on some particular element that is part of its UI?

Any additional information (even snapshot of what are you trying to achieve) that you might provide will help us understand you better and further assist you.

P.S. I see that you are new to our theming mechanisms so I highly recommend this help topic and this blogpost that should help you understand the main differences between the StyleManager and Implicit Styles. 

Regards,
Evgenia
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
fff
Top achievements
Rank 1
answered on 20 Mar 2017, 06:35 PM

Hi Evgenia,

Please attached what I'd like to achieve & what I get as soon as I right-click on the RadImageEditorUI + ModifyModel --> Modify Copy

(don't mind the colors, these are not the one I want -no problem- ; pict is from Telerik Website)

In summary:

  • I want to change the left column background color (I can see several backgrounds but not this one !?)
  • I want to change the left column font color
  • I have most of the left column disappearing
  • I am not using themes (too heavy for just the few I change)

any help ?

Thanks,

Fabrice

 

 

 

Thanks,

Fabrice

0
Evgenia
Telerik team
answered on 23 Mar 2017, 04:01 PM
Hello Fabrice,

I tried to extract the default style of a RadImageEditorUI control with Windows8 theme applied in Blend for Visual Studio 2015. I should unfortunately say that I had some struggles extracting the default template that we will further research.
There's something I don't really understand from your last post -- you are saying that you are using no themes but the image shows ImageEditorUI in Windows8 theme? Also from what I see you are having a RichTextBox control and you want to modify the ImageEditorUi that we support with it?

Luckily the modifications you mentioned does not require changing the whole control template of the cotnrol. I'll provide guidance on how you might apply the changes you'd like to below:
1. The Background of the column comes from the Background property of the whole control being preset to White (MainBrush in Windows8 theme).
2. All those elements which Foreground you'd like to change are RadImageEditorButton-s so it will be enough to preset its Foreground property in a global style and you'll achieve your requirement.

P.S. For the time being and for any more detailed customizations you'd demand will it be possible for you to extract  and modify the default control template from our themes as explained in our documentation

Regards,
Evgenia
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
fff
Top achievements
Rank 1
answered on 23 Mar 2017, 07:46 PM

as said: I use NO theme

as said: don't assume the rest on the picture, it's from Telerik website

as said: I want to change text color of left column that has almost no contrast with my column background; to do that, as soon as I right click for a custom style of that single component, all this column disapears, except top icons

--> any help on that, that is not related to themes ?

Thanks,

F

0
Evgenia
Telerik team
answered on 28 Mar 2017, 11:44 AM
Hello Fabrice,

As I already mentioned previously there's indeed some problem with extracting the default template of the whole RadImageEditorUI. By the time we figure out the exact reasons I still insist that you follow my previous suggestions as with them you don't need to modify the default style or template of the control at all. Let me know how they work for you as soon as you try them.
Since you mentioned that you are able to extract the default control template of a single element  that is part of the RadImageEditorUI control but it dissapears from designer right after that,  may I ask that you send us a small sample project and more detailed steps on how to replicate it locally. I'll get back to you with more information and advices as soon as we are able to reproduce this on our side.

Onto your statement that you are using NO theme -- It is impossible that there's no theme applied in your case and I'll explain why here. If you haven't explicitly specified one of our themes to be applied there's still theme being applied if you are using XAML binaries in your application (from Binaries folder under your Telerik controls local installation path) and this is the one we have preset in such cases - OfficeBlack. I believe this is your case as with Binaries.NoXAML binaries you won't be able to see practically nothing neither in design-time or runtime if you haven't merged the correct/needed theme style files to be merged to your application global resources. The latter is explained with more details in our documentation.

Regards,
Evgenia
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
fff
Top achievements
Rank 1
answered on 29 Mar 2017, 08:51 AM
can not attach anything but images on this forum ; will post a ticket
0
Evgenia
Telerik team
answered on 30 Mar 2017, 08:43 AM
Hi Fabrice,

This is to inform you that I already answered you in the support thread you opened for the same topic. I'd suggest that we continue any further conversation on it there to avoid duplicate threads.
I'll copy-paste my answer from the support thread here for anyone else that might come upon this forum post:
Indeed you were missing something crucial in the extracted RadImageEditorUI style which I added back for your buttons to be visible in the left control panel. You were missing the ItemsSource="{TemplateBinding ImageToolsSections}" in the ItemsControl inside the Control Template and that's the reason for the missing Expander-s and Buttons on your side. I believe this happened after you extracted the control template with Blend or Visual Studio and as I previously mentioned we'll further check internally what's the possible reason for this.

Regards,
Evgenia
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ImageEditor
Asked by
HDC
Top achievements
Rank 1
Answers by
Todor
Telerik team
HDC
Top achievements
Rank 1
saw
Top achievements
Rank 1
fff
Top achievements
Rank 1
Evgenia
Telerik team
Share this question
or