XamOrgChart – NodeControlAttachedEvent でノードに条件付き書式を適用する方法

XamOrgChart でデータの値に応じてノードの書式を変えるには、NodeControlAttachedEvent イベントでノードのデータを判定し、OrgChartNode.Style プロパティにスタイルを割り当てます。XamOrgChart のノードは XAML には公開されない OrgChartNode オブジェクトとして表現されるため、DataTrigger などの XAML ではなく、コードで条件付き書式を実装する必要があります。この記事では、組織図の各マネージャーについて直属の部下の人数（管理限界・Span of Control）がしきい値を超えていないかを判定し、超過しているノードを警告色でハイライトする例を紹介します。

XamOrgChart の設定

通常のノード用と、しきい値を超過したノード用に、OrgChartNodeControl を対象とした 2 つのスタイルをリソースとして定義します。XamOrgChart には NodeControlAttachedEvent イベントのハンドラーを設定します。

<Window.Resources>
    <Style x:Key="NormalNodeStyle" TargetType="ig:OrgChartNodeControl">
        <Setter Property="Background" Value="#FFEFEFEF" />
        <Setter Property="BorderBrush" Value="#FFB0B0B0" />
        <Setter Property="BorderThickness" Value="1" />
    </Style>
    <Style x:Key="OverloadedManagerNodeStyle" TargetType="ig:OrgChartNodeControl">
        <Setter Property="Background" Value="#FFFDE0DE" />
        <Setter Property="BorderBrush" Value="#FFE74C3C" />
        <Setter Property="BorderThickness" Value="2" />
    </Style>
</Window.Resources>

<ig:XamOrgChart x:Name="OrgChart"
                ItemsSource="{Binding RootEmployees}"
                ...
                NodeControlAttachedEvent="OrgChart_NodeControlAttachedEvent">
    <ig:XamOrgChart.GlobalNodeLayouts>
        <ig:OrgChartNodeLayout TargetTypeName="Employee"
                               Key="DirectReports" ... />
    </ig:XamOrgChart.GlobalNodeLayouts>
</ig:XamOrgChart>

NodeControlAttachedEvent の処理

NodeControlAttachedEvent イベントは、ノードのコントロールがアタッチされるたびに発生します。イベント引数の e.Node.Node で対象の OrgChartNode を取得し、OrgChartNode.Data からバインドされているデータ（ここでは社員データ）を参照します。直属の部下の人数（DirectReports.Count）をしきい値と比較し、その結果に応じて OrgChartNode.Style に警告用または通常のスタイルを割り当てます。

private int _threshold = 3;

private void OrgChart_NodeControlAttachedEvent(object sender, OrgChartNodeEventArgs e)
{
    ApplyStyle(e.Node.Node);
}

private void ApplyStyle(OrgChartNode node)
{
    if (node.Data is not Employee employee)
    {
        return;
    }

    node.Style = employee.DirectReports.Count > _threshold
        ? (Style)Resources["OverloadedManagerNodeStyle"]
        : (Style)Resources["NormalNodeStyle"];
}

しきい値を変更したときの再判定

しきい値を変更した場合は、ItemsSource をいったん null にしてから再設定します。これでツリー全体が作り直され、ルートを含むすべてのノードで NodeControlAttachedEvent イベントが再び発生して、新しいしきい値で判定し直されます。ただし、ツリーが作り直されるため、ユーザーが個別に展開・折りたたみしていた状態はリセットされます。

private void ApplyThresholdButton_Click(object sender, RoutedEventArgs e)
{
    if (!int.TryParse(ThresholdTextBox.Text, out var threshold) || threshold < 0) { ... }

    _threshold = threshold;

    var items = OrgChart.ItemsSource;
    OrgChart.ItemsSource = null;
    OrgChart.ItemsSource = items;
}

実行結果

直属の部下の人数がしきい値（初期値 3 名）を超えるマネージャーのノードが、警告色（薄い赤の背景と赤い枠線）でハイライトされます。画面下部でしきい値を変更して「しきい値を適用」ボタンをクリックすると、新しいしきい値で判定し直されます。