ViewMakerで生成するWPF/Silverlightコントロール（４）ListBox編
今回はListBoxです。前回のComboBoxとほぼ同じような使い方になります。
ListBoxコントロール
WPF/Silverlightいずれも標準でふくまれており基本的な機能は変わらないようです。
ViewMakerで指定可能なListBoxの項目は以下の通りです。
-
- ItemsSource（一覧用のデータソース）
- SelectedValuePath（ItemsSourceで選択されたデータの値を示すプロパティのパス）
- DisplayMemberPath（ItemsSourceの各アイテムの表示に利用するプロパティのパス）
- SelectionChangedCommand（選択データ変更時に実行するコマンド）
ComboBoxも同様なのですが、編集ツールではItemsSourceの代わりに直接選択データを指定することができます。
WPFサンプルイメージとXAMLコード
<ListBox Name="ListBox1" ItemsSource="{Binding Path=ItemSource1,Mode=OneWay}" SelectedItem="{Binding Path=ListBox1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" vg:SelectionChangedBehavior.Command="{Binding Path=SelectionChangedCommand1, Mode=OneWay}" xmlns:vg="clr-namespace:ViewMaker.Core.Wpf;assembly=ViewMaker.Core" /> <ListBox Name="ListBox2" ItemsSource="{Binding Path=ItemSource2,Mode=OneWay}" SelectedValue="{Binding Path=ListBox2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" SelectedValuePath="Key" DisplayMemberPath="Value" vg:SelectionChangedBehavior.Command="{Binding Path=SelectionChangedCommand2, Mode=OneWay}" Width="250" Height="150" Foreground="Blue" Background="Azure" HorizontalAlignment="Left" xmlns:vg="clr-namespace:ViewMaker.Core.Wpf;assembly=ViewMaker.Core" /> <ListBox Name="ListBox3" SelectedItem="{Binding Path=ListBox3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" Height="100" FontSize="20"> <ListBox.Items> <system:String>one</system:String> <system:String>two</system:String> <system:String>four</system:String> <system:String>three</system:String> <system:String>five</system:String> <system:String>six</system:String> </ListBox.Items> </ListBox>
SilverlightサンプルイメージとXAMLコード
<ListBox Name="ListBox1" ItemsSource="{Binding Path=ItemSource1,Mode=OneWay}" SelectedItem="{Binding Path=ListBox1,
Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}">
<i:Interaction.Behaviors>
<vg:SelectionChangedBehavior vg:Command="{Binding Path=SelectionChangedCommand1, Mode=OneWay}"
xmlns:vg="clr-namespace:ViewMaker.Core.Silverlight;assembly=SilverlightViewMaker.Core" />
</i:Interaction.Behaviors>
</ListBox>
<ListBox Name="ListBox2" ItemsSource="{Binding Path=ItemSource2,Mode=OneWay}"
SelectedValue="{Binding Path=ListBox2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}"
SelectedValuePath="Key" DisplayMemberPath="Value" Width="250" Height="150" Foreground="Blue"
Background="Azure" HorizontalAlignment="Left">
<i:Interaction.Behaviors>
<vg:SelectionChangedBehavior vg:Command="{Binding Path=SelectionChangedCommand2, Mode=OneWay}"
xmlns:vg="clr-namespace:ViewMaker.Core.Silverlight;assembly=SilverlightViewMaker.Core" />
</i:Interaction.Behaviors>
</ListBox>
<ListBox Name="ListBox3"
SelectedItem="{Binding Path=ListBox3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}"
Height="100" FontSize="20">
<ListBox.Items>
<String xmlns="clr-namespace:System;assembly=mscorlib">one</String>
<String xmlns="clr-namespace:System;assembly=mscorlib">two</String>
<String xmlns="clr-namespace:System;assembly=mscorlib">four</String>
<String xmlns="clr-namespace:System;assembly=mscorlib">three</String>
<String xmlns="clr-namespace:System;assembly=mscorlib">five</String>
<String xmlns="clr-namespace:System;assembly=mscorlib">six</String>
</ListBox.Items>
</ListBox>
ViewModelコード
[View(ViewControlType.StackPanel)]
[ViewProperty(StackPanelViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Hidden)]
[ViewLayoutGeneratorProvider("Generate")]
public class ListBoxSample : ViewModel
{
[View(ViewControlType.ListBox)]
[ViewProperty(ListBoxViewControl.Properties.ItemsSource, "ItemSource1")]
[ViewProperty(ListBoxViewControl.Properties.SelectionChangedCommand, "SelectionChangedCommand1")]
public string ListBox1 { get; set; }
[View(ViewControlType.Label)]
[Display(Name = "Seleced Value")]
[ViewProperty(LabelViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Left)]
public string ListBox1Value { get; set; }
[View(ViewControlType.ListBox)]
[ViewProperty(ListBoxViewControl.Properties.ItemsSource, "ItemSource2")]
[ViewProperty(ListBoxViewControl.Properties.DisplayMemberPath, "Value")]
[ViewProperty(ListBoxViewControl.Properties.SelectedValuePath, "Key")]
[ViewProperty(ListBoxViewControl.Properties.Foreground, "Blue")]
[ViewProperty(ListBoxViewControl.Properties.Background, "Azure")]
[ViewProperty(ListBoxViewControl.Properties.Width, 250)]
[ViewProperty(ListBoxViewControl.Properties.Height, 150)]
[ViewProperty(ListBoxViewControl.Properties.SelectionChangedCommand, "SelectionChangedCommand2")]
public string ListBox2 { get; set; }
[View(ViewControlType.Label)]
[Display(Name = "Seleced Value")]
[ViewProperty(LabelViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Left)]
public int ListBox2Value { get; set; }
[View(ViewControlType.ListBox)]
[ViewProperty(ListBoxViewControl.Properties.FontSize, 20.0)]
[ViewProperty(ListBoxViewControl.Properties.Height, 100)]
public string ListBox3 { get; set; }
[Browsable(false)]
public List<string> ItemSource1
{
get { return new List<string>(new string[] { "ONE", "TWO", "THREE" }); }
}
[Browsable(false)]
public Dictionary<int, string> ItemSource2
{
get
{
var dict = new Dictionary<int, string>();
dict.Add(1, "One");
dict.Add(2, "Two");
dict.Add(3, "Three");
return dict;
}
}
[Browsable(false)]
public ICommand SelectionChangedCommand1 { get { return CreateCommand(SelectionChanged1); } }
private void SelectionChanged1(object x)
{
var data = (object[])x;
ListBox1Value = (string)data[0];
OnPropertyChanged("ListBox1Value");
}
[Browsable(false)]
public ICommand SelectionChangedCommand2 { get { return CreateCommand(SelectionChanged2); } }
private void SelectionChanged2(object x)
{
var data = (object[])x;
ListBox2Value = ((KeyValuePair<int, string>)data[0]).Key;
OnPropertyChanged("ListBox2Value");
}
public static ViewLayoutItem Generate()
{
var svc = ServiceLocator.GetService<IViewLayoutGenerator>();
var layout = svc.Generate(typeof(ListBoxSample), LayoutGenerateFlag.All & ~LayoutGenerateFlag.StaticProvider);
var items = layout.FindChild("ListBox3").GetControl<ListBoxViewControl>().ItemsList;
items.Add("one");
items.Add("two");
items.Add("four");
items.Add("three");
items.Add("five");
items.Add("six");
return layout;
}
}
WPF/Silverlight統合TIPS「XML処理」
ベースのCLRが異なるため、WPF/Silverlightのプログラミングの差異があります。XML関連もNamespace処理など共通化に悩まされました。興味のあるかたはXamlNode(WPF)／XamlNode(silverlight)を参考にしてくださいどのような違いがあるかは概観できると思います。動かすために試行錯誤した結果なのであまりきれいではないんですがね。
