syncfusion-maui-toolkit-text-input-layout

.NET MAUI Text Input Layout の実装

Syncfusion .NET MAUI Text Input Layout コントロールを実装、カスタマイズするための包括的なスキルです。このコントロールは、入力ビューにフローティングラベル、アイコン、補助ラベルなどの装飾要素を追加します。

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

次のことが必要な場合に、このスキルを使用します。

• 入力フィールドにフローティングヒントラベルを追加する
• ヘルパーテキスト、エラーメッセージ、文字数カウンターを表示する
• 入力フィールドにコンテナータイプ（Filled、Outlined、None）を適用する
• 入力ビューに先頭または末尾のアイコンを追加する
• Entry コントロールでパスワードの表示を切り替える
• 入力に視覚状態（Normal、Focused、Error）を適用する
• ラベルのスタイル、色、フォントをカスタマイズする
• 複数の入力ビュー（Entry、Editor、Picker）をサポートする
• エラー状態を含むフォーム検証を実装する
• アクセシビリティのために補助ラベルを追加する
• Material Design スタイルの入力フィールドを作成する

コンポーネントの概要

SfTextInputLayout は入力コントロールをラップし、次の機能を提供します。

• フローティングラベル — フォーカス時に上部へアニメーションするヒント
• コンテナータイプ — Filled（背景）、Outlined（枠線）、None
• 補助ラベル — ヘルパーテキスト、エラーメッセージ、文字数カウンター
• カスタムアイコン — 位置を指定できる先頭／末尾ビュー
• 視覚状態 — Normal、Focused、Error、Disabled
• パスワード切り替え — パスワード文字の表示／非表示
• RTL サポート — 右から左へのテキストフロー
• 複数の入力ビュー — Entry、Editor、Picker、DatePicker、TimePicker、Masked Entry、Numeric Entry

主な機能：

• Material Design スタイルの入力装飾
• フローティングヒントラベルのアニメーション
• ヘルパーテキストとエラーテキストの表示
• 最大長を設定した文字数カウント
• 先頭／末尾アイコンの配置（Inside／Outside）
• パスワード表示の切り替え
• Visual State Manager との統合
• フォント、色、ストロークのカスタマイズ
• 補助ラベル用のスペースの確保

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストール（Syncfusion.Maui.Toolkit）
• ハンドラーの登録（ConfigureSyncfusionToolkit）
• 名前空間の設定（XAML と C#）
• Entry を使用した基本的な実装
• ヒントラベルの追加
• パスワード表示切り替えの基本
• 最初の動作するサンプル

コンテナータイプとスタイル設定

📄 参照： references/container-types.md

• ContainerType プロパティ（Filled、Outlined、None）
• 背景付き Filled コンテナー
• 枠線付き Outlined コンテナー
• ContainerBackground のカスタマイズ
• 角丸にする OutlineCornerRadius
• 間隔を設定する InputViewPadding
• タイプごとの視覚例

ヒントと補助ラベル

📄 参照： references/hints-and-labels.md

• ヒント／フローティングラベル（Hint、ShowHint）
• ヒント位置の固定（IsHintAlwaysFloated）
• ヘルパーテキスト（HelperText、ShowHelperText）
• エラーテキスト（ErrorText、HasError）
• 文字数カウンター（CharMaxLength、ShowCharCount）
• スペースの確保（ReserveSpaceForAssistiveLabels）
• ラベルのスタイル設定（HintLabelStyle、HelperLabelStyle、ErrorLabelStyle）
• フォントのカスタマイズ（FontFamily、FontSize、FontAttributes）

カスタムアイコンとビュー

📄 参照： references/custom-icons.md

• 先頭ビュー（LeadingView、LeadingViewPosition）
• 末尾ビュー（TrailingView、TrailingViewPosition）
• Inside と Outside の位置指定
• フォントアイコンと Unicode
• カスタムビューの統合
• アイコン操作のイベント処理
• 一般的なアイコンパターン（カレンダー、検索、クリア）

状態、色、テーマ設定

📄 参照： references/states-and-colors.md

• 視覚状態（Normal、Focused、Error、Disabled）
• 枠線の Stroke プロパティ
• CurrentActiveColor プロパティ
• Visual State Manager との統合
• ストロークの太さ（FocusedStrokeThickness、UnfocusedStrokeThickness）
• コンテナーの背景色
• ラベルのテキスト色
• テーマとの統合

高度な機能とイベント

📄 参照： references/advanced-features.md

• パスワードの表示切り替え（EnablePasswordVisibilityToggle）
• PasswordVisibilityToggled イベント
• 右から左への表示サポート（FlowDirection）
• サポートされている入力ビュー（Entry、Editor など）
• プラットフォーム固有の制限事項
• 使用方法の例
• トラブルシューティング