バージョン

ノードのスタイルを変更する

NodeBinder がノードに適用するスタイルの変更方法について説明します。各 NodeBinder はノードにさまざまなスタイルを適用できます。

始める前に

ノードのカスタム テンプレートには “NodesPanel” という名前の NodesPanel 要素を含まれる必要があります。この要素は、各子コードを保持します。

スタイルの作成

  1. Blend でプロジェクトを作成し、xamTreemap コントロールに追加します。

  2. NodeBinders を xamTreemap に追加します。

  3. スタイルする NodeBinder を強調表示します。

xamTreemap Changing the Style of the Nodes 01.png

  1. [オブジェクト] メニューから - オブジェクト - テンプレートの編集 - NodeStyle の編集 - コピーの編集… を選択します。

xamTreemap Changing the Style of the Nodes 02.png

  1. カスタム ツリーマップ ノード スタイルのテンプレートを編集します。

xamTreemap Changing the Style of the Nodes 03.png

DefaultStyle プロパティ

xamTreemap コントロールをデータにバインドする場合、データ ソースからのノードを含むルートノードを作成します。

xamTreemap Changing the Style of the Nodes 04.png

xamTreemap コントロールのスタイルを DefaultStyle プロパティへ割り当ててこのノードのスタイルを設定できます。

デフォルト ノード テンプレート

XAML の場合:

<Style TargetType="ig:TreemapNode">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType=" ig:TreemapNode">
                <Border BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Fill}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        BorderBrush="{TemplateBinding BorderBrush}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBlock Text="{TemplateBinding Text}"
                                   HorizontalAlignment="Center" />
                        <ig:NodesPanel x:Name="NodesPanel"
                                       Grid.Row="1" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>