here is my code:

<navigation:Page x:Class="SL_ViewFamilyTree.SearchNodesPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ig="http://schemas.infragistics.com/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
xmlns:controls="clr-namespace:SL_ViewFamilyTree.Controls"
xmlns:converters="clr-namespace:SL_ViewFamilyTree.Converters"
d:DesignWidth="927" d:DesignHeight="593"
Title="SearchNodesPage Page" Loaded="Page_Loaded" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

<navigation:Page.Resources>
<ResourceDictionary>
<!--The style of the highlighted nodes-->
<Style x:Key="HighlightedStyle" TargetType="ig:OrgChartNodeControl">
<Setter Property="Padding" Value="6,3,6,2" />
<Setter Property="Margin" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="MinWidth" Value="60" />
<Setter Property="Background" Value="#FF3AB5E9" />
<Setter Property="BorderBrush" Value="#FF747070" />
<Setter Property="Foreground" Value="Red" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ig:OrgChartNodeControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="nodeBackOver" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="nodeBgOver" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NodePresenter" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="DisabledFill">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="ReadOnly"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="nodeBackFocused" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0.97" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="nodeStrokeFocused" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectedStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="nodeBackSelected" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="nodeBgSelected" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="nodeStrokeSelected" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="nodeBackNormal" Background="{TemplateBinding BorderBrush}" CornerRadius="4" Grid.RowSpan="2"/>
<Border x:Name="nodeBackOver" CornerRadius="4" Background="#FF3bb7eb" Opacity="0" Grid.RowSpan="2"/>
<Border x:Name="nodeBackSelected" CornerRadius="4" Background="#FF4B4B4B" Grid.RowSpan="2" Opacity="0"/>
<Border x:Name="nodeBackFocused" CornerRadius="4" Background="#FF505050" Grid.RowSpan="2" Opacity="0" BorderBrush="#FF3bb7eb" BorderThickness="1"/>
<Border x:Name="nodeBg" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" CornerRadius="3,3,0,0" Margin="1,1,1,0"/>
<Border x:Name="nodeBgOver" BorderBrush="#FF4C4C4C" Background="White" CornerRadius="3,3,0,0" Margin="1,1,1,0" Opacity="0"/>
<Border x:Name="nodeBgSelected" BorderBrush="#FF4C4C4C" Background="White" CornerRadius="3,3,0,0" Margin="1,1,1,0" Opacity="0"/>
<Border x:Name="nodeStrokeSelected" CornerRadius="4" Grid.RowSpan="2" Opacity="0" BorderBrush="#FF4B4B4B" BorderThickness="1.5" Margin="-1"/>
<Border x:Name="nodeStrokeFocused" CornerRadius="4" Grid.RowSpan="2" Opacity="0" BorderBrush="#FF3bb7eb" BorderThickness="1.5" Margin="-1"/>
<ContentPresenter x:Name="NodePresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/>
<ToggleButton x:Name="ExpanderButton" Margin="-7,-7,0,0" Width="14" Height="14" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Rectangle x:Name="DisabledFill" Fill="#4CF4F4F5" Grid.RowSpan="2" RadiusX="4" RadiusY="4" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LiveStatusStyle" TargetType="ig:OrgChartNodeControl">
<Setter Property="Padding" Value="6,3,6,2" />
<Setter Property="Margin" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="MinWidth" Value="60" />
<Setter Property="Background" Value="DarkGray" />
<Setter Property="BorderBrush" Value="#FF747070" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
</Style>
<converters:NodeDepartmentDataToDescriptionConverter x:Key="NodeDepartmentDataToDescriptionConverter" />
</ResourceDictionary>
</navigation:Page.Resources>

