バージョン

xamEditor コントロールの編集テンプレートを変更

始める前に

xamEditor コントロールは、値を表示するためと値を編集するための 2 つのテンプレートを使用します。xamEditor コントロールによって公開されている EditTemplate プロパティを設定して、編集機能に使用されるコントロールテンプレートを変更できます。

達成すること

xamNumericEditor™ コントロールの値を変更するためにスライダーを使用するコントロール テンプレートを作成します。

次の手順を実行します

  1. Window のローカル リソース ディクショナリのタグを追加します。

XAML の場合:

<Window.Resources>
    <!--TODO: ここにコントロール テンプレートを作成します-->
</Window.Resources>

  1. コントロール テンプレートをリソース ディクショナリに追加します。

    1. Key プロパティを "sliderEditTemplate"に設定すれば、後の手順でこのコントロール プロパティを参照できます。

    2. TargetType プロパティを "{x:Type igEditors:XamNumericEditor}" に設定します。

XAML の場合:

<ControlTemplate x:Key="sliderEditTemplate" TargetType="{x:Type igEditors:XamNumericEditor}">
    <!--TODO: ここにスライダー コントロールを追加します-->
</ControlTemplate>

  1. Slider コントロールを ControlTemplate オブジェクトに追加します。

    1. Minimum プロパティを 0 に設定します。

    2. Maximum プロパティを 100 に設定します。

    3. Value プロパティを xamNumericEditor コントロールの Value プロパティ (TemplatedParent) にバインドするバインディング式に設定します。

親から一方方向にしかバインドできないので、TemplateBinding マークアップ拡張を使用できません。スライダーの値が xamNumericEditor コントロールの値を更新するためには完全な RelativeSource バインディング式を使用する必要があります。

XAML の場合:

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

  1. xamNumericEditor コントロールの EditTemplate プロパティを手順 2 で作成した ControlTemplate オブジェクトに設定します。

xamNumericEditor コントロールの Value プロパティを設定していない場合、NULL にデフォルト設定されます。Slider コントロールの Value プロパティは NULL にすることができないので、初めて編集モードにした時に Debug Output Window にバインディング エラーが表示されます。xamNumericEditor コントロールの Value プロパティを設定するか、NULL 値とスライダーの最小値を変換するためのコンバーターを作成して、この問題を解決できます。コンバーターについての詳細は、MSDN を参照してください。

XAML の場合:

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

  1. プロジェクトを実行します。

xamNumericEditor コントロールを編集モードにすると、テキストボックスの代わりにスライダーが表示されます。スライダーの値を変更して編集モードを離れると、xamNumericEditor コントロールは値を表示します。