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

RadMaskedTextInput, change the clear button image

2 Answers 158 Views
MaskedInput (Numeric, DateTime, Text, Currency)
This is a migrated thread and some comments may be shown as answers.
Val
Top achievements
Rank 1
Val asked on 31 Jan 2013, 10:25 AM
Hello,

I have two RadMaskedTextInput, I want to change the clear button image by another that I've customize. I can't find a solution, is this possible ? If it is, may you please share the code with me ?

Thanks in advance,
Val

2 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 04 Feb 2013, 07:21 AM
Hi Val,

 You can use the ClearButtonStyle public property of the MaskedInput controls. Its TargetType is RadButton:

<Style x:Key="ClearButtonStyle" TargetType="telerik:RadButton">
       <Setter Property="Template" Value="{StaticResource ClearButtonTemplate}" />
       <Setter Property="Width" Value="19" />
       <Setter Property="Height" Value="19" />
       <Setter Property="HorizontalAlignment" Value="Right" />
       <Setter Property="VerticalAlignment" Value="Center" />
       <Setter Property="Foreground" Value="White" />
       <Setter Property="Margin" Value="0,0,3,0" />
       <Setter Property="Cursor" Value="Hand" />
   </Style>
Basically, in the ClearButtonTemplate you have Borders and a Path:
<Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF8F2121" Offset="1" />
            <GradientStop Color="#FFEB4545" />
        </LinearGradientBrush>
    </Border.Background>
    <Path x:Name="Path" Stretch="Fill" Stroke="White" Margin="4" RenderTransformOrigin="0.5,0.5"
            Data="M5,0.5 L6,0.5 6,5 10.5,5 10.5,6 6,6 6,10.5 5,10.5 5,6 0.5,6 0.5,5 5,5 z">
        <Path.RenderTransform>
            <RotateTransform Angle="-45" />
        </Path.RenderTransform>
    </Path>
Changing the Path will change the form of the Clear Button.

Regards,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Val
Top achievements
Rank 1
answered on 04 Feb 2013, 09:47 AM
Hi Petar,

Thanks for your answer !

I proceed like that and that works fine :

<telerik:RadMaskedTextInput.ClearButtonStyle>
     <Style TargetType="telerik:RadButton">
          <Setter Property="Width" Value="19" />
          <Setter Property="Height" Value="19" />
          <Setter Property="HorizontalAlignment" Value="Right" />
          <Setter Property="VerticalAlignment" Value="Center" />
          <Setter Property="Foreground" Value="Purple" />
          <Setter Property="Margin" Value="0,0,3,0" />-->
          <Setter Property="Cursor" Value="Hand" />
          <Setter Property="Template">
               <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadButton">
                         <Image Source="path-to-image"></Image>
                    </ControlTemplate>
               </Setter.Value>
          </Setter>
     </Style>
</telerik:RadMaskedTextInput.ClearButtonStyle>

Thank you again,
Val
Tags
MaskedInput (Numeric, DateTime, Text, Currency)
Asked by
Val
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Val
Top achievements
Rank 1
Share this question
or