RadMaskedTextInput, change the clear button image

3 posts, 0 answers
  1. Val
    Val avatar
    5 posts
    Member since:
    Feb 2012

    Posted 31 Jan 2013 Link to this post

    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. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 04 Feb 2013 Link to this post

    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.

  3. DevCraft banner
  4. Val
    Val avatar
    5 posts
    Member since:
    Feb 2012

    Posted 04 Feb 2013 Link to this post

    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
Back to Top