このトピックは、xamNetworkNode™ コントロールに条件付き書式を適用する方法を示します。トピックの最後で、完全なコード例を提供します。
トピックは以下のとおりです。
Network Node コントロールは、NodeControlAttachedEvent を介した条件付き書式をサポートします。この詳細説明は、整数ラベルが 3 で割り切れる場合、各ノードにカスタム バックグラウンドを適用する方法を示します。
以下は最終結果のプレビューです。
図 1: サンプル コードで描画された条件付き書式の実装
この記事は、xamNetworkNode を使用した作業の開始の記事を既に読んでいることを前提とし、開始点として詳細説明でこのコードを使用します。
カスタム スタイルを追加します。
以下に示すように、スタイルをレイアウトのルートの Resources セクションに追加します:
XAML の場合:
<Grid.Resources>
...
<Style x:Key="BlueStyle" TargetType="ig:NetworkNodeNodeControl">
<Setter Property="Background" Value="LightBlue" />
</Style>
</Grid.Resources>
NodeControlAttachedEvent を処理します。
スタイルが定義された状態で、xnn_NodeControlAttachedEvent と呼ばれるメソッドで NodeControlAttachedEvent を処理するように Network Node コントロールを構成します:
XAML の場合:
<ig:XamNetworkNode x:Name="xnn"
ItemsSource="{Binding Nodes, Source={StaticResource GraphData}}"
NodeControlAttachedEvent="xnn_NodeControlAttachedEvent">
...
</ig:XamNetworkNode>
このイベントは、NodeControl がレンダリング サーフェイスに添付されると常に発生します。ハンドラー メソッド ロジックでは、ノードの整数ラベルを 3 で割り切れるかどうかをチェックします。割り切れる場合、それに応じて NodeControl に Style を設定します:
C# の場合:
private void xnn_NodeControlAttachedEvent(object sender, Infragistics.Controls.Maps.NetworkNodeEventArgs e)
{
NodeModel n = e.NodeControl.DataContext as NodeModel;
int x = Convert.ToInt32(n.Label);
if (x > 0 && x % 3 == 0)
{
e.NodeControl.Style = this.LayoutRoot.Resources["BlueStyle"] as Style;
}
}
Visual Basic の場合:
Private Sub xnn_NodeControlAttachedEvent(sender As Object, e As Infragistics.Controls.Maps.NetworkNodeEventArgs)
Dim n As NodeModel = TryCast(e.NodeControl.DataContext, NodeModel)
Dim x As Integer = Convert.ToInt32(n.Label)
If x > 0 AndAlso x Mod 3 = 0 Then
e.NodeControl.Style = TryCast(Me.LayoutRoot.Resources("BlueStyle"), Style)
End If
End Sub
プロジェクトを保存します。
(オプション) 結果を確認します。
アプリケーションを実行します。3 で割り切れる整数ラベルのあるノードは、青のバックグラウンドで描画されます。必要に応じて、他の要件を満たすためにスタイルおよびハンドラー ロジックを変更できます。
以下は、コンテキストで実装される完全なコードです。
XAML の場合:
<UserControl x:Class="xamNetworkNode_ConditionalFormatting.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ig="http://schemas.infragistics.com/xaml"
xmlns:data="clr-namespace:xamNetworkNode_ConditionalFormatting.Data"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<data:SimpleGraphData x:Key="GraphData" />
<Style x:Key="BlueStyle" TargetType="ig:NetworkNodeNodeControl">
<Setter Property="Background" Value="LightBlue" />
</Style>
</Grid.Resources>
<ig:XamNetworkNode x:Name="xnn"
ItemsSource="{Binding Nodes, Source={StaticResource GraphData}}"
NodeControlAttachedEvent="xnn_NodeControlAttachedEvent">
<ig:XamNetworkNode.GlobalNodeLayouts>
<ig:NetworkNodeNodeLayout
TargetTypeName = "NodeModel"
DisplayMemberPath = "Label"
ConnectionsMemberPath = "Connections"
ConnectionTargetMemberPath = "Target"
/>
</ig:XamNetworkNode.GlobalNodeLayouts>
</ig:XamNetworkNode>
</Grid>
</UserControl>
C# の場合:
using System;
using System.Windows;
using System.Windows.Controls;
using xamNetworkNode_ConditionalFormatting.Models;
namespace xamNetworkNode_ConditionalFormatting
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void xnn_NodeControlAttachedEvent(object sender, Infragistics.Controls.Maps.NetworkNodeEventArgs e)
{
NodeModel n = e.NodeControl.DataContext as NodeModel;
int x = Convert.ToInt32(n.Label);
if (x > 0 && x % 3 == 0)
{
e.NodeControl.Style = this.LayoutRoot.Resources["BlueStyle"] as Style;
}
}
}
}
Visual Basic の場合:
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports xamNetworkNode_ConditionalFormatting.Models
Namespace xamNetworkNode_ConditionalFormatting
Public Partial Class MainPage
Inherits UserControl
Public Sub New()
InitializeComponent()
End Sub
Private Sub xnn_NodeControlAttachedEvent(sender As Object, e As Infragistics.Controls.Maps.NetworkNodeEventArgs)
Dim n As NodeModel = TryCast(e.NodeControl.DataContext, NodeModel)
Dim x As Integer = Convert.ToInt32(n.Label)
If x > 0 AndAlso x Mod 3 = 0 Then
e.NodeControl.Style = TryCast(Me.LayoutRoot.Resources("BlueStyle"), Style)
End If
End Sub
End Class
End Namespace
C# の場合:
using System.Collections.ObjectModel;
using System.ComponentModel;
namespace xamNetworkNode_ConditionalFormatting.Models
{
public class NodeModel : INotifyPropertyChanged
{
private string _label;
public string Label
{
get { return _label; }
set
{
if (value != _label)
{
_label = value;
NotifyPropertyUpdated("Label");
}
}
}
private string _toolTip;
public string ToolTip
{
get { return _toolTip; }
set
{
if (value != _toolTip)
{
_toolTip = value;
NotifyPropertyUpdated("ToolTip");
}
}
}
private ObservableCollection<ConnectionModel> _connections;
public ObservableCollection<ConnectionModel> Connections
{
get { return _connections; }
set
{
if (value != _connections)
{
_connections = value;
NotifyPropertyUpdated("Connections");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void NotifyPropertyUpdated(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
Visual Basic の場合:
Imports System.Collections.ObjectModel
Imports System.ComponentModel
Namespace xamNetworkNode_ConditionalFormatting.Models
Public Class NodeModel
Implements INotifyPropertyChanged
Private _label As String
Public Property Label() As String
Get
Return _label
End Get
Set
If value <> _label Then
_label = value
NotifyPropertyUpdated("Label")
End If
End Set
End Property
Private _toolTip As String
Public Property ToolTip() As String
Get
Return _toolTip
End Get
Set
If value <> _toolTip Then
_toolTip = value
NotifyPropertyUpdated("ToolTip")
End If
End Set
End Property
Private _connections As ObservableCollection(Of ConnectionModel)
Public Property Connections() As ObservableCollection(Of ConnectionModel)
Get
Return _connections
End Get
Set
If value <> _connections Then
_connections = value
NotifyPropertyUpdated("Connections")
End If
End Set
End Property
Public Event PropertyChanged As PropertyChangedEventHandler
Protected Overridable Sub NotifyPropertyUpdated(propertyName As String)
Dim handler = PropertyChanged
RaiseEvent handler(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
End Namespace
C# の場合:
using System.ComponentModel;
namespace xamNetworkNode_ConditionalFormatting.Models
{
public class ConnectionModel : INotifyPropertyChanged
{
private NodeModel _target;
public NodeModel Target
{
get { return _target; }
set
{
if (value != _target)
{
_target = value;
NotifyPropertyUpdated("Target");
}
}
}
#region Implementation of INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void NotifyPropertyUpdated(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
}
}
Visual Basic の場合:
Imports System.ComponentModel
Namespace xamNetworkNode_ConditionalFormatting.Models
Public Class ConnectionModel
Implements INotifyPropertyChanged
Private _target As NodeModel
Public Property Target() As NodeModel
Get
Return _target
End Get
Set
If value IsNot _target Then
_target = value
NotifyPropertyUpdated("Target")
End If
End Set
End Property
Public Event PropertyChanged As PropertyChangedEventHandler
Protected Overridable Sub NotifyPropertyUpdated(propertyName As String)
Dim handler = PropertyChanged
RaiseEvent handler(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
End Namespace
C# の場合:
using System.Collections.ObjectModel;
using xamNetworkNode_Intro.Models;
namespace xamNetworkNode_ConditionalFormatting.Data
{
public class SimpleGraphData
{
public ObservableCollection<NodeModel> Nodes { get; set; }
private const int K = 7; // ノード当たりの接続数 (最大)
private const int NUM_NODES = 98; // グラフのノード数
public SimpleGraphData()
{
Nodes = new ObservableCollection<NodeModel>();
// NUM_NODES ノード オブジェクトをコレクションに追加します
for (int i = 0; i < NUM_NODES; i++)
{
NodeModel node = new NodeModel();
node.Label = i.ToString();
node.ToolTip = "ToolTip for " + node.Label;
Nodes.Add(node);
}
// ノード 0 から開始し、ルートとしてそのノードを設定します
// 最大 K 接続までルート ノードに追加します
// 次にルート ノード インデックスを増分してすべてのノードが接続されるまで繰り返します
int root = 0;
int first = 1;
int last = K;
while (first < Nodes.Count)
{
Nodes[root].Connections = new ObservableCollection<ConnectionModel>();
for (int i = first; i <= last; i++)
{
if (i >= Nodes.Count)
{
break;
}
Nodes[root].Connections.Add(new ConnectionModel { Target = Nodes[i] });
}
root++;
first = last + 1;
last += K;
}
}
}
}
Visual Basic の場合:
Imports System.Collections.ObjectModel
Imports xamNetworkNode_Intro.Models
Namespace xamNetworkNode_ConditionalFormatting.Data
Public Class SimpleGraphData
Public Property Nodes() As ObservableCollection(Of NodeModel)
Get
Return m_Nodes
End Get
Set
m_Nodes = Value
End Set
End Property
Private m_Nodes As ObservableCollection(Of NodeModel)
Private Const K As Integer = 7
' ノード当たりの接続数 (最大)
Private Const NUM_NODES As Integer = 98
' グラフのノード数
Public Sub New()
Nodes = New ObservableCollection(Of NodeModel)()
' NUM_NODES ノード オブジェクトをコレクションに追加します
For i As Integer = 0 To NUM_NODES - 1
Dim node As New NodeModel()
node.Label = i.ToString()
node.ToolTip = "ToolTip for " & node.Label
Nodes.Add(node)
Next
' ノード 0 から開始し、ルートとしてそのノードを設定します
' 最大 K 接続までルート ノードに追加します
' 次にルート ノード インデックスを増分してすべてのノードが接続されるまで繰り返します
Dim root As Integer = 0
Dim first As Integer = 1
Dim last As Integer = K
While first < Nodes.Count
Nodes(root).Connections = New ObservableCollection(Of ConnectionModel)()
For i As Integer = first To last
If i >= Nodes.Count Then
Exit For
End If
Nodes(root).Connections.Add(New ConnectionModel() With { _
Key .Target = Nodes(i) _
})
Next
root += 1
first = last + 1
last += K
End While
End Sub
End Class
End Namespace