+- Curl Global Community (https://communities.curl.com)
+-- Forum: Discussions (https://communities.curl.com/forumdisplay.php?fid=1)
+--- Forum: General Curl questions (https://communities.curl.com/forumdisplay.php?fid=2)
+--- Thread: ツリーコントロールのカスタマイズ (/showthread.php?tid=910)
ツリーコントロールのカスタマイズ - umemura - 06-12-2013
ツリーコントロールの外見を下記のように変更したいです。
■デフォルト
□─┐ラベル１
│ ├─ラベル１－１
│ ├─ラベル１－２
│ └─ラベル１－３
├─┐ラベル２
│ ├─ラベル２－２
│ └─ラベル２－３
│
■望む変更
この「＋－」の展開・折りたたみボタンを大きくしたい
↓ ↓線を長くし、途中から枝わけしたい
□──┬──ラベル１
│ ├────ラベル１－１
│ ├────ラベル１－２
│ └────ラベル１－３
│ ←ノードの親レベルで間を少し空けたい
├──┬───ラベル２
│ ├────ラベル２－２
│ └────ラベル２－３
│
「スキンが適用されたツリーコントロール」の項目を見て、
関係しそうなプロパティを変更しましたが、
望む外観と派なりませんでした。
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で利用する方法が考えられますが、
実装コードがわかりません。
もし、ツリーコントロールをカスタマイズした方がいらっしゃったら教えてください。
RE: ツリーコントロールのカスタマイズ - umemura - 06-18-2013
よこの長さは 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
}
}
}