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

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

2011/06/14 14:00

ポスト

ダウンロードサンプルソース（C#） (765.5 KB)
ダウンロードサンプルソース（VB） (1.1 MB)

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

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

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

第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コントロールのノード

次のページ
TextBoxコントロールとイベントハンドラの処理

この記事は参考になりましたか？

印刷用を表示

ポスト

ComponentZine（ComponentOne）連載記事一覧: 【ComponentOne Data Services活用術】kintoneのデータをWi...

業務アプリ開発用UIコンポーネント「ComponentOne」がBlazorに対応！サン...

WPF／WinFormsアプリをマイグレーションして、ComponentOneを利用したモ...

もっと読む

この記事の著者: 瀬戸遥（セトハルカ）

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事