RadImageEditorUI - Tools Resize and CanvasResize

[Arquitectura EIT]

Hi,

     I'm using the RadImageEditorUI control and when i click on the resize tool (or CanvasResizeTool) appears settings panel and indicates the size that the image will have. I do not know where that value comes from, but it does not fit the actual size of the image when I save it to a local file. I Use the same format / parameter to load the image and to save it to disk (tiff extension). I can think of two solutions: correct the value, or hide it (along with his label). And I tried to do the second option since it seems simpler, but I have not found the form. Could you help me?

 

Thank you

 

                <telerik:RadImageEditorUI.ImageToolsSections>

                    <telerik:ImageToolsSection telerik:LocalizationManager.ResourceKey="ImageEditor_Transform">
                        <telerik:ImageToolItem ImageKey="Resize" telerik:LocalizationManager.ResourceKey="ImageEditor_Resize"
                                    Command="commands:ImageEditorRoutedCommands.ExecuteTool">
                            <telerik:ImageToolItem.CommandParameter>
                                <tools:ResizeTool x:Name="resizeTool"/>
                            </telerik:ImageToolItem.CommandParameter>
                        </telerik:ImageToolItem>

                        <telerik:ImageToolItem ImageKey="Resize" telerik:LocalizationManager.ResourceKey="ImageEditor_CanvasResize" 
                                            Command="commands:ImageEditorRoutedCommands.ExecuteTool">
                            <telerik:ImageToolItem.CommandParameter>
                                <tools:CanvasResizeTool />
                            </telerik:ImageToolItem.CommandParameter>
                        </telerik:ImageToolItem>

                    </telerik:ImageToolsSection>
                </telerik:RadImageEditorUI.ImageToolsSections>

            </telerik:RadImageEditorUI>

[Arquitectura EIT]

I mean thi

[Martin Ivanov]

Hello,

In order to hide the information about the byte size of the image you can extract the ControlTemplate of the ResizeToolSettings control and hide the TextBlock with x:Name set to "LabelImageSize" and the previous TextBlock also. To apply the custom style with customized template you can create a new resize tool that inherits the ResizeTool class. Then override its GetSettingUI() method. Here is an example in code:

public class CustomResizeTool : ResizeTool
{
    public Style SettingsUIStyle { get; set; }
    public override UIElement GetSettingsUI()
    {
        var ui = (ResizeToolSettings)base.GetSettingsUI();
        ui.Style = SettingsUIStyle;
        return ui;
    }
}

<local:CustomResizeTool>
    <local:CustomResizeTool.SettingsUIStyle>
        <Style TargetType="telerik:ResizeToolSettings">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:ResizeToolSettings">
                        <!-- The modified template here -->
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </local:CustomResizeTool.SettingsUIStyle>
</local:CustomResizeTool>

I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

[Arquitectura EIT]

Hi,

     As I have put the multi-language resource file (RadImageEditorResources.resx) I have left the "ImageEditor_ImageSize" resource with empty value and I no longer see the text. I have to hide the value.

     I have implemented what you said, but I think something escapes me. I do not succeed
     I have created the archives: CustomResizeTool.xaml and CustomResizeTool.xaml.cs.

<ui:CustomResizeTool xmlns:ui="clr-namespace:EIT.OSP.UI.CustomStyle"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

    <ui:CustomResizeTool.SettingsUIStyle>
        <Style TargetType="telerik:ResizeToolSettings">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:ResizeToolSettings">
                        <!-- The modified template here -->
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ui:CustomResizeTool.SettingsUIStyle>

</ui:CustomResizeTool>

 

namespace EIT.OSP.UI.CustomStyle
{
    using System.Windows;
    using Telerik.Windows.Media.Imaging.Tools;
    using Telerik.Windows.Media.Imaging.Tools.UI;

    public class CustomResizeTool : ResizeTool
    {
        public Style SettingsUIStyle { get; set; }

