トレーニング
モジュール
.NET MAUI でデータ バインディングを使用する UI を作成します。 - Training
データ バインディングを使用して UI を作成します。 UI は最新のデータに基づいて自動的に更新され、データは UI の変更に応じて更新されます。
このブラウザーはサポートされなくなりました。
Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
ユーザーが選択できる項目の一覧を提供するには、コンボ ボックス (ドロップダウン リストとも呼ばれる) を使用します。 コンボ ボックスは、最初はコンパクトな状態で、展開すると選択可能な項目の一覧が表示されます。 リスト ボックスはコンボ ボックスに似ていますが、折りたたむことができず、コンパクトな状態がありません。 リスト ボックスの詳細については、この記事の最後で詳細を確認できます。
コンボ ボックスを閉じると、現在の選択が表示されるか、選択された項目がない場合は空です。 ユーザーがコンボ ボックスを展開すると、選択可能な項目の一覧が表示されます。
コンパクトな状態のコンボ ボックスではヘッダーを表示できます。
コンボ ボックスは、長い文字列の長さを表示するために拡張できますが、読みにくく長すぎる文字列は避けてください。
コンボ ボックス内のコレクションが十分な長さである場合は、それに対応するようにスクロール バーが表示されます。 リスト内の項目を論理的にグループ化します。
リスト ボックスを使用すると、ユーザーはコレクションから 1 つの項目または複数の項目を選択できます。 リスト ボックスはドロップダウン リストに似ていますが、リスト ボックスは常に開いています。リスト ボックスのコンパクトな (展開されていない) 状態はありません。 すべてを表示するスペースがない場合は、リスト内の項目をスクロールできます。
重要
この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。 プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。
このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。
このコントロールの API は Windows.UI.Xaml.Controls 名前空間に存在します。
WinUI 2.2 以降には、丸みのある角を使用するコントロールの新しいテンプレートが含まれます。 詳しくは、「角の半径」をご覧ください。
WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。
コンボ ボックスを設定するには、オブジェクトを直接 Items コレクションに追加するか、データ ソースに ItemsSource プロパティをバインドします。 ComboBox に追加した項目は、ComboBoxItem コンテナーにラップされます。
XAML で追加した項目を含むシンプルなコンボ ボックスを次に示します。
<ComboBox Header="Colors" PlaceholderText="Pick a color" Width="200">
<x:String>Blue</x:String>
<x:String>Green</x:String>
<x:String>Red</x:String>
<x:String>Yellow</x:String>
</ComboBox>
次の例では、FontFamily オブジェクトのコレクションへのコンボ ボックスのバインディングを示します。
<ComboBox x:Name="FontsCombo" Header="Fonts" Height="44" Width="296"
ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source"/>
ObservableCollection<FontFamily> fonts = new ObservableCollection<FontFamily>()
{
fonts.Add(new FontFamily("Arial"));
fonts.Add(new FontFamily("Courier New"));
fonts.Add(new FontFamily("Times New Roman"));
};
ListView や GridView のように、ComboBox は Selector から派生するため、標準と同じ方法でユーザーの選択を取得できます。
SelectedItem プロパティを使用して、コンボ ボックスの選択された項目を取得または設定することができ、SelectedIndex プロパティを使用して、選択された項目のインデックスを取得または設定することができます。
選択されたデータ項目の特定のプロパティの値を取得するには、SelectedValue プロパティを使用できます。 この場合は、SelectedValuePath を設定して、選択された項目のどのプロパティの値を取得するかを指定します。
ヒント
既定の選択を示すために SelectedItem または SelectedIndex を設定する場合、コンボ ボックスの Items コレクションを設定する前にプロパティを設定すると、例外が発生します。 XAML で Items を定義しない場合は、コンボ ボックスの Loaded イベントを処理し、Loaded イベント ハンドラー内に SelectedItem または SelectedIndex を設定することをお勧めします。
XAML でこれらのプロパティにバインドするか、SelectionChanged イベントを処理して、選択の変更に応答することができます。
イベント ハンドラーのコードでは、SelectionChangedEventArgs.AddedItems プロパティから、選択された項目を取得できます。 以前に選択されていた項目 (ある場合) は、SelectionChangedEventArgs.RemovedItems プロパティから取得できます。 AddedItems と RemovedItems のコレクションには、それぞれ 1 つの項目のみが含まれます (コンボ ボックスが複数選択をサポートしていないため)。
この例では、SelectionChanged イベントを処理する方法のほか、選択された項目にバインドする方法も示します。
<StackPanel>
<ComboBox x:Name="colorComboBox" Width="200"
Header="Colors" PlaceholderText="Pick a color"
SelectionChanged="ColorComboBox_SelectionChanged">
<x:String>Blue</x:String>
<x:String>Green</x:String>
<x:String>Red</x:String>
<x:String>Yellow</x:String>
</ComboBox>
<Rectangle x:Name="colorRectangle" Height="30" Width="100"
Margin="0,8,0,0" HorizontalAlignment="Left"/>
<TextBlock Text="{x:Bind colorComboBox.SelectedIndex, Mode=OneWay}"/>
<TextBlock Text="{x:Bind colorComboBox.SelectedItem, Mode=OneWay}"/>
</StackPanel>
private void ColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
string colorName = e.AddedItems[0].ToString();
Color color;
switch (colorName)
{
case "Yellow":
color = Colors.Yellow;
break;
case "Green":
color = Colors.Green;
break;
case "Blue":
color = Colors.Blue;
break;
case "Red":
color = Colors.Red;
break;
}
colorRectangle.Fill = new SolidColorBrush(color);
}
既定では、SelectionChanged イベントは、ユーザーが一覧にある項目を対象にクリック、タップ、または Enter キーを押すことで選択を確定し、コンボ ボックスが閉じたときに発生します。 開いているコンボ ボックスの一覧をユーザーがキーボードの方向キーを使って移動しても、選択は変更されません。
開いている一覧をユーザーが方向キーを押して移動している間に "ライブ更新" されるコンボ ボックスを作成するには (フォント選択ドロップダウン リストなど)、SelectionChangedTrigger を Always に設定します。 これにより、開いている一覧にある別の項目にフォーカスが変更されたときに、SelectionChanged イベントが発生します。
Windows 10 Version 1809 (SDK 17763) 以降では、編集可能なコンボ ボックスをサポートするために、選択された項目の動作が更新されています。
SDK 17763 より前は、SelectedItem プロパティ (したがって、SelectedValue と SelectedIndex) の値が、コンボ ボックスの Items コレクションに存在する必要があります。 前の例を使用して、colorComboBox.SelectedItem = "Pink"
を設定すると、次の結果になります。
SDK 17763 以降、SelectedItem プロパティ (したがって、SelectedValue と SelectedIndex) の値が、コンボ ボックスの Items コレクションに存在する必要があります。 前の例を使用して、colorComboBox.SelectedItem = "Pink"
を設定すると、次の結果になります。
コンボ ボックスは、コレクション内の検索を自動的にサポートします。 ユーザーが開いているコンボ ボックスまたは閉じたコンボ ボックスにフォーカスを合わせながら、物理キーボードに文字を入力すると、ユーザーの文字列に一致する候補が表示されます。 この機能は、長いリストを移動するときに特に役立ちます。 たとえば、州のリストが含まれているドロップダウンを操作するとき、“w” キーを押すと、“Washington” (ワシントン) がビューに表示され、すばやく選ぶことができます。 検索するときに、大文字と小文字は区別されません。
IsTextSearchEnabled プロパティを false に設定すると、この機能を無効にすることができます。
重要
この機能には、Windows 10 Version 1809 (SDK 17763) 以降が必要です。
既定では、コンボ ボックスを使用すると、ユーザーは事前に定義されたオプションの一覧から選択できます。 ただし、一覧に有効な値のサブセットのみが含まれていて、一覧にないその他の値をユーザーが入力できる場合があります。 これをサポートするために、コンボ ボックスを編集可能にすることができます。
コンボ ボックスを編集可能にするには、IsEditable プロパティを true に設定します。 次に TextSubmitted イベントを処理して、ユーザーが入力した値を処理します。
既定では、ユーザーがカスタム テキストを確定したときに、SelectedItem 値が更新されます。 TextSubmitted イベント引数で Handled を true に設定することで、この動作をオーバーライドできます。 イベントが処理済みとしてマークされると、コンボ ボックスによるイベント後の操作はそれ以上実行されず、コンボ ボックスは編集中の状態のままとなります。 SelectedItem は更新されません。
この例では、シンプルな編集可能コンボ ボックスを示しています。 一覧にはシンプルな文字列が含まれていて、ユーザーが入力した値は入力したとおりに使用されます。
"recently used names" (最近使った名前) のセレクターでは、ユーザーはカスタム文字列を入力できます。 'RecentlyUsedNames' の一覧にはいくつかの値が含まれていて、ユーザーはそこから選択できますが、カスタムの新しい値を追加することもできます。 'CurrentName' プロパティは、現在入力されている名前を表します。
<ComboBox IsEditable="true"
ItemsSource="{x:Bind RecentlyUsedNames}"
SelectedItem="{x:Bind CurrentName, Mode=TwoWay}"/>
TextSubmitted イベントを処理して、ユーザーが入力した値を処理できます。 イベント ハンドラーでは、通常、ユーザーが入力した値が有効であることを検証してから、その値をアプリで使用します。 状況に応じて、将来使用するためにコンボ ボックスのオプションの一覧に値を追加することもできます。
TextSubmitted イベントは、これらの条件が満たされたときに発生します。
ユーザーがテキストを入力してから一覧を上下に移動しても、TextSubmitted イベントは発生しません。
この例では、フォント サイズのセレクターには、フォント サイズの変化に対応する値のセットが含まれていますが、ユーザーは一覧にないフォント サイズを入力できます。
一覧にない値をユーザーが追加すると、フォント サイズが更新されますが、その値はフォント サイズの一覧に追加されません。
新しく入力された値が無効な場合は、SelectedValue を使用して Text プロパティを既知の最新の正しい値に戻します。
<ComboBox x:Name="fontSizeComboBox"
IsEditable="true"
ItemsSource="{x:Bind ListOfFontSizes}"
TextSubmitted="FontSizeComboBox_TextSubmitted"/>
private void FontSizeComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
if (byte.TryParse(e.Text, out double newValue))
{
// Update the app's font size.
_fontSize = newValue;
}
else
{
// If the item is invalid, reject it and revert the text.
// Mark the event as handled so the framework doesn't update the selected item.
sender.Text = sender.SelectedValue.ToString();
e.Handled = true;
}
}
ここでは、"favorite color セレクター" には、好きな色として最も一般的な色 (赤、青、緑、オレンジ色) が含まれていますが、ユーザーは一覧にない好きな色を入力できます。 ユーザーが有効な色 (ピンクなど) を追加すると、その新しく入力された色が一覧に追加され、アクティブな "favorite color" (好きな色) として設定されます。
<ComboBox x:Name="favoriteColorComboBox"
IsEditable="true"
ItemsSource="{x:Bind ListOfColors}"
TextSubmitted="FavoriteColorComboBox_TextSubmitted"/>
private void FavoriteColorComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
if (IsValid(e.Text))
{
FavoriteColor newColor = new FavoriteColor()
{
ColorName = e.Text,
Color = ColorFromStringConverter(e.Text)
}
ListOfColors.Add(newColor);
}
else
{
// If the item is invalid, reject it but do not revert the text.
// Mark the event as handled so the framework doesn't update the selected item.
e.Handled = true;
}
}
bool IsValid(string Text)
{
// Validate that the string is: not empty; a color.
}
Windows developer に関するフィードバック
Windows developer はオープンソース プロジェクトです。 フィードバックを提供するにはリンクを選択します。
トレーニング
モジュール
.NET MAUI でデータ バインディングを使用する UI を作成します。 - Training
データ バインディングを使用して UI を作成します。 UI は最新のデータに基づいて自動的に更新され、データは UI の変更に応じて更新されます。