<?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>JAPF &#187; icollectionview</title>
	<atom:link href="http://www.japf.fr/tag/icollectionview/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.japf.fr</link>
	<description>Jeremy Alles Presentation Foundation: WPF, Silverlight, Windows Phone 7, Windows 8</description>
	<lastBuildDate>Fri, 27 Jan 2012 07:57:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Very simple MVVM demo application</title>
		<link>http://www.japf.fr/2009/02/very-simple-mvvm-demo-application/</link>
		<comments>http://www.japf.fr/2009/02/very-simple-mvvm-demo-application/#comments</comments>
		<pubDate>Sun, 01 Feb 2009 12:09:06 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[WPF]]></category>
		<category><![CDATA[icollectionview]]></category>
		<category><![CDATA[icommand]]></category>
		<category><![CDATA[model-view-viewmodel]]></category>
		<category><![CDATA[mvvm]]></category>
		<category><![CDATA[patterns]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=137</guid>
		<description><![CDATA[The last couple of days, I&#8217;ve been busy writing an article about MVVM in French. I don&#8217;t know yet if I&#8217;ll translate it to English, but I&#8217;m sure I can share the demo application, and this is the goal of this post ! I think the best way to understand how things fit together is [...]]]></description>
			<content:encoded><![CDATA[<p>The last couple of days, I&#8217;ve been busy writing an article about MVVM in French. I don&#8217;t know yet if I&#8217;ll translate it to English, but I&#8217;m sure I can share the demo application, and this is the goal of this post !</p>
<p>I think the best way to understand how things fit together is to explore the source code of the application.</p>
<p>It&#8217;s a very small demo because I wanted to demonstrate only a subset of MVVM facilities, so you&#8217;ll find:</p>
<ul>
<li>an easy way to work with commands in MVVM using Josh Smith RelayCommand class</li>
<li>the power of the ICollectionView interface to implement navigation and search feature</li>
<li>empty code-behind file for my views</li>
<li>a base class for all my ViewModel objects (again, based on the work of Josh)</li>
</ul>
<p style="text-align: center;"><img class="size-medium wp-image-139 aligncenter" title="mvvm-demo-1" src="http://www.japf.fr/wp-content/uploads/2009/02/mvvm-demo-1-300x116.png" alt="mvvm-demo-1" width="300" height="116" /></p>
<p style="text-align: center;"><img class="alignnone size-medium wp-image-140" title="mvvm-demo-2" src="http://www.japf.fr/wp-content/uploads/2009/02/mvvm-demo-2-300x116.png" alt="mvvm-demo-2" width="300" height="116" /></p>
<p style="text-align: left;">You can download the source code <a href="http://www.japf.fr/wp-content/uploads/2009/02/mvvmdemoapplication.zip">here</a>. Enjoy <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2009/02/very-simple-mvvm-demo-application/feed/</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>Filtering with or without ICollectionView ?</title>
		<link>http://www.japf.fr/2009/01/filtering-with-or-without-icollectionview/</link>
		<comments>http://www.japf.fr/2009/01/filtering-with-or-without-icollectionview/#comments</comments>
		<pubDate>Thu, 15 Jan 2009 20:06:43 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[WPF]]></category>
		<category><![CDATA[databinding]]></category>
		<category><![CDATA[filtering]]></category>
		<category><![CDATA[icollectionview]]></category>
		<category><![CDATA[mvvm]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=120</guid>
		<description><![CDATA[In my &#8220;Why should I use MVVM pattern&#8221; post, I gave a link to a post explaining the ICollectionView interface. This interface is very important in the MVVM methodology because it enables the possibility to track the selection of the user in ItemsControl based-controls (ListView, ListBox, ComboBox, TabControl&#8230;). The ICollectionView also enables the ViewModel to [...]]]></description>
			<content:encoded><![CDATA[<p>In my &#8220;Why should I use MVVM pattern&#8221; <a href="http://www.japf.fr/?p=90">post</a>, I gave a link to a post explaining the ICollectionView interface.</p>
<p>This interface is very important in the MVVM methodology because it enables the possibility to track the selection of the user in ItemsControl based-controls (ListView, ListBox, ComboBox, TabControl&#8230;). The ICollectionView also enables the ViewModel to perfom Sorting, Grouping and Filtering very easily (basically by using the Sort, Group and Filter properties).</p>
<p>In my project at work, I have a &#8220;Library&#8221; which lets the user choose an item in it, and drop it somewhere else in the application. There is around 200 items in the ListView, and because I wanted to leverage the ICollectionView interface, I used the Filter property to enable search functionality.Unfortunately, the performance was pretty poor and until now I didn&#8217;t find out what goes wrong. Each item in the ListView is rendered using a simple DataTemplate made of one Image and several TextBlock. Because the filtering was slow, I found another solution which is much faster. And thanks to the MVVM methodology, I found one quickly !</p>
<p>I added a IsVisible property to the ViewModel objects that are in the ListView.</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p120code3'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p1203"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code" id="p120code3"><pre class="csharp" style="font-family:monospace;">        <span style="color: #008080; font-style: italic;">/// &lt;summary&gt;</span>
        <span style="color: #008080; font-style: italic;">/// Gets or sets a value indicating whether this item is visible in the collection</span>
        <span style="color: #008080; font-style: italic;">/// &lt;/summary&gt;</span>
        <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #6666cc; font-weight: bold;">bool</span> IsVisible
        <span style="color: #008000;">&#123;</span>
            get <span style="color: #008000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> <span style="color: #0600FF; font-weight: bold;">this</span><span style="color: #008000;">.</span><span style="color: #0000FF;">isVisible</span><span style="color: #008000;">;</span> <span style="color: #008000;">&#125;</span>
            set
            <span style="color: #008000;">&#123;</span>
                <span style="color: #0600FF; font-weight: bold;">this</span><span style="color: #008000;">.</span><span style="color: #0000FF;">isVisible</span> <span style="color: #008000;">=</span> value<span style="color: #008000;">;</span>
                <span style="color: #0600FF; font-weight: bold;">this</span><span style="color: #008000;">.</span><span style="color: #0000FF;">OnPropertyChanged</span><span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;IsVisible&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
            <span style="color: #008000;">&#125;</span>
        <span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<p>This IsVisible property is toggled when the search is performed: I iterate over the ObservableCollection of items, and change the IsVisible property regarding whether the item match the search text or not. In the View, I setup a simple style for my ListViewItem that databound the IsVisible property to the visibility property (using the BooleanToVisiblity converter included in the framework).</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p120code4'); return false;">View Code</a> XML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p1204"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p120code4"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;ListView</span> <span style="color: #000066;">ItemsSource</span>=<span style="color: #ff0000;">&quot;{Binding Items}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;ListView.ItemContainerStyle<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Style<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Setter</span> <span style="color: #000066;">Property</span>=<span style="color: #ff0000;">&quot;Visibility&quot;</span> <span style="color: #000066;">Value</span>=<span style="color: #ff0000;">&quot;{Binding Path=IsVisible, Converter={StaticResource BooleanToVisibility}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Style<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ListView.ItemContainerStyle<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ListView<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>Now the filtering is much faster. I don&#8217;t know what could slow down the performance of the filtering using the ICollectionView interface.</p>
<p>If you have any idea, I&#8217;d be glad to know. If on the other hand you&#8217;re dealing with performance issue too, you might try my solution <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2009/01/filtering-with-or-without-icollectionview/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