        public override UIElement GetSettingsUI()
        {
            var ui = (ResizeToolSettings)base.GetSettingsUI();
            ui.Style = SettingsUIStyle;
            return ui;
        }
    }
}

 

            And in the xaml with the control:

<UserControl.Resources>
    <ResourceDictionary>
        <customStyle:CustomResizeTool x:Key="CustomResizeTool" />
    </ResourceDictionary>
</UserControl.Resources>

 

<telerik:RadImageEditorUI Grid.Row="3"
                            x:Name="ImageEditorUI"
                            FontSize="13"
                            FontWeight="Heavy"
                            telerik:Analytics.Name="uiEditor"
                            IsOpenButtonVisible="False"
                            Visibility="{Binding RadImageEditorUiVisibility}"
                            SaveCommand="{Binding SaveImageEditorCommand}">

    <telerik:RadImageEditorUI.ImageToolsSections>
        <telerik:ImageToolsSection telerik:LocalizationManager.ResourceKey="ImageEditor_Transform">

            <telerik:ImageToolItem ImageKey="Resize" telerik:LocalizationManager.ResourceKey="ImageEditor_Resize"
                        Command="commands:ImageEditorRoutedCommands.ExecuteTool"
                        CommandParameter="{StaticResource CustomResizeTool}">
            </telerik:ImageToolItem>
        </telerik:ImageToolsSection>
    </telerik:RadImageEditorUI.ImageToolsSections>

</telerik:RadImageEditorUI>

 

     Now if for example I set ui.FontSize = 20, in the CustomResizeTool.xaml.cs  file, I see the biggest letters. But if I paint a <Label Content = "HELLO"> </ Label> inside the <ControlTemplate TargetType = "telerik: ResizeToolSettings"> (CustomResizeTool.xaml file) I do not see the 'Hello'. It would be simply to remove the size value (225 KB in the example of the image).

 

Thanks you so much

 

[Martin Ivanov]

Hello,

I attached a small example showing the customization suggested in my last reply. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik

[Arquitectura EIT]

Very thanks. It´s works.

Could you attach an example (the xaml style) for the CanvasResizeTool? Simply with the style fragment is enough. Like the style of resizeTool.

<Style x:Key = "CustomResizeToolSettingsStyle" TargetType="telerik:ResizeToolSettings">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:ResizeToolSettings">
                      <!--The original ControlTemplate-->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

The reason is that the CanvasResizeTool also shows the size.

Very thanks

[Arquitectura EIT]

I'm sorry, I forgot to attach a picture of the UI

[Martin Ivanov]

Hi,

You can use the same approach and only replace TargetType of the Style and the ControlTemplate to CanvasResizeToolSettings. For example:

<Style x:Key = "CustomResizeToolSettingsStyle" TargetType="telerik:CanvasResizeToolSettings">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:CanvasResizeToolSettings">
                      <!--The original ControlTemplate-->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Regards,
Martin Ivanov
Progress Telerik

[Arquitectura EIT]

Hello,

     Yes, that part I know; thanks.

       I mean that in this tool (canvasresize) the size is also shown, as I added in the previous post. And I would like to remove that part, just as it was done for the resize tool; but this time for this tool (canvasresize). Then it would be enough with that, just as I provided the style of the canvas resize tool; ¿Could you provide the style of canvasresize tool (what goes inside ControlTemplate)?

 

Thank you

[Martin Ivanov]

Hello,

You can find the styles for all Telerik controls in the "Themes.Implicit" folder located in the UI for WPF installation directory. You can read more about this in the Editing Control Templates article. The default CanvasResizeToolSettingsStyle is defined in the "Telerik.Windows.Controls.ImageEditor.xaml" file. There you can find also the styles for the other tool settings. I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

[Arquitectura EIT]

ah, ok. I did not know that directory.

Thank you very much for all the help!
It has been a pleasure :)