ツリーコントロールのカスタマイズ

[umemura]

ツリーコントロールの外見を下記のように変更したいです。

■デフォルト
□─┐ラベル１
│　 ├─ラベル１－１
│　 ├─ラベル１－２
│　 └─ラベル１－３
├─┐ラベル２
│ 　├─ラベル２－２
│　 └─ラベル２－３
│

■望む変更
この「＋－」の展開・折りたたみボタンを大きくしたい
↓　　↓線を長くし、途中から枝わけしたい
□──┬──ラベル１
│　　　├────ラベル１－１
│　　　├────ラベル１－２
│　　　└────ラベル１－３
│　　　　　　　　　　　　　　　　←ノードの親レベルで間を少し空けたい
├──┬───ラベル２
│　　　├────ラベル２－２
│　　　└────ラベル２－３
│

「スキンが適用されたツリーコントロール」の項目を見て、
関係しそうなプロパティを変更しましたが、
望む外観と派なりませんでした。

Code:

{def toggle-open-skin =
    {ShadedSkinSpec
        "white",
        "white",
        margin-spec = {OffsetSpec 20px}
    }
}
{def toggle-closed-skin =
    {ShadedSkinSpec
        "white",
        "white",
        margin-spec = {OffsetSpec 20px}
    }
}
{def tree-ss =
    {StyleSheet
        {StyleRule "TreeControl/toggle",
            skin = toggle-closed-skin,
            checked-skin = toggle-open-skin,
            width =5in
        }
    }
}
{install-style-sheet-on-Graphic
    {TreeControl data-model = foods},
    tree-ss
}

あとは、draw メソッドで、うまいこと線を引くスキンを自作してUIで利用する方法が考えられますが、
実装コードがわかりません。

もし、ツリーコントロールをカスタマイズした方がいらっしゃったら教えてください。

[umemura]

よこの長さは TreeControl.indentation で指定できました。
ただ、トグルボタンを大きくした際に、レイアウトが崩れる問題は解決できていおらず、
margin-spec で6px より大きくすると、目に見えてレイアウトがおかしくなります。

Code:

||ツリーの見栄えを変える
    def tree-control =
        {TreeControl
            tree-item-creation-proc = new-tree-item-creation-proc,
            name = "tree-control",
            || インデント幅
            indentation = 15mm
        }
    {install-style-sheet-on-Graphic
        tree-control,
        {StyleSheet
            ||トグルボタン
            {StyleRule "TreeControl/toggle",
                skin = {ShadedSkinSpec
                           "white",
                           "white",
                           rollover-start-color = "lightblue",
                           border-color = "gray",
                           rollover-border-color = "blue",
                           draw-content-background? = false,
                           margin-spec = {OffsetSpec 6px},
                           overlay-decoration = "plus"
                           ||corner-radius = 3px
                       },
                checked-skin = {ShadedSkinSpec
                                   "white",
                                   "white",
                                   rollover-start-color = "lightblue",
                                   border-color = "gray",
                                   rollover-border-color = "blue",
                                   draw-content-background? = false,
                                   margin-spec = {OffsetSpec 6px},
                                   overlay-decoration = "minus"
                                   ||corner-radius = 3px
                               }
            },
            ||TreeItemのマージンを広げる
            {StyleRule "DefaultTreeItem",
                margin = 2mm
            }
        }
    }