<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>emphess .NET &#187; TreeView</title>
	<atom:link href="http://www.emphess.net/tag/treeview/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.emphess.net</link>
	<description>Christoph Menge&#039;s Blog</description>
	<lastBuildDate>Tue, 15 Jun 2010 00:50:30 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Applying ItemContainerStyle Recursively</title>
		<link>http://www.emphess.net/2008/04/07/applying-itemcontainerstyle-recursively/</link>
		<comments>http://www.emphess.net/2008/04/07/applying-itemcontainerstyle-recursively/#comments</comments>
		<pubDate>Mon, 07 Apr 2008 18:23:20 +0000</pubDate>
		<dc:creator>Christoph Menge</dc:creator>
				<category><![CDATA[Software]]></category>
		<category><![CDATA[Custom Controls]]></category>
		<category><![CDATA[TreeView]]></category>
		<category><![CDATA[WPF]]></category>

		<guid isPermaLink="false">http://www.emphess.net/?p=25</guid>
		<description><![CDATA[In the MenuKiller Control, I need to configure a TreeView to quite some extent: I want all nodes to have a certain custom ItemContainerStyle. 
First naive approach: The TreeView will apply its ItemContainerStyle to all nodes. Wrong! The TreeViewItems themselves are ItemControls, therefore having their own ItemContainerStyle.
Second approach: Have the ItemContainerStyle refer to itself using [...]]]></description>
			<content:encoded><![CDATA[<p>In the <a href="http://www.emphess.net/2008/04/07/the-menukiller-control-differentiated-ux/">MenuKiller Control</a>, I need to configure a <code>TreeView</code> to quite some extent: I want all nodes to have a certain custom <code>ItemContainerStyle</code>. </p>
<p>First naive approach: The <code>TreeView</code> will apply its <code>ItemContainerStyle</code> to all nodes. <b>Wrong!</b> The <code>TreeViewItem</code>s themselves are <code>ItemControl</code>s, therefore having their own <code>ItemContainerStyle</code>.</p>
<p>Second approach: Have the <code>ItemContainerStyle</code> refer to itself using a <code>DynamicResource</code>:</p>
<div>
<pre class="brush: xml">
&lt;Style x:Key=&quot;MKItemStyle&quot; TargetType=&quot;{x:Type local:MenuKillerItem}&quot;&gt;
    &lt;Setter Property=&quot;Template&quot; Value=&quot;{StaticResource MenuKillerItemTemplate}&quot;/&gt;
    &lt;Setter Property=&quot;ItemContainerStyle&quot; Value=&quot;{DynamicResource MKItemStyle}&quot;/&gt;
&lt;/Style&gt;
</pre>
</div>
<p><b>Wrong again!</b> This does not work. Frankly, I don&#8217;t know why, but I didn&#8217;t bother to debug it. </p>
<p>There are quite some articles on customizing <code>TreeView</code>s the net, for example Josh Smith&#8217;s article <a href="http://www.codeproject.com/KB/WPF/CustomTreeViewLayout.aspx">&#8220;Custom TreeView Layout in WPF&#8221;</a> at the CodeProject. There didn&#8217;t seem to be any such problem&#8230; So what&#8217;s the catch?</p>
<h4>A Simple Solution?</h4>
<p>So what is it all about? In the source code accompanying Josh&#8217;s article, we find the following declaration:</p>
<pre class="brush: xml">
&lt;!-- This Style redefines the ControlTemplate used by TreeViewItems and
       also provides a different itemspanel for their child items. --&gt;
&lt;Style TargetType=&quot;TreeViewItem&quot;&gt;
  [...]
&lt;/Style&gt;
</pre>
<p>So this will simply apply the defined style to each and every item of the TargetType.<br />
<b>Done!</b>.</p>
<p>There are some drawbacks, though: In a small application, this might be OK, but it may result in problems with larger applications or control libraries. One simple trick, of course, is to create a custom control which derives from the control you want, and apply a default style to this derived type (I currently do this for the <code>MenuKillerItem</code>, which derives from <code>TreeViewItem</code>).</p>
<p>Yet, this solution is not well-templateable either. Users of a control library might want to override the default template only for children of a specific control, which is not possible this way.</p>
<p>Of course, one can write a recursive method to apply the style, but I doubt this is the cleanest solution. Any better ideas?</p>
<div style="float: right;"><p align="right"><a rel="nofollow" class="tt" href="http://twitter.com/home/?status=Applying+ItemContainerStyle+Recursively+http://bit.ly/cBCIpk" title="Post to Twitter"><img class="nothumb" src="http://www.emphess.net/wp-content/plugins/tweet-this/icons/tt-twitter2.png" alt="Post to Twitter" /></a> <a rel="nofollow" class="tt" href="http://delicious.com/post?url=http://www.emphess.net/2008/04/07/applying-itemcontainerstyle-recursively/&amp;title=Applying+ItemContainerStyle+Recursively" title="Post to Delicious"><img class="nothumb" src="http://www.emphess.net/wp-content/plugins/tweet-this/icons/tt-delicious.png" alt="Post to Delicious" /></a> <a rel="nofollow" class="tt" href="http://digg.com/submit?url=http://www.emphess.net/2008/04/07/applying-itemcontainerstyle-recursively/&amp;title=Applying+ItemContainerStyle+Recursively" title="Post to Digg"><img class="nothumb" src="http://www.emphess.net/wp-content/plugins/tweet-this/icons/tt-digg.png" alt="Post to Digg" /></a> <a rel="nofollow" class="tt" href="http://www.facebook.com/share.php?u=http://www.emphess.net/2008/04/07/applying-itemcontainerstyle-recursively/&amp;t=Applying+ItemContainerStyle+Recursively" title="Post to Facebook"><img class="nothumb" src="http://www.emphess.net/wp-content/plugins/tweet-this/icons/tt-facebook.png" alt="Post to Facebook" /></a></p></div>]]></content:encoded>
			<wfw:commentRss>http://www.emphess.net/2008/04/07/applying-itemcontainerstyle-recursively/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
