ListBox(リストボックス)とは?
ListBoxとは,一覧表示から任意の行を選択できるコントロールです。選択は単一でも,複数でも可能です。
ListBoxの使い方
ListBox上のコントロールを追加して並べることもできますが,基本的には一覧表示に使うので,データバインディングをして使うことになると思います。データバインディングの方法は,ListViewやComboBoxと同様にItemTemplateやDataTemplateを使って実装します。
SelectionMode
ListViewやComboBoxと異なる点として,SelectionModeというプロパティがあるので,その部分を説明します。SelectionModeは,ListBoxの項目を単一で選択させるか,複数選択を可能とするかの設定です。設定は次の3パターンになります。
Single
1つの項目のみ選択可能となります。
Extended
キーボードのControlキーや,Shiftキーを押している最中にクリックをすると,複数選択が可能となります。使い方はExcelの行選択をするときと同じで,Controlを押しながらであれば,クリックした行を選択でき,Shiftを押している場合は,最初に選択した行から,その次に選択した行までを,まとめて選択することができます。
Multiple
キーボードのキーを押さなくても,複数選択が可能となります。クリックした行が選択状態になり,もう一度クリックすると,選択が解除されます。
サンプルコード
<Window x:Class="WPF021.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPF021"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Grid>
<StackPanel>
<ListBox x:Name="MyListBox"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10"
Width="260"
Height="180">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding FileName}"
Width="50"
Height="50"
Margin="10"
/>
<TextBlock Text="{Binding Name}"
Margin="10"
/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Orientation="Horizontal">
<RadioButton x:Name="SingleRadioButton" Content="Single" Checked="RadioButton_Checked"/>
<RadioButton x:Name="ExtendedRadioButton" Content="Extended" Checked="RadioButton_Checked"/>
<RadioButton x:Name="MultipleRadioButton" Content="Multiple" Checked="RadioButton_Checked"/>
</StackPanel>
<Button FontSize="20"
Content="check"
Click="Button_Click"/>
</StackPanel>
</Grid>
</Window>
- ItemTemplateとDataTemplateを使用して,ListBoxにデータバインディングするレイアウトを作成しています。
- 1行分のレイアウトは画像と名前を表示するようにしています。
- ListBoxの下に,ラジオボタンを3つ設置し,SelectionModeを選択できるようにしています。
- RadioButtonの下にボタンを設置し,クリックイベントにブレークポイントを置くことで,ListBoxの選択状態のときの中身を確認するために使用します。
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
namespace WPF021
{
///
/// MainWindow.xaml の相互作用ロジック
///
public partial class MainWindow : Window
{
private ObservableCollection _dtos = new ObservableCollection();
public MainWindow()
{
InitializeComponent();
_dtos.Add(new Dto("Images/A.jpeg", "Shinichi ONO"));
_dtos.Add(new Dto("Images/B.jpeg", "Jyunta INAMOTO"));
_dtos.Add(new Dto("Images/C.jpeg", "Naotaro TAKAHARA"));
MyListBox.ItemsSource = _dtos;
SingleRadioButton.IsChecked = true;
}
private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
if(SingleRadioButton.IsChecked.Value)
{
MyListBox.SelectionMode = SelectionMode.Single;
}
else if (ExtendedRadioButton.IsChecked.Value)
{
MyListBox.SelectionMode = SelectionMode.Extended;
}
else
{
MyListBox.SelectionMode = SelectionMode.Multiple;
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
}
}
public sealed class Dto
{
public Dto(string fileName, string name)
{
FileName = fileName;
Name = name;
}
public string FileName { get; set; }
public string Name { get; set; }
}
}
- 一番下に,別のクラスとしてDtoクラスを作成しています。内容は画面のファイル名と名称の2項目です。このクラスのリストをデータバインドします。
- PrivateフィールドにDtoのリストを生成しています。
- Dtoのリストに3件のデータを作成しています。
- ListBoxのItemsSourceにDtoのリストを設定しています。
- ラジオボタンの初期値はSingleを選択しています。
- ラジオボタンのチェック状態変更イベントに応じて,ListBoxのSelectionModeを変更しています。
実行結果
- Singleモードのときは1行しか選択できません。
- Extendedモードのときは,ControlかShiftを押して複数選択が可能です。
Multipleモードのときは,キーボードを押さずにクリックのみで,複数選択が可能です。選択されている行をクリックすると,選択が解除されます。
選択中のSelectionItemsの中身
- 「check」ボタンのクリックイベントにブレークポイントを置きます。
- 3行目を選択した後,1行目を選択した状態で「check」ボタンを押下します。
- ブレークポイントでデバッグが停止されている状態で,ListBoxのSelectedItemとSelectionItemsの中身を確認してみましょう。
- SelectedItemには3行目の値が入っています。最初に選択された行が格納されていることがわかります。
- SelectionItemsの中身には3行目,1行目の順番でデータが格納されています。行を選択した順番で格納されていることがわかります。
- C#WPFの道#1!WPFのプロジェクト作成方法をわかりやすく解説!
- C#WPFの道#2!StackPanelの使い方をわかりやすく解説!
- C#WPFの道#3!Gridの使い方をわかりやすく解説!
- C#WPFの道#4!コントロールの名前の付け方をわかりやすく解説!
- C#WPFの道#5!イベントの定義の仕方をわかりやすく解説!
- C#WPFの道#6!リソースとStaticResourceの定義と使い方をわかりやすく解説!
- C#WPFの道#7!コントロールのスタイル定義のやり方をわかりやすく解説!
- C#WPFの道#8!グループごとのスタイル定義とBasedOnでの継承のやり方!
- C#WPFの道#9!SQLiteの使い方をわかりやすく解説!
- C#WPFの道#10!ListViewの使い方をわかりやすく解説!
- C#WPFの道#11!ListViewのフィルタリングの方法を解説!
- C#WPFの道#12!SQLiteとListViewでマスタ設定画面の作成!
- C#WPFの道#13!Buttonに画像と文字を並べる方法とRepeatButtonとToggleButton
- C#WPFの道#14!CheckBoxとIsThreeState、Indeterminateの使い方
- C#WPFの道#15!RadioButtonの書き方と使い方を解説
- C#WPFの道#16!Expanderの書き方と使い方を解りやすく解説
- C#WPFの道#17!GroupBoxの書き方と使い方を解りやすく解説
- C#WPFの道#18!Slider(スライダー)の書き方と使い方を解りやすく解説
- C#WPFの道#19!ProgressBarの書き方と使い方を解りやすく解説
- C#WPFの道#20!ComboBoxの書き方と使い方を解りやすく解説
- C#WPFの道#21!ListBoxの書き方と使い方を解りやすく解説
- C#WPFの道#22!TabControlの書き方と使い方を解りやすく解説
- C#WPFの道#23!TreeViewの書き方と使い方を解りやすく解説
- C#WPFの道#24!TextBlock,TextBoxの改行と文字の加工を解説
- C#WPFの道#25!Menuの書き方と使い方をわかりやすく解説!
- C#WPFの道#26!ToolBarの書き方と使い方をわかりやすく解説!
- C#WPFの道#27!StatusBarの書き方と使い方をわかりやすく解説!
- C#WPFの道#28!WrapPanelの書き方と使い方をわかりやすく解説!
- C#WPFの道#29!DockPanelの書き方と使い方をわかりやすく解説!
- C#WPFの道#30!Canvasの書き方と使い方をわかりやすく解説!