<Grid x:Name="LayoutRoot" Background="Beige" Width="Auto" Height="Auto">
<ig:XamOrgChart ZoomLevel=".83" Name="OrgChart" Height="Auto" Width="Auto" NodeMouseRightButtonDown="OrgChart_NodeMouseRightButtonDown"
Loaded="Page_Loaded" NodeControlAttachedEvent="OrgChart_NodeControlAttachedEvent"
NodeArrangementStrategy="{Binding SelectedItem, ElementName=ComboBoxNodeArrangement}"
NodeFlowDirection="{Binding SelectedItem, ElementName=ComboBoxNodeFlowDirection}"
HorizontalNodeBuffer="{Binding Value, ElementName=SliderHorizontalNodeBuffer}"
VerticalNodeBuffer="{Binding Value, ElementName=SliderVerticalNodeBuffer}">
<ig:XamOrgChart.GlobalNodeLayouts>

<!--#BEGIN SNIPPET#-->
<!--##########################################-->
<ig:OrgChartNodeLayout TargetTypeName="PersonModel" Key="Subordinates" ToolTipPath="FullName">
<!--Using a Custom Item Template-->
<ig:OrgChartNodeLayout.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Top" BorderBrush="Gray">
<Image Source="{Binding ImagePath}" Width="64" Height="64" />
</Border>

<TextBlock Grid.Column="2" Grid.Row="0" Text="{Binding FileID}" Margin="5,0,5,0"/>

<TextBlock Grid.Column="2" Grid.Row="1" Text="{Binding FirstName}" Margin="5,0,5,0" />

<TextBlock Grid.Column="2" Grid.Row="2" Text="{Binding NationalID}" Margin="5,0,5,0" />
</Grid>
</DataTemplate>
</ig:OrgChartNodeLayout.ItemTemplate>
</ig:OrgChartNodeLayout>
<!--##########################################-->
<!--#END SNIPPET#-->

</ig:XamOrgChart.GlobalNodeLayouts>
</ig:XamOrgChart>

<controls:OptionsPanel HeaderText="Search">
<StackPanel Width="170">
<TextBox x:Name="TextBoxSearchText" TextChanged="TextBox_TextChanged"/>
<TextBlock Text="Search Result" Margin="0,10,0,0" HorizontalAlignment="Center" />
<ListBox x:Name="ListBoxSearchResults" Height="150" SelectionChanged="ListBoxSearchResults_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Data, Converter={StaticResource NodeDepartmentDataToDescriptionConverter}}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</controls:OptionsPanel>
<controls:OptionsPanel HeaderText="Arrangement Settings" >
<StackPanel></StackPanel>
</controls:OptionsPanel>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="1,1,0,0" Name="txt_PersonsCount" Text="PersonsCount" VerticalAlignment="Top" Foreground="#FF4E3535" />
<Grid Margin="468,2,205,543">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="34*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="7" />
<RowDefinition Height="18" />
</Grid.RowDefinitions>
<TextBlock Text="Node Arrangement Strategy" Margin="-1,0,0,1" Width="157" />
<ComboBox Grid.Column="2" x:Name="ComboBoxNodeArrangement" SelectedIndex="0" VerticalAlignment="Center" Margin="5,0,1,6">
<ig:NodeArrangementStrategy>Orthogonal</ig:NodeArrangementStrategy >
<ig:NodeArrangementStrategy>Stagger</ig:NodeArrangementStrategy >
</ComboBox>
<TextBlock Grid.Row="1" Text="Node Flow Direction" Grid.RowSpan="2" />
<ComboBox Grid.Row="1" Grid.Column="2" x:Name="ComboBoxNodeFlowDirection" SelectedIndex="1" VerticalAlignment="Center" Margin="5,2,1,4" Grid.RowSpan="2">
<ig:NodeFlowDirection>Above</ig:NodeFlowDirection>
<ig:NodeFlowDirection>Below</ig:NodeFlowDirection>
<ig:NodeFlowDirection>Left</ig:NodeFlowDirection>
<ig:NodeFlowDirection>Right</ig:NodeFlowDirection>
</ComboBox>
</Grid>
</Grid>
</navigation:Page>