</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_RATING%%" --><!--DXMETADATA end --> <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end--> <div id="ProjectTitle"><!--DXMETADATA start type="ProjectTitle" -->OrgChart for WPF and Silverlight <!--DXMETADATA end--></div> <div id="PageTitle"><div id="PageTitleText"><!--DXMETADATA start type="ItemTitle" -->ChildSpacing<!--DXMETADATA end--></div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label> <label id="ExpandAllLabel" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label> </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end --> </div> <!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="BreadcrumbsContainer"><table><tr><td> <a href="orgchartforwpflayout.html">C1OrgChart Layout and Appearance</a> > <a href="orgchartforwpfappear.html">C1OrgChart Appearance Properties</a> > ChildSpacing</td></tr></table></div><!--DXMETADATA end --> <div id="BodyContent"> <!--DXMETADATA start type="TopicSection" name="BodyText"--><p><b><a href="C1.WPF.OrgChart.4~C1.WPF.OrgChart.C1OrgChart~ChildSpacing.html">ChildSpacing</a> property</b>: This property allows you to control the separation between items, in pixels. The default value is (20, 20), which spaces items by 20 pixels in the horizontal and vertical directions. For example, setting the <b>ChildSpacing</b> property to (20, 60) would have the following effect:</p> <div class="FilteredContentXAML" data-title="XAML" data-itemid="XAML"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">c1:C1OrgChart </span><span style="COLOR: #ff0000">x:Name</span><span style="COLOR: #0000ff">="_orgChart"</span><span style="COLOR: #ff0000"> ChildSpacing</span><span style="COLOR: #0000ff">="20 60"</span><span style="COLOR: #ff0000"> ItemTemplate</span><span style="COLOR: #0000ff">="</span><span style="COLOR: #808000">{StaticResource EmployeeTemplate }</span><span style="COLOR: #0000ff">"</span><span style="COLOR: #ff0000"> </span><span style="COLOR: #0000ff">></span> <span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">c1:C1OrgChart</span><span style="COLOR: #0000ff">></span> </pre> </td> </tr> </tbody> </table> </div> <p><img alt="" src="ImagesExt/image12_8.jpg"></p> <p> </p> <p>Notice how the vertical spacing between items increased compared to the default setting.</p> <p>You can also control the spacing between items by specifying a <b>Margin</b> value in your <b>ItemTemplate</b>. This approach is slightly more flexible because it allows you to specify the amount of space to be left on each side of the node elements.</p><!--DXMETADATA end--> <a name="seealsobookmark"></a> <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end--> </div> <div id="FooterContent"> <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end --> <!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p> </p><p> </p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p> </p><p> </p><hr style="height: 1px"><p>Copyright © <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved. <script>$(document).ready(function() { if (!(window.self !== window.top)) { // Not running in a frameset // Get the page name var pageName = location.href.substring(location.href.lastIndexOf("/") + 1); if (pageName.indexOf("#") != -1) { pageName = pageName.substring(0, pageName.indexOf("#")); } // Append to webframe.html var framePage = "webframe.html#" + pageName; location.href = framePage; } });</script></p><!--DXMETADATA end --> <!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><a target="_blank" href="http://our.componentone.com/groups/">Product Support Forum</a> | <a target="_blank" href="http://feedback.componentone.com/forums/272000-wpf-and-silverlight-documentation">Documentation Feedback</a><!--DXMETADATA end--> </div> </body> </html>