「DevExpress.XtraTreeList.TreeList」で住所ツリー表示を行う場合のメモです。
事前に住所のxmlファイルを準備しておき、それを読み込んで、住所一覧をツリー形式で表示させます。
「DevExpress.XtraTreeList.TreeList」には、検索パネルが用意されているので検索パネルを使って、検索処理を行います。
1.住所用のxmlを準備
住所用のxmlを準備します。
住所用のxmlは、今回はroot,index,addrの要素を作成しました。
全要素共通でname属性を持っており、name属性をツリーのノードに表示させます。
また、addrの要素のみ、extent属性を持っており、ノードクリック時に座標位置に移動します。
以下、記述例です。
1 2 3 4 5 6 7 8 9 10 11 |
<root name="XXX市"> <index name="あ行"> <index name="XXX旭町"> <index name="12 ~ 444"> <addr name="12" extent="62741.1569,-169209.1024,62852.6575,-169099.2027" /> <addr name="14" extent="62781.057,-169247.3999,62912.8584,-169132.8007" /> <addr name="15" extent="62760.7562,-169240.9014,62872.9568,-169128.7016" /> </index> </index> </index> </root> |
2.xmlを取り込んでノード作成
c#では、xmlからクラスにデシリアライズを行ってオブジェクトにすることもできますが、住所データが大きくなるので、独自でノード作成する処理にしました。
以下、xmlを読み込んで、ノードに作成する処理です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
private void LoadToXml(DevExpress.XtraTreeList.TreeList treeList, string xml) { var doc = XDocument.Load(xml); var rootElmt = doc.Element("root"); var attrName = rootElmt.Attribute("name").Value; var rootNode = treeList.AppendNode(new object[] { attrName }, null); rootNode.ImageIndex = 0; rootNode.SelectImageIndex = 0; rootNode.StateImageIndex = 0; rootNode.Collapse(); foreach (var elmt in rootElmt.Elements()) { this.AppendTreeNode(treeList, elmt, rootNode); } } private TreeListNode AppendTreeNode(TreeList treeList, XElement elmt, TreeListNode parentNode) { var attrName = elmt.Attribute("name").Value; TreeListNode node = null; if (elmt.Name.LocalName == "index") { node = treeList.AppendNode(new object[] { attrName }, parentNode); node.ImageIndex = 0; node.SelectImageIndex = 0; node.StateImageIndex = 0; node.Collapse(); } else { var attrExtent = elmt.Attribute("extent").Value; node = treeList.AppendNode(new object[] { attrName }, parentNode); node.ImageIndex = 1; node.SelectImageIndex = 1; node.StateImageIndex = 1; node.Tag = attrExtent; } foreach (var childElmt in elmt.Elements()) { this.AppendTreeNode(treeList, childElmt, node); } return null; } |
検索文字に該当しないノードは表示されていません。
住所検索のように、ノード数が多い場合は、利用者が使いやすくなります。
3.住所ツリーを表示
作成したノードを表示します、TreeList設定などは以下のようにしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public AddressTreeControl() { this.InitializeComponent(); this.treeList.OptionsFilter.ExpandNodesOnFiltering = true; this.treeList.OptionsFind.AlwaysVisible = true; this.treeList.OptionsFind.FindMode = DevExpress.XtraTreeList.FindMode.FindClick; this.treeList.OptionsView.ShowColumns = false; this.treeList.OptionsView.ShowHorzLines = false; this.treeList.OptionsView.ShowIndicator = false; this.treeList.OptionsView.ShowTreeLines = DevExpress.Utils.DefaultBoolean.False; this.treeList.OptionsView.ShowVertLines = false; this.treeList.ShowButtonMode = DevExpress.XtraTreeList.ShowButtonModeEnum.Default; } |
表示イメージは以下の通りです。
検索した場合は、以下のようになります。
検索すると、部分一致で検索され、検索文字がハイライト表示されます。さらに不要なノードは非表示になるため、使いやすいです。
また、検索処理に関しては、パネルを表示しているだけで、一切コードを記述していないため、非常に便利です。