Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ドラッグ&ドロップで項目移動できる
ツリービューを持ったSilverlightアプリケーションの作成

ComponentOne Studio for SilverlightのC1TreeViewコントロールを使ったWebページの作成

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/06/14 14:00
目次

ヘッダー部にアイコンと項目名を設定する

 続いて、作成したノードにアイコンと項目名を設定していきます。これは、各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つのイメージ画像を使用するためまとめて追加)。

プロジェクトの「ClientBin」フォルダに使用するイメージ画像を追加しておく
プロジェクトの「ClientBin」フォルダに使用するイメージ画像を追加しておく

 同様に、第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>
作成した2階層分のノード
作成した2階層分のノード

第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>
ここまでのXAMLコード
<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>
完成したC1TreeViewコントロールのノード
完成したC1TreeViewコントロールのノード

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5