Customizations in C1NumericBox for Silverlight

The C1NumericBox control is a numeric editor, provided with ComponentOne Studio for Silverlight suite, that allows you to display and edit numeric values in many formats. At times, we need to make a few modifications to the control to suit our needs. And I've provided a couple of such implementations here.

Set IsTabStop property

Though the control has its own 'IsTabStop' property which may be set to false, the textbox element inside it is still able to receive focus. To get the property truly working, we need to set the same property to false for the textbox as well. And it is easy to implement.

• Inherit the control
• Override its 'OnApplyTemplate' method.
• Fetch the textbox element and set its 'IstabStop' property to 'false'.

public class CustomNumericBox : C1.Silverlight.C1NumericBox  
{  
 public override void OnApplyTemplate()  
 {  
  base.OnApplyTemplate();  
  var tb = this.GetTemplateChild("Text") as C1.Silverlight.C1TextBoxBase;  
  tb.IsTabStop = false;  
 }  
}  

Prevent the Control and Text etting greyed out with 'IsEnabled' set to false

Here's a screenshot of how the control looks like when its 'IsEnabled' property is set to 'false'. Observe how the text is greyed out to a very light shade. This poses inconvenience for some users. Though the percentage of such users is negligible, still it has been their wish to prevent the control and text from getting greyed out when the 'IsEnabled' property is 'false'. This needs a bit of modification in the control's template. We need to remove 'StoryBoard' for 'Disabled' 'VisualState'. This is what we need to do:

<Style x:Key="C1NumericBoxStyle" TargetType="c1:C1NumericBox">  
 <!------->  
  <Setter Property="Template">  
   <Setter.Value>  
     <ControlTemplate TargetType="c1:C1NumericBox">  
       <Grid x:Name="Root">  
        <!------->  
         <VisualState x:Name="Disabled">  
          <!--<Storyboard>  
            <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.0" />  
          </Storyboard>-->  
         </VisualState>  
        <!------->  
       </Grid>  
     </ControlTemplate>  
    </Setter.Value>  
  </Setter>  
</Style>  

And then simply set the style for the control:

<c1:C1NumericBox HorizontalAlignment="Left" Margin="43,44,0,0" Name="c1NumericBox1" VerticalAlignment="Top" Height="20" Width="122" Value="10000" IsEnabled="False" Style="{StaticResource C1NumericBoxStyle}" />  

This is how a 'disabled' C1NumericBox looks like with the above mentioned code and with the 'IsTabStop' working as expected. The GIF shows a C1NumericBox placed between two textbox controls, with focus being shifted using 'Tab' key. Note how C1NumericBox is simply skipped. Download C# Sample Download Vb.Net Sample