Version

Modifying the Edit Template of a xamEditor Control

Before You Begin

The xamEditor controls use two templates — one for displaying values and one for editing values. You can modify the control template used for editing functionality by setting the EditTemplate property exposed by the xamEditor control.

What You Will Accomplish

You will create a control template that uses a slider to modify the xamNumericEditor™ control’s value.

Follow these Steps

  1. Add tags for the Window’s local resource dictionary.

In XAML:

<Window.Resources>
    <!--TODO: Create a control template here-->
</Window.Resources>

  1. Add a control template to the resource dictionary.

    1. Set the Key property to "sliderEditTemplate" so that you can reference this control template in a later step.

    2. Set the TargetType property to "{x:Type igEditors:XamNumericEditor}".

In XAML:

<ControlTemplate x:Key="sliderEditTemplate" TargetType="{x:Type igEditors:XamNumericEditor}">
    <!--TODO: Add a Slider control here-->
</ControlTemplate>

  1. Add a Slider control to the ControlTemplate object.

    1. Set the Minimum property to 0\.

    2. Set the Maximum property to 100\.

    3. Set the Value property to a binding expression that binds to the xamNumericEditor control’s Value property (TemplatedParent).

You cannot use the TemplateBinding markup extension since it only binds one-way from the parent. You must use a full RelativeSource binding expression in order for the slider’s value to update the xamNumericEditor control’s value.

In XAML:

<Slider
    Minimum="0"
    Maximum="100"
    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value}"
    />

  1. Set the EditTemplate property of a xamNumericEditor control to the ControlTemplate object you created in step two.

If you do not set the Value property of the xamNumericEditor control, it defaults to NULL. Since the Slider control’s Value property cannot be NULL, a binding error will be displayed in the Debug Output Window the first time you go into edit mode. You can solve this problem by setting the Value property of the xamNumericEditor control or by creating a converter to convert between a NULL value and the minimum value of the slider. You can visit the MSDN to read more about converters.

In XAML:

<igEditors:XamNumericEditor EditTemplate="{StaticResource sliderEditTemplate}" Value="0" />

  1. Run the project.

If you put the xamNumericEditor control into edit mode, you should see a slider instead of a text box. Once you modify the slider’s value and leave edit mode, the xamNumericEditor control will display the value.