Basic Library for UWP
手順3:TreeView の外観と動作のカスタマイズ
Basic Library for UWP > TreeView for UWP > クイックスタート > 手順3:TreeView の外観と動作のカスタマイズ

前の手順では、Visual Studio で、XAML マークアップを使用して C1TreeViewItem を作成しました。この手順では、XAML コードを使用して C1TreeView コントロールの外観と動作をカスタマイズします。

TreeView for UWP をカスタマイズするには、次の手順に従います。

  1. <Xaml:C1TreeView> タグ内にカーソルを置きます。<Xaml:C1TreeView> タグ内に SelectionMode="Extended" を追加します。これにより、[Shift]キーまたは[Ctrl]キーを押しながら複数のツリー項目を選択できる最上位ノードが作成されます。XAML マークアップは次のようになります。
    マークアップ
    コードのコピー
    <Xaml:C1TreeView x:Name="Tree" SelectionMode="Extended">
  2. 最初の <Xaml:C1TreeViewItem> タグ内にカーソルを置きます。<Xaml:C1TreeViewItem> 内に IsExpanded="True" IsSelected="True" を追加します。これにより、実行時に選択および展開されて表示される最上位ノードが作成されます。XAML マークアップは次のようになります。
    マークアップ
    コードのコピー
    <Xaml:C1TreeViewItem Header="ジャンル一覧" IsExpanded="True" IsSelected="True">
  3. <Xaml:C1TreeViewItem Header="文学"> タグに移動します。<Xaml:C1TreeViewItem Header="文学"> タグ内に Foreground="Fuchsia" を追加します。"ビジネス" ツリー項目のテキストが赤紫色で表示されます。XAML マークアップは次のようになります。
    マークアップ
    コードのコピー
    <Xaml:C1TreeViewItem Header="文学" Foreground="Fuchsia"/>
  4. デバッグ]メニューから[デバッグ開始]を選択し、実行時にアプリケーションがどのように表示されるかを確認します。
    次の画像のように表示されます。

    C1TreeView の動作と外観が次のように変更されていることを確認します。
    • C1TreeView が展開されて表示されます。
    • 最初の C1TreeViewItem が選択されて表示されます。
    • 2番目の C1TreeViewItem のテキストが赤紫色で表示されます。
    • 項目を選択する際に[CTRL]キーまたは[SHIFT]キーを押しながら複数の C1TreeViewItem を選択できます。

おめでとうございます。これで、TreeView for UWP クイックスタートは終了です。このクイックスタートでは、TreeView for UWP アプリケーションを作成してカスタマイズし、静的 C1TreeViewItem を追加し、コントロールの実行時の動作をいくつか確認しました。

関連トピック