DevExpress.XtraTreeListの利用方法①

DevExpress.XtraTreeListを利用して、Explorerのような、ツリーのみを表示させる。

１．カラムなどの非表示

XtraTreeの初期状態はカラムなどの情報が表示されるため、Explorerのような、
ツリーのみを表示させたい場合は、カラムの非表示など、以下の設定を行う。

    this.treeList.OptionsView.ShowColumns = false;
    this.treeList.OptionsView.ShowHorzLines = false;
    this.treeList.OptionsView.ShowIndicator = false;
    this.treeList.OptionsView.ShowVertLines = false;

this.treeList.OptionsView.ShowColumns = false;

this.treeList.OptionsView.ShowHorzLines = false;

this.treeList.OptionsView.ShowIndicator = false;

this.treeList.OptionsView.ShowVertLines = false;

２．ノード画像の設定

XtraTreeのノード画像は、SelectImageList,StateImageListの２種類が用意されている、選択状態を表すSelectImageListと、ノードの様子を表すStateImageListがある。選択状態が不要で、単独で利用する場合は、StateImageListを利用する。
※SelectImageListのみ利用すると、StateImageListの領域が空いてしまうため、格好が悪くなる。

    this.imageList.Images.Clear();
    this.treeList.Nodes.Clear();
    var root = this.treeList.AppendNode(new object[]{"root"},null);
    root.Tag = this.symbolizer;
    root.StateImageIndex = this.imageList.Images.Count;
    this.imageList.Images.Add(this.CreateNodeImage(root));
    foreach (var symbol in this.symbolizer.Symbols.Reverse().ToList())
    {
        var node = this.treeList.AppendNode(new object[] { symbol.SymbolType.ToString() }, root);
        node.Tag = symbol;
        node.StateImageIndex = this.imageList.Images.Count;
        this.imageList.Images.Add(this.CreateNodeImage(node));
    }
    this.treeList.ExpandAll();

this.imageList.Images.Clear();

this.treeList.Nodes.Clear();

var root = this.treeList.AppendNode(new object[]{"root"},null);

root.Tag = this.symbolizer;

root.StateImageIndex = this.imageList.Images.Count;

this.imageList.Images.Add(this.CreateNodeImage(root));

foreach (var symbol in this.symbolizer.Symbols.Reverse().ToList())

{

var node = this.treeList.AppendNode(new object[] { symbol.SymbolType.ToString() }, root);

node.Tag = symbol;

node.StateImageIndex = this.imageList.Images.Count;

this.imageList.Images.Add(this.CreateNodeImage(node));

}

this.treeList.ExpandAll();

３．コネクタ画像の表示

コネクタ画像は、Windows XPのエクスプローラーで表示されたような、ノード間の罫線のことだが、DevExpressの標準のスキンテーマでは、表示させることができない。※コードを駆使すればできそうではあるが…
簡単に行うには、「Office 2007」スキンテーマを利用する。「Office 2007」は、ボーナススキンを登録することで利用可能になる。

    // ボーナススキンの登録
    DevExpress.UserSkins.BonusSkins.Register();


    // 「Office 2007」スキンテーマに変更
    this.treeList.LookAndFeel.UseDefaultLookAndFeel = false;
    this.treeList.LookAndFeel.Style = DevExpress.LookAndFeel.LookAndFeelStyle.Skin;
    this.treeList.LookAndFeel.SkinName = "Office 2007 Silver";