ヘッダー部にアイコンと項目名を設定する
続いて、作成したノードにアイコンと項目名を設定していきます。これは、各C1TreeViewItemオブジェクトのHeaderプロパティを利用しますが、テキストだけのリストであれば、Headerプロパティに項目名を設定するだけです。
<c1:C1TreeViewItem Header="反則行為の種類" />
テキストとアイコンを組み込むというように、複数のコントロールを使用したい場合は、StackPanelにImageコントロールとTextBlockコントロールを組み込みます。
<c1:C1TreeViewItem Foreground="SteelBlue" > <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/List_BulletsHS.png"/> <TextBlock Text=" 反則行為の種類"/> </StackPanel> </c1:C1TreeViewItem.Header>
Imageコントロールを使う場合は、プロジェクトの「ClientBin」フォルダに使用するイメージ画像を追加しておきます(ここでは、アプリケーション全体で7つのイメージ画像を使用するためまとめて追加)。
同様に、第2階層の5つのノードも同じように、StackPanel、Image、TextBlockコントロールを使ってリスト項目を作成します。
<!-- グループ 1 --> <c1:C1TreeViewItem Foreground="DarkGreen"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/book_reportHS.png"/> <TextBlock Text=" 速度超過"/> </StackPanel> </c1:C1TreeViewItem.Header>
第3階層のノードを設定する
ここまでできたら、後は簡単です。第2階層の3つに、さらにもう1階層下のノードを作成します。そして、それぞれのC1TreeViewItemクラスの中に、さらにC1TreeViewItemクラスを作成していきます。アイコンやテキストの設定方法も同様で、C1TreeViewItemクラスの中にC1TreeViewItemクラスを作っていけば、どんどん深い階層のノードを作成できます。
<!-- グループ 1 --> <c1:C1TreeViewItem Foreground="DarkGreen"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/book_reportHS.png"/> <TextBlock Text=" 速度超過"/> </StackPanel> </c1:C1TreeViewItem.Header> <c1:C1TreeViewItem x:Name="Item1" > <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 高速道路35以上40未満"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem x:Name="Item2" > <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 高速道路30以上35未満"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> ......... ......... </c1:C1TreeViewItem>
<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition Width="136*"/> <ColumnDefinition Width="264*"/> </Grid.ColumnDefinitions> <c1:C1TreeView x:Name="TreeView1" AllowDragDrop="True" Margin="42,41,20,165" FontSize="14" SelectionChanged="TreeView1_SelectionChanged"> <c1:C1TreeView.Effect> <DropShadowEffect BlurRadius="5" Color="DarkGray" /> </c1:C1TreeView.Effect> <c1:C1TreeViewItem Foreground="SteelBlue" > <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/List_BulletsHS.png"/> <TextBlock Text=" 反則行為の種類"/> </StackPanel> </c1:C1TreeViewItem.Header> <!-- グループ 1 --> <c1:C1TreeViewItem Foreground="DarkGreen"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/book_reportHS.png"/> <TextBlock Text=" 速度超過"/> </StackPanel> </c1:C1TreeViewItem.Header> <c1:C1TreeViewItem x:Name="Item1" > <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 高速道路35以上40未満"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem x:Name="Item2" > <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 高速道路30以上35未満"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem x:Name="Item3"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 25以上30未満"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem x:Name="Item4"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 20以上25未満"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem x:Name="Item5"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 15以上20未満"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem x:Name="Item6"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 15未満"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> </c1:C1TreeViewItem> <!-- グループ 2 --> <c1:C1TreeViewItem Foreground="Coral"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/FillDownHS.png"/> <TextBlock Text=" 積載物重量制限超過"/> </StackPanel> </c1:C1TreeViewItem.Header> <c1:C1TreeViewItem x:Name="Item7"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 普通等10割以上"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem x:Name="Item8"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 5割以上10割未満"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem x:Name="Item9"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/Flag_redHS.png"/> <TextBlock Text=" 5割未満"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> </c1:C1TreeViewItem> <!-- グループ 3 --> <c1:C1TreeViewItem Foreground="DeepPink"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/RadialChartHS.png"/> <TextBlock Text=" 信号無視"/> </StackPanel> </c1:C1TreeViewItem.Header> <c1:C1TreeViewItem x:Name="Item10" Foreground="IndianRed"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/RadialChartHS.png"/> <TextBlock Text=" 信号無視(赤色等)違反"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem x:Name="Item11" Foreground="Indigo"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/RadialChartHS.png"/> <TextBlock Text=" 信号無視(点滅)違反"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> </c1:C1TreeViewItem> <!-- グループ なし --> <c1:C1TreeViewItem x:Name="Item12" Foreground="DarkViolet"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/BreakpointHS.png"/> <TextBlock Text=" 免許証不携帯"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem x:Name="Item13" Foreground="mediumblue"> <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Image Source="/DoubleRightArrowHS.png"/> <TextBlock Text=" 追越し違反"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> </c1:C1TreeViewItem> </c1:C1TreeView>