syncfusion-maui-text-input-layout

.NET MAUI Text Input Layout の実装

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

このスキルを使用するタイミング

次のような場合にこのスキルを使用してください。

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

コンポーネントの概要

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

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

主な機能：

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

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

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストール（Syncfusion.Maui.Core）
• ハンドラーの登録（ConfigureSyncfusionCore）
• 名前空間の設定（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、Autocomplete、ComboBox など）
• プラットフォーム固有の制限事項
• 手順ごとのシナリオ
• トラブルシューティング