mcpField
S
syncfusion-wpf-timepicker

syncfusion-wpf-timepicker

github.com/syncfusionデザイン・UI5163 回インストール1 週間前に更新
リポジトリ

syncfusion-wpf-timepicker について

WPF アプリで Syncfusion の SfTimePicker を実装、カスタマイズするためのスキルです。時刻の値や表示形式、セレクターのレイアウト、スタイル、編集動作を扱います。

主な機能

  1. 01時刻値の設定とバインド
  2. 02書式とカルチャに応じた時刻表示
  3. 03セレクターテンプレートとサイズの調整
  4. 04テーマ、色、RTL レイアウトの設定
  5. 05値変更と編集モードの処理

活用シーン

  1. 01WPF アプリへの時刻入力の追加
  2. 0212 時間制または 24 時間制での表示
  3. 03セレクターセルと外観のカスタマイズ

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-timepicker

インストール後、Claude Code で/syncfusion-wpf-timepickerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
appearance-and-styling.md
getting-started.md
setting-time-values.md
time-formatting.md
time-selector-customization.md

詳細

WPF TimePicker（SfTimePicker）の実装

SfTimePicker は、カスタマイズ可能な書式設定、時刻セレクター UI、包括的なスタイル設定オプションを備えた、タッチ操作に適した時刻選択機能を提供する WPF コントロールです。このスキルでは、WPF アプリケーションで時刻選択コントロールを実装、設定、カスタマイズする方法を説明します。

このスキルを使用する場面

  • ユーザーが時刻を入力できるよう、WPF アプリケーションに時刻選択コントロールを追加する
  • プログラムまたはバインディングを使用して時刻値を設定、管理する
  • 時刻表示をフォーマットする（12 時間制、24 時間制、カルチャ固有の形式）
  • テンプレート、サイズ、間隔を使って時刻セレクターをカスタマイズする
  • 時刻選択コントロールのスタイルとテーマを設定する（色、背景、RTL サポート）
  • イベントとコールバックを使って時刻値の変更を処理する
  • 編集モードを制御する（自由入力とドロップダウン選択）

ナビゲーションガイド

以下からタスクを選択すると、関連するドキュメントに移動できます。

はじめに

📄 参照先： references/getting-started.md

  • インストールとアセンブリ参照
  • デザイナー、XAML、C# を使ったコントロールの追加
  • 時刻選択コントロールの基本設定
  • ValueChanged イベントの処理
  • テーマの適用
時刻値の設定

📄 参照先： references/setting-time-values.md

  • Value プロパティを使った時刻の設定
  • null 値の許可と設定
  • プロンプト用のウォーターマークテキスト
  • UpdateValueOnLostFocus の動作
  • イベントベースの時刻検出
時刻の書式設定

📄 参照先： references/time-formatting.md

  • 表示書式を指定する FormatString
  • 時刻選択コントロールの書式を指定する SelectorFormatString
  • 一般的な書式パターン
  • カルチャ固有の書式設定
時刻セレクターのカスタマイズ

📄 参照先： references/time-selector-customization.md

  • SfTimeSelector コントロールの概要
  • 時、分、午前／午後のセルテンプレート
  • セルのサイズと間隔のプロパティ
  • 高度なテンプレートのカスタマイズ
外観とスタイル設定

📄 参照先： references/appearance-and-styling.md

  • 前景色と背景色
  • 選択項目のスタイル設定
  • フロー方向（右から左への表示をサポート）
  • 編集モード（インラインとドロップダウン）
  • テーマとの統合

クイックスタート

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        
        <syncfusion:SfTimePicker x:Name="timePicker" 
                                 Width="200" 
                                 Value="04:30:00"
                                 ValueChanged="TimePicker_ValueChanged"/>
    </Grid>
</Window>

using Syncfusion.Windows.Controls.Input;

SfTimePicker timePicker = new SfTimePicker();
timePicker.Value = new TimeSpan(14, 30, 00); // 2:30 PM
timePicker.ValueChanged += (d, e) => 
    Console.WriteLine($"Time changed to: {e.NewValue}");

よく使われるパターン

パターン 1：24 時間制での時刻表示
<syncfusion:SfTimePicker FormatString="HH:mm:ss" 
                         SelectorFormatString="HH:mm"/>
パターン 2：ウォーターマーク付きで null 値を許可
<syncfusion:SfTimePicker AllowNull="True"
                         Value="{x:Null}"
                         Watermark="Select a time"/>
パターン 3：読み取り専用の時刻表示
<syncfusion:SfTimePicker AllowInlineEditing="False"
                         ShowDropDownButton="False"
                         Value="09:00:00"/>
パターン 4：セルのサイズと間隔をカスタマイズ
<syncfusion:SfTimePicker SelectorItemWidth="60"
                         SelectorItemHeight="60"
                         SelectorItemSpacing="20"/>

主要プロパティのクイックリファレンス

プロパティ既定値目的
Value現在のシステム時刻選択した時刻を TimeSpan として取得／設定します
FormatString"h:mm tt"表示形式（12 時間制／24 時間制）
SelectorFormatString"h:mm tt"時刻選択セルの形式
AllowNullfalsenull 値のサポートを有効にします
Watermark—Value が null の場合に表示するプレースホルダーテキスト
AllowInlineEditingtrueテキストの直接編集を許可します
ShowDropDownButtontrueドロップダウンボタンを表示します
SetValueOnLostFocusfalseフォーカスを失ったときに値を更新します
SelectorItemWidth30セレクターセルの幅（ピクセル）
SelectorItemHeight30セレクターセルの高さ（ピクセル）
SelectorItemSpacing4セレクター項目間の間隔（ピクセル）
Foreground—テキストの色
Background—コントロールの背景色
AccentBrush—選択項目の強調表示色
FlowDirectionLeftToRightRTL レイアウトをサポートします

コメント

Markdown 対応