Background of Tools

6 posts, 1 answers
  1. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 08 Nov 2012 Link to this post

    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.
  2. Todor
    Admin
    Todor avatar
    168 posts

    Posted 12 Nov 2012 Link to this post

    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.

  3. DevCraft banner
  4. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 15 Nov 2012 Link to this post

    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.

  5. Answer
    Todor
    Admin
    Todor avatar
    168 posts

    Posted 16 Nov 2012 Link to this post

    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.

  6. saw
    saw avatar
    29 posts
    Member since:
    Jun 2014

    Posted 28 Jul 2014 Link to this post

    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.
  7. Todor
    Admin
    Todor avatar
    168 posts

    Posted 30 Jul 2014 Link to this post

    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.
     
Back to Top
DevCraft banner