XamDataTreeのカスタマイズ
XamDataTreeの場合、Silverlight SDKのTreeViewコントロールと異なり、すでに多くの表示方法や機能が標準でサポートされています。
そのため、TreeViewコントロールのように1からすべてカスタマイズして利用するという利用方法ではなく、通常はすでに存在している機能の中からデータに合わせて表現を選択し、必要に応じてカスタマイズするという利用方法になります。
それではXamDataTreeコントロールではどのような機能を持ち、どのような表現があるのかいくつかご紹介しましょう。
表示するNodeの指定
表示するNodeの指定は、前回もご説明したようにGlobalNodeLayoutsプロパティにNodeLayoutオブジェクトを指定することで、特定型に合わせたメンバー指定を行うことができます。 List9で作成したエンティティクラスの特定メンバーを表示するだけであれば下記の指定で表示できます
<ig:XamDataTree Name="XamDataTree1">
<ig:XamDataTree.GlobalNodeLayouts>
<ig:NodeLayout Key="PersonLayout"
TargetTypeName="Person"
DisplayMemberPath="Name" />
</ig:XamDataTree.GlobalNodeLayouts>
</ig:XamDataTree>
これらの指定方法の詳細は前回の記事に記述しましたのでよろしければご参照ください。
Nodeのチェックボックスを表示
XamDataTreeはCheckBox表示をサポートしています。XamDataTreeコントロールのCheckBoxSettingsプロパティにCheckBoxSettingsオブジェクトをセットすることでCheckBoxの表示・非表示を制御することができます。
表示・非表示の切り替えはCheckBoxSettingオブジェクトのCheckBoxVisibilityプロパティを設定することでVisible（表示）/Collapsed（非表示）を切り替えることが可能です。
また、対象となるオブジェクトによってCheckBoxの表示・非表示を切り替えたい場合はNodeLayoutにあるCheckBoxSettingプロパティにCheckBoxSettingOverrideオブジェクトをセットすることで、TypeごとのCheckBox表示・非表示の切り替えが行えます。
そして、同じくNodeLayoutオブジェクトのCheckBoxMemberPathプロパティにメンバー名を指定するとCheckBoxの結果がバインドします。
それでは早速CheckBoxを表示してみましょう。
まず、先ほどのPersonクラスにCheckBoxの結果を格納するためのbool型のプロパティ、IsExistプロパティを追加します。
private bool _isExist;
public bool IsExist
{
get { return _isExist; }
set { _isExist = value; RaisePropertyChanged("IsExist"); }
}
そして、XamDataTreeコントロールのCheckBoxSettingsプロパティにCheckBoxSettingsオブジェクトを設定し、CheckBoxVisibilityプロパティをTrueに続けてNodeLayoutオブジェクトのCheckBoxMemberPathプロパティに"IsExist"の記述を追加します。
<UserControl x:Class="_04_XamDataTreeCheckBox.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
xmlns:ig="http://schemas.infragistics.com/xaml"
Loaded="UserControl_Loaded">
<Grid x:Name="LayoutRoot" Background="White">
<ig:XamDataTree Name="XamDataTree1">
<ig:XamDataTree.CheckBoxSettings>
<ig:CheckBoxSettings
CheckBoxVisibility="Visible" />
</ig:XamDataTree.CheckBoxSettings>
<ig:XamDataTree.GlobalNodeLayouts>
<ig:NodeLayout Key="PersonLayout"
TargetTypeName="Person"
DisplayMemberPath="Name"
CheckBoxMemberPath="IsExist">
<!--NodeLayout単位で表示・非表示を設定したい場合は以下のように指定する-->
<!--<ig:NodeLayout.CheckBoxSettings>
<ig:CheckBoxSettingsOverride CheckBoxVisibility="Visible" />
</ig:NodeLayout.CheckBoxSettings>-->
</ig:NodeLayout>
</ig:XamDataTree.GlobalNodeLayouts>
</ig:XamDataTree>
</Grid>
</UserControl>
LoadedイベントではList9で追加したデータをそのままXamDataTree1コントロールのItemsSourceプロパティに設定します。
実行結果は以下のような形になります。
ドラッグアンドドロップのサポート
XamDataTreeコントロールではNodeからNodeへのドラッグアンドドロップを指定できます。
指定はドラッグ可能・不可能を指定するIsDraggableプロパティ、ドロップ可能・不可能を指定するIsDropTargetプロパティの2種類で指定を行います。
ドラッグアンドドロップを行うとItemsSource内のTree構造も連動して変更します。
そのため、制約としては親Nodeが自身の子Nodeへはドラッグアンドドロップすることができません。
それでは、先ほどのデータを使って、ドラッグアンドドロップを指定してみましょう。
テストデータおよびエンティティクラスはList9,List11のものをそのまま利用します。
次に先ほどのXamDataTreeコントロールのIsDraggable、IsDropTargetをTrueで設定します。
<ig:XamDataTree Name="xamDataTree1"
IsDraggable="True"
IsDropTarget="True">
<ig:XamDataTree.GlobalNodeLayouts>
<ig:NodeLayout Key="PersonLayout"
TargetTypeName="Person"
DisplayMemberPath="Name">
</ig:NodeLayout>
</ig:XamDataTree.GlobalNodeLayouts>
</ig:XamDataTree>
実行結果は以下のような形になります。
NodeLayoutのItemTemplateの指定、展開・縮小用Templateの指定
NodeLayoutクラスはItemTemplateプロパティを持っていますので、各データの表現にDataTemplateを利用して指定できます。
また、Treeの展開・縮小を指定する際のアイコンなどもTemplateによって指定できます。
XamDataTreeコントロールに対して、展開時のTemplateはExpandedIconTemplateプロパティに、縮小時のTemplateはCollapsedIconTemplateプロパティにそれぞれDataTemplateで指定することで置き換えが可能です。
それでは、先ほどのデータを利用して、ExpandedIconTemplateプロパティ、CollapsedIconTemplateプロパティ、そしてNodeLayoutのItemTemplateプロパティに対してDataTemplateを設定します。
前述のサンプルデータを使ってItemTemplateおよび、拡大縮小のTemplateを指定して作成してみましょう。
- サンプルプログラム6: 06-XamDataTreeItemTemplate.zip[#dl]]
<ig:XamDataTree Name="xamDataTree1">
<ig:XamDataTree.ExpandedIconTemplate>
<DataTemplate>
<Ellipse Width="10" Height="10" Margin="5" Fill="Red"/>
</DataTemplate>
</ig:XamDataTree.ExpandedIconTemplate>
<ig:XamDataTree.CollapsedIconTemplate>
<DataTemplate>
<Ellipse Width="10" Height="10" Margin="5" Fill="Blue" />
</DataTemplate>
</ig:XamDataTree.CollapsedIconTemplate>
<ig:XamDataTree.GlobalNodeLayouts>
<ig:NodeLayout Key="PersonLayout"
TargetTypeName="Person"
DisplayMemberPath="Name">
<ig:NodeLayout.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Data.Name}" Width="100" />
<ProgressBar Minimum="0" Maximum="100" Value="{Binding Data.Age}" Width="400" />
</StackPanel>
</DataTemplate>
</ig:NodeLayout.ItemTemplate>
</ig:NodeLayout>
</ig:XamDataTree.GlobalNodeLayouts>
</ig:XamDataTree>
実行結果は以下のとおりになります。
大規模データの取り扱い
XamDataTreeコントロールでは大量データに対しての処理も非常に高速に行えるようパフォーマンスチューニングされています。
List14のような加工が行われたXamDataTreeコントロールでも非常に高速に動作します。
それでは、Loadedイベントに以下のようなデータを追加して動作させてみたいと思います。
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
var bigdata = from i in Enumerable.Range(1, 10000)
select new Person()
{
Name = string.Format("しるば{0}太郎", i),
Age = i%100,
Family = from j in Enumerable.Range(1,10)
select new Person() {
Name = string.Format("しるば子{0}太郎", j),
Age = j
}
};
MessageBox.Show("データ生成が完了しました。");
xamDataTree1.ItemsSource = bigdata;
}
こちらを実行した結果は以下のとおりです。
上記の図では実行速度が確認できませんがサンプルプログラムを実行していただくと「データ生成が完了しました」のMessageBox表示後、10000件に及ぶテンプレート付データが非常に高速に表示できていることをご確認いただけます。
このように大量データに対して高パフォーマンスで動作できます。
おわりに
今回はSilverlightコントロールのカスタマイズからTreeViewコントロール、そしてXamDataTreeコントロールのカスタマイズについてご説明させていただきました。
ここまでの説明を見ていただいても分かるようにSilverlightのコントロールも非常にカスタマイズ性の高いコントロールとなっているため、労力を惜しまなければ、かなり高度なカスタマイズが行えるように設計されております。
しかし、実際の開発現場では、こういったカスタマイズ以外にもコントロールやエンティティのデザイン、そしてテストなど、さまざまな工数が必要となることも同時に予想されます。
今回ご紹介したXamDataTreeコントロールは標準で非常に多くの機能の実装や業務利用に耐えるパフォーマンスチューニングが施されており、十分なコストメリットを得られることができるかと思います。
今回の記事ではすべての機能をご紹介することができませんでしたが、まだまだ利便性の高い機能を多数実装されていますので、ぜひ、一度お試しいただければと思います。
