spidercontrol.aspx.htm
来自「WPF星型网状拓扑图绘制 WPF星型网状拓扑图绘制」· HTM 代码 · 共 928 行 · 第 1/5 页
HTM
928 行
<td><table border="1" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="20" bgcolor="White" height="7"><img src="SpiderControl.aspx_files/red.gif" width="20" align="center" border="0" height="7"></td>
<td width="20" bgcolor="White" height="7"><img src="SpiderControl.aspx_files/red.gif" width="20" align="center" border="0" height="7"></td>
<td width="20" bgcolor="White" height="7"><img src="SpiderControl.aspx_files/red.gif" width="20" align="center" border="0" height="7"></td>
<td width="20" bgcolor="White" height="7"><img src="SpiderControl.aspx_files/red.gif" width="20" align="center" border="0" height="7"></td>
<td width="20" bgcolor="White" height="7" nowrap="nowrap"><img src="SpiderControl.aspx_files/red.gif" width="15" align="center" border="0" height="7"></td>
</tr>
</tbody></table>
</td></tr>
<tr id="ctl00_ArticleRating_PopularityRow">
<td colspan="2" class="SmallText" align="right">
<a id="ctl00_ArticleRating_PopularityLnk" title="Calculated as rating x Log10(# votes)" href="http://www.codeproject.com/script/Articles/TopArticles.aspx?ta_so=1">Popularity: 7.85</a>
<span id="ctl00_ArticleRating_PopularityLbl"></span><span id="ratingVal">Rating: <b>4.77</b> out of 5</span></td>
</tr>
</tbody></table>
</td>
<td>
<div>
<table class="HistTable" title="Voting Distribution. Recent data only"><tbody><tr><td><img src="SpiderControl.aspx_files/t.htm" alt="0 votes, 0.0%" title="0 votes, 0.0%" width="10" border="0" height="1"><br>1</td>
<td><img src="SpiderControl.aspx_files/pollcol.gif" alt="2 votes, 4.5%" title="2 votes, 4.5%" width="10" border="0" height="1"><br>2</td>
<td><img src="SpiderControl.aspx_files/t.htm" alt="0 votes, 0.0%" title="0 votes, 0.0%" width="10" border="0" height="1"><br>3</td>
<td><img src="SpiderControl.aspx_files/pollcol.gif" alt="6 votes, 13.6%" title="6 votes, 13.6%" width="10" border="0" height="3"><br>4</td>
<td><img src="SpiderControl.aspx_files/pollcol.gif" alt="36 votes, 81.8%" title="36 votes, 81.8%" width="10" border="0" height="20"><br>5</td>
</tr></tbody></table>
</div>
</td></tr></tbody></table>
</td>
</tr>
</tbody></table>
<div id="ctl00_UneditedRow" class="SmallText" style="border-top: 1px dashed rgb(255, 153, 0); border-bottom: 1px dashed rgb(255, 153, 0); margin: 5px; padding: 5px;">
<b>Note:</b> This is an unedited contribution. If this article is inappropriate,
needs attention or copies someone else's work without reference then please
<a id="ctl00_ReportProblem" href="http://www.codeproject.com/script/Articles/Report.aspx?aid=29529">Report This Article</a>
</div>
<span id="intelliTXT">
<div id="contentdiv">
<!-- Main Page Contents Start -->
<!-- Article Starts -->
<ul class="download">
<li><a href="http://www.codeproject.com/KB/WPF/SpiderControl/SpiderTreeControl.zip">Download demo project - 427 Kb </a></li>
</ul>
<h2>Introduction</h2>
<p> I recently started a new job where I am employed as a WPF developer. When
I arrived the guys there gave me a brief that was to make a cool app, and they
really liked the look and feel of the <a href="http://www.vertigo.com/familyshow.aspx" target="_blank">FamilyShow</a>
exemplar by Vertigo. Which I also love, that and <a href="http://community.infragistics.com/exemplars/tangerine.aspx" target="_blank">Tangerine</a>
by Infragistics are my favourite WPF demos.
</p><p>What I liked in both where the fluid movements and the diagraming approach
used in the <a href="http://www.vertigo.com/familyshow.aspx" target="_blank">FamilyShow</a>
exemplar particularly. The guys where I just started working asked me how hard
it would be to create something like the diagramming component seen in the <a href="http://www.vertigo.com/familyshow.aspx" target="_blank">FamilyShow</a>
exemplar. So without further ado I contacted my favourite partner in weird WPF
breifs, Mr Fredrik Bornander, who I love working with on these stranger ideas.
We seem to manage to do a reasonable job together, at least I think anyway.
</p><p>This article will describe a tree like diagram component that we have nicknamed
the "SpiderControl".
</p><p>Here is a screenshot just to wet your appetite:
</p><p><img src="SpiderControl.aspx_files/SpiderControl.png" width="450" height="467"><br>
<br>
The rest of this article will describe how we went about building this little
control
</p><ul>
<li><a href="#WhatsItDo">What Does It Do</a> </li>
<li><a href="#HowItsMade">Hows It Made</a> </li>
<li><a href="#KnownIssues">Known Issues</a>
</li></ul>
<p></p>
<h2><a name="WhatsItDo">What Does It Do</a> </h2>
<p>The following is a list of what the control actually does</p>
<ul>
<li>Uses a specialized <code>ScrollViewer</code> which allows the user to use
the mouse to create a friction enabled drag operation (this is pretty cool
actually)</li>
<li>Only shows 3 layers of the tree Maximum to keep it clean</li>
<li>Current node selected is centered within available area</li>
<li>Node collapse expand buttons automatically enabled dependant on number of
children the current node has</li>
</ul>
<p> </p>
<h2><a name="HowItsMade">Hows It Made</a> </h2>
<p>So now onto the nitty gritty, which is the part you are probably wanting to
read anyhow.</p>
<p>So first lets just have a quick look at the basic structure</p>
<p>Ill split this into 2 diagrams for no other reason than I couldnt figure out
how to get words SmartArt to add more levels to its standard SmartArt diagrams,
curse technology.</p>
<p><img src="SpiderControl.aspx_files/classes1.png" width="273" height="338"></p>
<p>It can be seen from the above diagram that the HostWindow holds an instance
of a <code>DragViewer</code>. So the windows code is simply the following:</p>
<pre lang="xml"><span class="code-keyword"><</span><span class="code-leadattribute">Window</span> <span class="code-attribute">x:Class</span><span class="code-keyword">="</span><span class="code-keyword">SpiderTreeControl.HostWindow"</span>
<span class="code-attribute">xmlns</span><span class="code-keyword">="</span><span class="code-keyword">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span>
<span class="code-attribute">xmlns:x</span><span class="code-keyword">="</span><span class="code-keyword">http://schemas.microsoft.com/winfx/2006/xaml"</span>
<span class="code-attribute">xmlns:diagram</span><span class="code-keyword">="</span><span class="code-keyword">clr-namespace:SpiderTreeControl.Diagram"</span>
<span class="code-attribute">WindowStartupLocation</span><span class="code-keyword">="</span><span class="code-keyword">CenterScreen"</span>
<span class="code-attribute">Title</span><span class="code-keyword">="</span><span class="code-keyword">HostWindow"</span> <span class="code-attribute">Height</span><span class="code-keyword">="</span><span class="code-keyword">400"</span> <span class="code-attribute">Width</span><span class="code-keyword">="</span><span class="code-keyword">400"</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-leadattribute">Grid</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-leadattribute">diagram:DragViewer</span> <span class="code-attribute">x:Name</span><span class="code-keyword">="</span><span class="code-keyword">dragViewer"</span>
<span class="code-attribute">Width</span><span class="code-keyword">="</span><span class="code-keyword">auto"</span> <span class="code-attribute">Height</span><span class="code-keyword">="</span><span class="code-keyword">auto"</span>
<span class="code-attribute">Margin</span><span class="code-keyword">="</span><span class="code-keyword">0"</span><span class="code-keyword">/</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">Grid</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">Window</span><span class="code-keyword">></span>
</pre>
<p>And then if we focus our attention to the actual <code>DragViewer</code>, where
we wrap a <code>DiagramViewer</code> within a <code>FrictionScrollViewer</code>.
</p>
<p>The <code>FrictionScrollViewer</code> is a specialized ScrollViewer that acts
using friction to create nice fluid drag operations. I talk more about this
on an older blog entry of mine, which you can read about using my blog entry
<a href="http://sachabarber.net/?p=225" target="_blank">http://sachabarber.net/?p=225</a></p>
<pre lang="xml"><span class="code-keyword"><</span><span class="code-leadattribute">UserControl</span> <span class="code-attribute">x:Class</span><span class="code-keyword">="</span><span class="code-keyword">SpiderTreeControl.Diagram.DragViewer"</span>
<span class="code-attribute">xmlns</span><span class="code-keyword">="</span><span class="code-keyword">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span>
<span class="code-attribute">xmlns:diagram</span><span class="code-keyword">="</span><span class="code-keyword">clr-namespace:SpiderTreeControl.Diagram;assembly="</span>
<span class="code-attribute">xmlns:x</span><span class="code-keyword">="</span><span class="code-keyword">http://schemas.microsoft.com/winfx/2006/xaml"</span>
<span class="code-attribute">Height</span><span class="code-keyword">="</span><span class="code-keyword">auto"</span> <span class="code-attribute">Width</span><span class="code-keyword">="</span><span class="code-keyword">auto"</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-leadattribute">diagram:FrictionScrollViewer</span> <span class="code-attribute">x:Name</span><span class="code-keyword">="</span><span class="code-keyword">sv"</span> <span class="code-attribute">Style</span><span class="code-keyword">="</span><span class="code-keyword">{StaticResource ScrollViewerStyle}"</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-leadattribute">diagram:DiagramViewer</span> <span class="code-attribute">x:Name</span><span class="code-keyword">="</span><span class="code-keyword">diagramViewer"</span> <span class="code-attribute">Margin</span><span class="code-keyword">="</span><span class="code-keyword">0"</span> <span class="code-attribute">Width</span><span class="code-keyword">="</span><span class="code-keyword">2000"</span> <span class="code-attribute">Height</span><span class="code-keyword">="</span><span class="code-keyword">2000"</span><span class="code-keyword">/</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">diagram:FrictionScrollViewer</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">UserControl</span><span class="code-keyword">></span>
</pre>
<p>The <code>Style</code> you see for the scrollbar is achieved using some Styles
which are located within the AppStyles.xaml <code>ResourceDictionary</code>. This is what gives the ScrollViewer its appearance as shown below:</p>
<p><img src="SpiderControl.aspx_files/Scroll.png" width="401" height="38"></p>
<p>But all of that is simple eye candy, we need to get to nuts and bolts. </p>
<h3>DragViewer class</h3>
<p>So going back to the <code>DragViewer</code>, which holds an instance of the
<code>DiagramViewer</code>. In code behind the <code>DragViewer</code> is responsible
for setting up the nodes collection that is used for its embedded <code>DiagramViewer</code>.</p>
<p>This is done is code as follows:</p>
<div class="SmallText" id="premain2" style="width: 100%; cursor: pointer;"><img preid="2" src="SpiderControl.aspx_files/minus.gif" id="preimg2" width="9" height="9"><span preid="2" style="margin-bottom: 0pt;" id="precollapse2"> Collapse</span></div><pre style="margin-top: 0pt;" id="pre2" lang="cs"><span class="code-keyword">using</span> System;
<span class="code-keyword">using</span> System.Collections.Generic;
<span class="code-keyword">using</span> System.Linq;
<span class="code-keyword">using</span> System.Text;
<span class="code-keyword">using</span> System.Windows;
<span class="code-keyword">using</span> System.Windows.Controls;
<span class="code-keyword">using</span> System.Windows.Data;
<span class="code-keyword">using</span> System.Windows.Documents;
<span class="code-keyword">using</span> System.Windows.Input;
<span class="code-keyword">using</span> System.Windows.Media;
<span class="code-keyword">using</span> System.Windows.Media.Animation;
<span class="code-keyword">using</span> System.Windows.Media.Imaging;
<span class="code-keyword">using</span> System.Windows.Navigation;
<span class="code-keyword">using</span> System.Windows.Shapes;
<span class="code-keyword">using</span> System.Windows.Threading;
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?