Question

In Infragistics NetAdvantage, how do I restyle the XamNumericEditor up/down buttons?

I looked in the DefaultStyles, and it’s kind of tough to follow.

1. XamNumericEditor style is empty; it’s simply an alias to XamMaskedEditor.
2. XamMaskedEditor, however, doesn’t appear to have any up/down buttons defined in there. How does that work?

It’d be really great if I could find a solid not-overly-complex example.

Thanks to anyone who can help.

Answer 1

Here’s the snippet from the DefaultStyle EditorsGeneric.xaml:

<Grid x:Name="PART_SpinButtons" DockPanel.Dock="Right" Visibility="{TemplateBinding SpinButtonVisibilityResolved}" Margin="0,1">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="1"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <!-- AS 2/25/11 TFS67071 -->
    <RepeatButton x:Name="spinUp" Style="{TemplateBinding SpinButtonStyle}" Focusable="false" ContentTemplate="{DynamicResource {x:Static igEditors:EditorsBrushKeys.IncreaseGlyphKey}}"/>
    <RepeatButton x:Name="spinDown" Style="{TemplateBinding SpinButtonStyle}" Focusable="false" Grid.Row="2" ContentTemplate="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DecreaseGlyphKey}}"/>
</Grid>

As you can see, you can set the SpinButtonStyle to change the look and feel of the spinButton in your application. If you want to change the content too (up/down arrows in the buttons), you can just override the EditorBrushKeys Resources.

Here’s an example on how to change the style:

<Grid>
  <Grid.Resources>
    <!-- Change Content of the Repeat Buttons -->
    <DataTemplate x:Key="{x:Static igEditors:EditorsBrushKeys.IncreaseGlyphKey}">
      <Path
        Width="7"
        Height="4"
        Data="M 0 4 L 8 4 L 4 0 Z"
        Fill="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnGlyphNormalForegroundFillKey}}"/>
    </DataTemplate>

    <DataTemplate x:Key="{x:Static igEditors:EditorsBrushKeys.DecreaseGlyphKey}">
      <Path
        Width="7"
        Height="4"
        Data="M 0 0 L 4 4 L 8 0 Z"
        Fill="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnGlyphNormalForegroundFillKey}}"/>
    </DataTemplate>

    <!-- Change properties on the button -->
    <Style x:Key="mySpinButtonStyle" TargetType="{x:Type RepeatButton}">
      <Setter Property="Background" Value="Green"/>
    </Style>
  </Grid.Resources>

  <igEditors:XamNumericEditor SpinButtonDisplayMode="Always" x:Name="myEditor" Value="10" Width="120" Height="40" SpinButtonStyle="{StaticResource mySpinButtonStyle}"/>
</Grid>