Symfoware

Symfowareについての考察blog

C# + WPF + XAML ツリービューとデータバインド

テキストエディタ + csc.exeだけで、どこまでWPFなアプリケーションが
作成できるか挑戦中。

C# + WPF + XAML コマンドのバインドとメニューバー

ツリービューについて調べてみます。

参考にしたのは、このページです。

方法 : 単純または複雑な TreeView を作成する




簡単なサンプル



まずはページに書いてあるとおりのサンプルを試してみます。

画面を構成する「win.xaml」はこんな感じ。


  1. <Window
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="TreeView"
  5. Width="320"
  6. Height="240"
  7. FontSize="20"
  8. WindowStartupLocation="CenterScreen"
  9. >
  10.     <DockPanel>
  11.     
  12.         <TreeView>
  13.             <TreeViewItem Header="Employee1">
  14.                 <TreeViewItem Header="Jesper"/>
  15.                 <TreeViewItem Header="Aaberg"/>
  16.                 <TreeViewItem Header="12345"/>
  17.             </TreeViewItem>
  18.             <TreeViewItem Header="Employee2">
  19.                 <TreeViewItem Header="Dominik"/>
  20.                 <TreeViewItem Header="Paiha"/>
  21.                 <TreeViewItem Header="98765"/>
  22.             </TreeViewItem>
  23.         </TreeView>
  24.     
  25.     </DockPanel>
  26.     
  27. </Window>




起動用のプログラム「Sample.cs」はこのようになります。


  1. using System;
  2. using System.IO;
  3. using System.Xml;
  4. using System.Windows;
  5. using System.Windows.Markup;
  6. public class Sample {
  7.     
  8.     [STAThread]
  9.     static void Main(string[] args) {
  10.     
  11.         Window win = new Window();
  12.     
  13.         // 作成したwin.xamlを読み込んで、Windowsオブジェクトを取得
  14.         using (FileStream infs = new FileStream("win.xaml", FileMode.Open)) {
  15.             XmlReader xmlReader = XmlReader.Create(infs);
  16.             win = (Window)XamlReader.Load(xmlReader);
  17.         }
  18.         
  19.         // Window表示
  20.         var app = new Application();
  21.         app.Run(win);
  22.     }
  23.     
  24. }




ビルドして実行すると、あっさりツリーメニューが表示されました。

181_01.png


ちなみに、.NET 3.5だとこんな感じ。

181_02.png






データのバインド



最初から表示するツリーの内容が決まっている方が稀だと思います。
プログラムからツリーのデータを設定してみます。

「win.xaml」はこのように修正しました。


  1. <Window
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="TreeView"
  5. Width="320"
  6. Height="240"
  7. FontSize="20"
  8. WindowStartupLocation="CenterScreen"
  9. >
  10.     <DockPanel>
  11.     
  12.         <TreeView ItemsSource ="{Binding TreeData}" />
  13.     
  14.     </DockPanel>
  15.     
  16. </Window>




「TreeData」という名前でデータをバインドします。


プログラムはこのように修正しました。


  1. using System;
  2. using System.IO;
  3. using System.Xml;
  4. using System.Windows;
  5. using System.Windows.Markup;
  6. using System.Windows.Controls;
  7. using System.Collections.Generic;
  8. public class Sample {
  9.     
  10.     [STAThread]
  11.     static void Main(string[] args) {
  12.     
  13.         Window win = new Window();
  14.     
  15.         // 作成したwin.xamlを読み込んで、Windowsオブジェクトを取得
  16.         using (FileStream infs = new FileStream("win.xaml", FileMode.Open)) {
  17.             XmlReader xmlReader = XmlReader.Create(infs);
  18.             win = (Window)XamlReader.Load(xmlReader);
  19.         }
  20.         
  21.         List<TreeViewItem> treeData = CreateTreeData();
  22.         
  23.         win.DataContext = new { TreeData = treeData };
  24.         
  25.         // Window表示
  26.         var app = new Application();
  27.         app.Run(win);
  28.     }
  29.     
  30.     
  31.     private static List<TreeViewItem> CreateTreeData() {
  32.         List<TreeViewItem> treeData = new List<TreeViewItem>();
  33.         
  34.         TreeViewItem treeNode = null;
  35.         TreeViewItem treeLeaf = null;
  36.         
  37.         treeNode = new TreeViewItem();
  38.         treeNode.Header = "テスト1";
  39.         
  40.         treeLeaf = new TreeViewItem();
  41.         treeLeaf.Header = "テスト1-1";
  42.         treeNode.Items.Add(treeLeaf);
  43.         
  44.         treeLeaf = new TreeViewItem();
  45.         treeLeaf.Header = "テスト1-2";
  46.         treeNode.Items.Add(treeLeaf);
  47.         
  48.         treeLeaf = new TreeViewItem();
  49.         treeLeaf.Header = "テスト1-3";
  50.         treeNode.Items.Add(treeLeaf);
  51.         
  52.         treeData.Add(treeNode);
  53.         
  54.         
  55.         treeNode = new TreeViewItem();
  56.         treeNode.Header = "テスト2";
  57.         
  58.         treeLeaf = new TreeViewItem();
  59.         treeLeaf.Header = "テスト2-1";
  60.         treeNode.Items.Add(treeLeaf);
  61.         
  62.         treeLeaf = new TreeViewItem();
  63.         treeLeaf.Header = "テスト2-2";
  64.         treeNode.Items.Add(treeLeaf);
  65.         
  66.         treeLeaf = new TreeViewItem();
  67.         treeLeaf.Header = "テスト2-3";
  68.         treeNode.Items.Add(treeLeaf);
  69.         
  70.         treeData.Add(treeNode);
  71.         
  72.         return treeData;
  73.     }
  74.     
  75. }





ビルドして実行すると、狙い通りの動作になっています。

181_03.png




関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2013/01/20(日) 15:22:52|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
次のページ