Need to create big custom icons

[Selva M]

Hi Support,
   I'm working on a touch screen app which requires "Image Editor" control with big icons. I tried setting my custom images by setting width & height, but its not working...Can u give me a work around to achieve the desired result.

Thank u
Selva

[Mihail]

Hello Selva,

You need to redefine the style of "RadImageEditorButton" in order to achieve big icons. Here is how you can do that:
 

<sys:String xmlns:sys="clr-namespace:System;assembly=mscorlib" x:Key="ImageThemeKeyString" >Default</sys:String>
<Style
    xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    TargetType="telerik:RadImageEditorButton">
    <Setter Property="ImageThemeKey" Value="{StaticResource ImageThemeKeyString}"/>
    <Setter Property="IsBackgroundVisible" Value="False" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="Height" Value="22" />
    <Setter Property="Margin" Value="0 1" />
    <Setter Property="CornerRadius" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:RadImageEditorButton">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <telerikChromes:ButtonChrome
                    x:Name="ButtonChrome" Grid.ColumnSpan="2"
                    RenderNormal="{TemplateBinding IsBackgroundVisible}"
                    RenderMouseOver="{TemplateBinding IsMouseOver}"
                    RenderPressed="{TemplateBinding IsPressed}"
                    RenderFocused="{TemplateBinding IsFocused}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    RenderEnabled="{TemplateBinding IsEnabled}" />

                    <Image x:Name="Image" Width="16" Height="16"
                            VerticalAlignment="Center" Margin="8 0" HorizontalAlignment="Left"
                            RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased"/>

                    <ContentPresenter x:Name="Content" Grid.Column="1"
                        Margin="{TemplateBinding Padding}"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        RecognizesAccessKey="True"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 You need to change the height of the button at this line: 

<Setter Property="Height" Value="22" />

 and the Height and Width of the image at this line: 

<Image x:Name="Image" Width="16" Height="16"

 I hope this answer your question. If you have further questions do not hesitate to contact us again.


Kind regards,
Mihail
the Telerik team

[Selva M]

Hi Mihail,
 Thanks it works great.

Selva.

[Mihail]

Hi Selva,

I am glad I could help you.

All the best,
Mihail
the Telerik team

[Selva M]

Thanks a lot!!!