tag:blogger.com,1999:blog-279181592024-03-04T22:28:22.801-08:00The Joy Of ProgrammingJobi Joy - User experience development on Windows Phone, Windows 8, Silverlight and WPFJobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.comBlogger37125tag:blogger.com,1999:blog-27918159.post-79886607999506471292011-05-13T23:32:00.000-07:002011-05-14T14:26:29.207-07:00WP7Dev Tip 2– Few things to remember on Image handling<div dir="ltr" style="text-align: left;" trbidi="on">Image handling is an important factor deciding the performance as well as usability of any application. When it comes to Windows Phone 7 it is even more important because of the limited network conditions and the low processing power as compared to PC.<br />
Here is the video I am talking about the same things with a Bing Search sample in <a href="http://channel9.msdn.com/Shows/SilverlightTV/Silverlight-TV-72-Windows-Phone-Tips-for-Loading-Images">Silverlight TV show</a><br />
<iframe frameborder="0" scrolling="no" src="http://channel9.msdn.com/Shows/SilverlightTV/Silverlight-TV-72-Windows-Phone-Tips-for-Loading-Images/player?w=512&h=288" style="height: 288px; width: 512px;"></iframe><br />
<br />
I am just listing down few common tips which can greatly improve the performance and effectiveness of your application. And also please note that some of the points might not be applicable for certain applications especially for very small apps.<br />
<ul><li>Use JPEG instead of PNG whenever possible – Jpeg decodes faster than PNG image. If there is no transparency needed, use Jpeg with a compromised quality </li>
<li><strong>Optimize your static Image quality</strong> : Medium quality compressed Jpeg requires less memory to render as compared to a full quality Jpeg. So there is a big savings in memory and performance, if we can compromise on the Jpeg quality slightly. I am pasting two images below, one is 100% and the other is 97% quality, you can hardly make out the difference so the gist of it from a file size perspective is that the 97% one takes only half the size of the 100% image(108KB and 58Kb) ( of course the size and compression varies depends on the color information of the images). Now if you have got so many static images in the project, this trick can <strong><em>reduce the XAP file size considerably smaller</em></strong> as well as runtime memory usage will be quite less. You can consider this tip when you use large background images like Page/Panorama/Pivot background or splash screen images etc.. </li>
</ul> <a href="http://lh5.ggpht.com/_Q_BibWE3zeg/TcuaU11SdwI/AAAAAAAANbg/PbP0_VkzT6w/s1600-h/Penguins3.jpg"><img alt="Penguins" border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6RBtiB6kqC4EM1_XLPkuelC6Bp-mX72FWMkNr8c80SIkl0p_HkPJbEeSv1wkEERwF5gBKGPpuHer9XFgi7JkOIdCQ3u1SXygU2Q5keN6fjVNlwMSJdRZa3me6GDotz42Sy5PbLg/?imgmax=800" style="background-image: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Penguins" width="244" /></a> <a href="http://lh5.ggpht.com/_Q_BibWE3zeg/TcuaVruTIvI/AAAAAAAANbo/1kj3a8mCi4A/s1600-h/Penguins972.jpg"><img alt="Penguins97" border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjASywub8uk9ED_ckJxYJ_oEdX7xbGXgN3q02juiZ3xLYEhPKH317u5WGKBqoV0vCU4RliDi4eL7oGmyYOUIi4ZxAhoIty8yQmt_Dcg-iJqxjdczTWWqkFZxHVXKLpSbUnAP6MPiQ/?imgmax=800" style="background-image: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Penguins97" width="244" /></a><br />
<ul><li>Use images instead of complex gradients or vector graphics(XAML). </li>
<li><strong><em>Never</em></strong> <b><i>bind server-hosted images directly to the <Image> control</i></b>, because Silverlight runtime will use the UI thread (using WebClient) to fetch that image from the server, that can make the UI unresponsive for some time. </li>
<li>Use a background thread and <em>HttpWebRequest</em> class based implementation to download the image data in an efficient way which finally creates <em>BitmapImage</em> and sets that as the source. A clean MVVM wrapper around this would make your entire Image management pretty easy. </li>
<li>When large scrollable list boxes need preview again don’t use vector/gradients instead use small Jpeg/png, that helps the system level caching effectively and improve the performance of scrolling. </li>
<li><strong>Never let any image downloads happening while scrolling</strong> : Image downloading on long <em>Listboxes</em> should be controlled by the ScrollViewer state and position to optimize the network activity and also it would be effective to download the images in a queue based background thread system. This will ensure scrolling performance by downloading only the visible set of images, that too only when the scrolling activity stops. </li>
</ul><blockquote>In the below code snippet I have a collection of ViewModel instances bound to a ListBox and the ListBox has a ScrollViewer in its control template. We need to do two things to make sure there is no unnecessary image download happening <em><strong>1) Detect the scroll stop event 2) Calculate the scroll position</strong></em> to find out the range of items which are visible to the user. Our aim is to just download the images associated with the ViewModels of that particular range when the scroll operation stops.<br />
I am using the code snippet from <a href="http://blogs.msdn.com/b/ptorr/archive/2010/07/23/how-to-detect-when-a-list-is-scrolling-or-not.aspx" target="_blank">Peter Torr’s blog</a> for detecting the Scroll state and applying some easy math to find out the index range. Here I am assuming my <em>Collection</em> class has some method to do the Queued image download in background thread with the signature <strong><em>void LoadImages(int startIndex, int count)</em></strong><br />
In the code snippet you can also see the place where we can detect the scroll end. That is very useful for pagination scenarios to download the next set of data from the service.</blockquote> <a href="http://lh4.ggpht.com/_Q_BibWE3zeg/TcuaWZ9PJoI/AAAAAAAANb4/iL2_trtgPrA/s1600-h/image%5B8%5D.png"><img alt="image" border="0" height="708" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXkd1UMIUe52GYa7-U_r4nlz1SIG4zSjfUdzTriPwYaXCvDkYq0IyoeCYDFhl4siW_aHSheur1M3ERjJWYTuXZ67ZTxhmWF_2qw_5aXgXYSHCqV5_3CA6pPmP3XtTaz2uuERmCA/?imgmax=800" style="background-image: none; border: 0px currentColor; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="1024" /></a><br />
<br />
Please take a look at the <a href="http://www.ria-labs.com/Resources/download.php?file=ImageHandling_SampleWP7.zip" target="_blank"><span style="color: #2d8930; font-size: large;">source code</span></a>, that shows the image download in a background thread and the visible range of visuals getting downloaded when we stop scrolling.<br />
<br />
Have fun with Wp7 development!</div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com14tag:blogger.com,1999:blog-27918159.post-24725959252425718492011-03-21T00:33:00.001-07:002011-04-22T10:09:46.110-07:00WP7Dev Tip 1– Optimizing the app by reusing already created visuals<div dir="ltr" style="text-align: left;" trbidi="on">Developing a good application in the phone need not be accompanied with so much of hacking around or doing lot of non-conventional tricks. Most of the time those tricks make us deviate from the regular ways of development, make the code ugly and unmaintainable. If we can get a sense of the pain-points and limitations of the platform early, then find a way around it and separate those concerns out of your business logic so as to proceed with a smooth development. I am explaining a pretty basic yet useful idea of how to reuse the complex visuals you have already created in previous pages of the application at runtime. <strong><em>Please note that this may not be applicable to small applications involving two or three pages of total navigation.</em></strong><br />
<strong>Problem</strong> : Imagine you have an application which needs to navigate to the same view over and over again. For example the Movie details page of IMDb or Netflix app, or profile page of Facebook or Twitter, those pages get called many times in the life span of an application instance. If we approach it in a standard way of putting a Panorama/Pivot inside a <em>PhoneApplicationPage</em> say <em>MovieDetails.xaml</em>, then each time we go to that page, creates a new instance of the page. Also it creates totally new Pano/Pivot in the visual tree under that page and when you navigate away, that gets pushed to the navigation stack. Suppose this pano when it gets rendered takes up 20MB( IMDb app got more good resolution images in a pano and one MovieDetails took around 20MB to render), so when we navigate to 5 different movies the app holds up a 100MB memory footprint. Since Garbage collection is a lazy operation, that memory wont get easily released. And as you know the platform will kill the app because it reached an unacceptable memory level. <br />
<strong>Solution</strong> : So now we are clear on one thing, we don’t need to recreate that pano over and over. Because when the first movie details showed up the system did a hard job of creating all those visuals in memory. So it is a matter or showing that pano visual again with a totally different Movie as its new DataContext. <br />
<strong>Technical Solution</strong> : It is pretty easy to solve this by treating the <em>PhoneApplicationPage</em> as merely a Content placeholder. We can do it in many ways, in my design I have kept only one xaml phonepage and put a special Layout panel (say Grid) in it. And depending on the ViewModel type to be displayed we can always instantiate a DataTemplate(<em>the Pano will be a MovieDetailsDataTemplate in this case</em>) and add that UIElement in to the layout. This operation can be at the <em>PhoneApplicationPage.NavigatedTo()</em> override. Now when this page is navigated away (<em>NavigatedFrom()</em>) we can easily remove that particular UIElement from the layout/page and keep it in the memory. So the next time when it demands a similar view, it will just get loaded back from the memory on to another page instance. This way, all the page instances going to the navigation stack would be pretty much a ‘dummy’ container and wouldn’t hold up any memory at all. <br />
<strong>Result</strong> : With out this approach we could go only 5 or 6 ‘Movie –> Actor –> Movie’ loops, now we can do 100s of page navigations on that movie-actor loop ( Check out the <a href="http://redirect.zune.net/External/LaunchZuneProtocol.aspx?pathuri=navigate%3FphoneAppID%3Dff971299-eed8-df11-a844-00237de2db9e" target="_blank">IMDb app</a>)<br />
And there are many other advantages of keeping a single <em>PhoneapplicationPage</em> class for the entire app, I will be explaining it in my next blog</div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com6tag:blogger.com,1999:blog-27918159.post-64412936855926699622010-09-15T08:45:00.001-07:002010-09-15T22:43:37.941-07:00An easy Windows Phone 7 Photo Viewer using Pivot control #WP7 Tip<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:54ae2c0d-9c18-4424-a06e-23eb2539a581" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/WP7" rel="tag">WP7</a>,<a href="http://technorati.com/tags/Windows+Phone+7" rel="tag">Windows Phone 7</a>,<a href="http://technorati.com/tags/XAML" rel="tag">XAML</a>,<a href="http://technorati.com/tags/Pivot" rel="tag">Pivot</a></div> <p><a href="http://lh6.ggpht.com/_Q_BibWE3zeg/TJDqL9mGQpI/AAAAAAAANUk/g69-oK4eSbw/s1600-h/photoviewer%5B4%5D.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="photoviewer" border="0" alt="photoviewer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsoVNfhTFHhWzOu4YGaVaVukfpZ1nyWB5Jnv5W3XTCkuEnB4pLVwsCkeCbvs3xcEAASVwOCe0l88jHDEm_8herkgzv32lEBZSv76WKHsmC-tNWG1MxzCjWtVUaj6jSBi0VyD9EpQ/?imgmax=800" width="559" height="317" /></a>  <strong><a href="http://www.ria-labs.com/Resources/download.php?file=PhotoViewerUsingPivot.zip">Source Code</a></strong> </p> <p>Here is a small trick using the Pivot control for a Photo viewing experience. Imagine a Pivot control with out any header and the image as Pivot items. Yes it is that easy :). Since the Pivot supports for the Phone orientation you can enjoy the picture viewing both in Portrait and Landscape. I am giving step by step info if you are totally new to WP7 and XAML styling.</p> <p>And please note that the performance wont be that great if you have many images in the Pivot control. So you may need to do design that around or use some tricks to clean up the memory well. </p> <p>1) Place a Pivot control and override the Style. What we wanted is to take out all the Header Templates and other extra puddings.</p> <blockquote> <p>        <Style x:Key="emptyPivot" TargetType="controls:Pivot"> <br />            <Setter Property="Template"> <br />                <Setter.Value> <br />                    <ControlTemplate TargetType="controls:Pivot"> <br />                        <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> <br />                            <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" /> <br />                        </Grid> <br />                    </ControlTemplate> <br />                </Setter.Value> <br />            </Setter> <br />        </Style></p> </blockquote> <p>2) Override the ItemContainerStyle and place Image control for displaying Photo.</p> <p>      <Style x:Key="PhotoVieweritemStyle" TargetType="controls:PivotItem">            <br />         <Setter Property="Template"> <br />             <Setter.Value> <br />                 <ControlTemplate TargetType="controls:PivotItem"> <br />                     <Image Source="{Binding}"/> <br />                 </ControlTemplate> <br />             </Setter.Value> <br />         </Setter> <br />     </Style></p> <p>3) Add ItemsSource Binding to the Pivot control with your Photo Collection. </p> <blockquote> <p>        <controls:Pivot <br />             ItemsSource="{Binding YourImageCollection}" <br />             Style="{StaticResource emptyPivot}" <br />             ItemContainerStyle="{StaticResource PhotoVieweritemStyle}" />     <br /></p> <p> </p> <p>Happy WP7 Coding!!!</p></blockquote> Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com10tag:blogger.com,1999:blog-27918159.post-6912375385821995572010-03-11T00:25:00.001-08:002010-09-01T13:51:28.283-07:00UniformGrid for Silverlight<div class="wlWriterEditableSmartContent" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:821ca3a5-8ea4-42ef-b87f-866be05c9c7a" style="display: inline; float: none; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Technorati Tags: <a href="http://technorati.com/tags/Silverlight+CustomPanel+XAML+UniformGrid+WPF" rel="tag">Silverlight CustomPanel XAML UniformGrid WPF</a></div>My recent Silverlight project had a need to distribute the items in rows and columns. I had to dynamically calculate the number of columns and rows it needed based on some logic. So it was clear that I need UniformGrid as in WPF so that I can bind my ViewModel properties to Rows and Columns properties of the Panel. But it was a bit surprising to me that there isn’t a Silverlight UniformGrid either in Silverlight SDK or in Silverlight ToolKit. So here is one I ported from WPF. Check out the Silverlight 3.0 demo below.<br />
<object data="data:application/x-silverlight-2," height="325" type="application/x-silverlight-2" width="780"> <param name="source" value="http://ria-labs.com/silverlight/samples/SL_Xaps/UniformGrid.xap"><param name="background" value="white"><param name="minRuntimeVersion" value="3.0.40818.0"><param name="autoUpgrade" value="true"><a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none" /> </a> </object><iframe id="_sl_historyFrame" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; height: 0px; visibility: hidden; width: 0px;"></iframe><br />
You can also download the <a href="http://www.ria-labs.com/Resources/download.php?file=UniformGrid.zip" target="_blank">sample project</a>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com3tag:blogger.com,1999:blog-27918159.post-58689021056230327922010-03-04T02:12:00.001-08:002010-03-11T11:25:07.239-08:00A Simple Accordion banner using ListBox<p><object data="data:application/x-silverlight-2," type="application/x-silverlight-2" height="325" width="780"> <param name="source" value="http://ria-labs.com/silverlight/samples/SL_Xaps/SimpleAccordion.xap"> <param name="background" value="white"> <param name="minRuntimeVersion" value="3.0.40818.0"> <param name="autoUpgrade" value="true"> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none" /> </a> </object><iframe style="border-right-width: 0px; width: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; visibility: hidden; border-left-width: 0px" id="_sl_historyFrame"></iframe></p> <p>This sample is to show how easily we can create an Image-accordion entirely in Expression Blend. This is utilizing the ListBox’s Selected and UnSelected VisualStates. Place a ListBox and override its ItemContainerStyle then adjust the width on the <em>Selected</em> and <em>UnSelected</em> visual states. When we override the ItemsPanel we can make it orientation to Horizontal on the StackPanel. Pretty easy and there is no C# needed. Paste the below XAML in your user control</p> <p><UserControl.Resources> <br /> <ItemsPanelTemplate x:Key="ItemsPanelTemplate1"> <br /> <StackPanel Orientation="Horizontal"/> <br /> </ItemsPanelTemplate> <br /> <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem"> <br /> <Setter Property="Template"> <br /> <Setter.Value> <br /> <ControlTemplate TargetType="ListBoxItem"> <br /> <Grid x:Name="grid" Background="{TemplateBinding Background}" Width="55"> <br /> <VisualStateManager.VisualStateGroups> <br /> <VisualStateGroup x:Name="SelectionStates"> <br /> <VisualState x:Name="Unselected"> <br /> <Storyboard> <br /> <DoubleAnimation Duration="0:0:0.3" To="55" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid" > <br /> <DoubleAnimation.EasingFunction> <br /> <ElasticEase EasingMode="EaseIn" Springiness="6" Oscillations="0"/> <br /> </DoubleAnimation.EasingFunction> <br /> </DoubleAnimation> <br /> </Storyboard> <br /> </VisualState> <br /> <VisualState x:Name="SelectedUnfocused"> <br /> <Storyboard> <br /> <DoubleAnimation Duration="0:0:0.3" To="500" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid" > <br /> <DoubleAnimation.EasingFunction> <br /> <ElasticEase EasingMode="EaseIn" Springiness="6" Oscillations="0" /> <br /> </DoubleAnimation.EasingFunction> <br /> </DoubleAnimation> <br /> </Storyboard> <br /> </VisualState> <br /> </VisualStateGroup> <br /> </VisualStateManager.VisualStateGroups> <br /> <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/> <br /> <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/> <br /> </Grid> <br /> </ControlTemplate> <br /> </Setter.Value> <br /> </Setter> <br /> </Style> <br /> </UserControl.Resources> </p> <p> <Grid x:Name="LayoutRoot" Background="#FFAFAFAF" Margin="10"> <br /> <ListBox SelectedIndex="0" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" BorderBrush="{x:Null}" Background="{x:Null}" VerticalAlignment="Center" HorizontalAlignment="Center" Height="285" Margin="10"> <br /> <Image Source="B.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/> <br /> <Image Source="A.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/> <br /> <Image Source="C.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/> <br /> <Image Source="D.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/> <br /> <Image Source="E.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/> <br /> </ListBox> <br /> </Grid></p>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com1tag:blogger.com,1999:blog-27918159.post-9775636387314040552010-03-04T01:03:00.001-08:002010-03-11T11:25:31.220-08:00Button Style - Silverlight<p>Really surprised to see from the google analytics that one of my old post regarding <a href="http://jobijoy.blogspot.com/2008/07/cool-control-template-for-wpf-button.html" target="_blank">WPF control template</a> still has many viewers . So I just thought of creating a Silverlight version of the same. All the buttons are from the same style with different Button.Background, the elliptical one has less height and more width on it.</p> <p></p> <div id="silverlightControlHost"><object data="data:application/x-silverlight-2," type="application/x-silverlight-2" height="195" width="700"> <param name="source" value="http://ria-labs.com/silverlight/samples/SL_Xaps/ButtonStyle1.xap"> <param name="background" value="white"> <param name="minRuntimeVersion" value="3.0.40818.0"> <param name="autoUpgrade" value="true"> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none" /> </a> </object><iframe style="border-right-width: 0px; width: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; visibility: hidden; border-left-width: 0px" id="_sl_historyFrame"></iframe></div> <p></p> <p>If you want to check out the XAML, please download from <a href="http://www.ria-labs.com/Resources/download.php?file=ButtonStyle1.zip" target="_blank">here</a></p>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com2tag:blogger.com,1999:blog-27918159.post-82081129894164008652009-08-04T13:37:00.001-07:002009-08-04T21:07:09.826-07:00Silverlight 3 Multi-Touch with Windows 7 and HP Touch Smart.<p>Inspired by the blog <strong><a href="http://timheuer.com/blog/archive/2009/07/30/silverlight-3-multi-touch-introduction-fundamentals-basics.aspx">Silverlight 3 Multi-touch: The Basics</a></strong> by <a href="http://timheuer.com/blog/">Tim Heuer</a>, I thought of experimenting with it and creating a small sample. The logic is pretty simple, I have used <em>TranslateTranform</em> and <em>ScaleTranform</em> to do the movement and scaling respectively. When the <a href="http://msdn.microsoft.com/en-us/library/system.windows.input.touchaction(VS.95).aspx">TouchAction</a> is Move we can distinguish whether it is a single touch or multi touch from the TouchPointCollection count. When it is a double touch you can calculate the change of distance between the two touch points and transform that as ScaleTransform of the Visual. Please watch the video, I shot on <a href="http://www.identitymine.com/">my office</a> HP Touch smart machine. </p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 444px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:771658ec-d4ee-4f4c-98c0-2f68ec03e665" class="wlWriterEditableSmartContent"><div id="0359395a-bcb4-48f1-a622-6eed19a0a4bc" style="margin: 0px; padding: 0px; display: inline;"><div><object width="444" height="333"><param name="movie" value="http://www.youtube.com/v/eaVPkC0GvgM&hl=en"></param><embed src="http://www.youtube.com/v/eaVPkC0GvgM&hl=en" type="application/x-shockwave-flash" width="444" height="333"></embed></object></div></div></div> <p>Have you got a multi-touch monitor?, then run the application <strong><a href="http://ria-labs.com/silverlight/samples/SL_multitouch/multitouch.html">here</a></strong> and feel the Silverlight touch. You can set your browser in Full-Screen mode to get a good experience. Please note that the current Silverlight version doesn't accept Touch inputs while running in Silverlight full screen mode(ie, App.Current.Host.Content.IsFullScreen =true). You can read more on Silverlight multi touch on <a href="http://msdn.microsoft.com/en-us/library/dd894494(VS.95).aspx">MSDN</a></p> <p><b><a href="http://ria-labs.com/silverlight/samples/SL_multitouch/multitouch.html">Click here to run the application</a></b></p><p><a href="http://ria-labs.com/silverlight/samples/SL_multitouch/multitouch.html"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/_Q_BibWE3zeg/SnicBIWxkhI/AAAAAAAAMn0/X1Ne8qu9T_Q/image%5B9%5D.png?imgmax=800" width="621" height="441" /></a></p>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com7tag:blogger.com,1999:blog-27918159.post-62621456659932929442009-07-30T19:17:00.001-07:002009-11-03T18:59:27.618-08:00Slider Preview as Expression Blend 3 Behavior<p>Behaviors is one of the new features <a href="http://www.microsoft.com/expression/products/Blend_Overview.aspx">Expression blend 3</a> has introduced to make interactivity easy. Behavior allows us to wrap the interaction logic as a very discrete unit and attach to any UI elements. My previous <a href="http://jobijoy.blogspot.com/2009/07/attaching-preview-behavior-to-wpf.html">blog post about Attaching preview behavior to a Slider control</a>, is a good scenario to make as a Behavior. I have used Attached Dependency property as a technique to make it happen in the earlier post, though the concept is almost same but Blend Behavior gives a neat and clean abstraction. It also allows a Blend user to just drag-drop to any Slider control. So this is a great functionality which helps boost the re-usability in a cool way.</p><p><strong>Problem : Create a behavior to display the value of a Slider control when hover over.</strong></p><p>First step is to make a class which derived from Behavior class.<em> public class PreviewSliderBehaviour : Behavior<Slider></em> Here I am explicitly giving <strong><em>Slider</em></strong> class as my targeted UI Element type since this behavior is meaningless to other elements. Now we need to override two methods of Behavior class, <em>protected override void OnAttached()</em> and <em>protected override void OnDetaching()</em> . I can subscribe mouse events in the <em>OnAttached()</em> method and unsubscribe the same in the <em>OnDetaching()</em> method.</p><pre class="csharpcode"><span class="Apple-style-span" style="font-size:small;"> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">protected</span></span><span class="Apple-style-span" style="font-size:x-small;"> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">override</span></span><span class="Apple-style-span" style="font-size:x-small;"> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">void</span></span><span class="Apple-style-span" style="font-size:x-small;"> OnAttached()<br /> {<br /> m_attachedObject = AssociatedObject;</span><span class="rem"><span class="Apple-style-span" style="font-size:x-small;">// Gives you the instance of the Slider you attached this behavior on to</span></span><span class="Apple-style-span" style="font-size:x-small;"><br /><br /> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">if</span></span><span class="Apple-style-span" style="font-size:x-small;"> (m_attachedObject != </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">null</span></span><span class="Apple-style-span" style="font-size:x-small;">)<br /> { <br /> m_attachedObject.PreviewMouseMove += </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">new</span></span><span class="Apple-style-span" style="font-size:x-small;"> System.Windows.Input.MouseEventHandler(item_PreviewMouseMove);<br /> m_attachedObject.MouseLeave += </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">new</span></span><span class="Apple-style-span" style="font-size:x-small;"> System.Windows.Input.MouseEventHandler(item_MouseLeave);<br /> }<br /> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">base</span></span><span class="Apple-style-span" style="font-size:x-small;">.OnAttached();<br /> }<br /> </span><span class="rem"><span class="Apple-style-span" style="font-size:x-small;">/// Called when the behavior is removed from the DependencyObject</span></span><span class="Apple-style-span" style="font-size:x-small;"><br /> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">protected</span></span><span class="Apple-style-span" style="font-size:x-small;"> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">override</span></span><span class="Apple-style-span" style="font-size:x-small;"> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">void</span></span><span class="Apple-style-span" style="font-size:x-small;"> OnDetaching()<br /> {<br /> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">if</span></span><span class="Apple-style-span" style="font-size:x-small;"> (m_attachedObject != </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">null</span></span><span class="Apple-style-span" style="font-size:x-small;">)<br /> {<br /> m_attachedObject.PreviewMouseMove -= </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">new</span></span><span class="Apple-style-span" style="font-size:x-small;"> System.Windows.Input.MouseEventHandler(item_PreviewMouseMove);<br /> m_attachedObject.MouseLeave -= </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">new</span></span><span class="Apple-style-span" style="font-size:x-small;"> System.Windows.Input.MouseEventHandler(item_MouseLeave);<br /> }<br /> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">base</span></span><span class="Apple-style-span" style="font-size:x-small;">.OnDetaching();<br /> }</span></pre><p>The important logic lies in the MouseMove handler, it creates a <em>ContentAdorner</em>(a custom adorner, you can see in the <a href="http://www.ria-labs.com/Resources/download.php?file=PreviewSliderBehavior.zip">source code</a>) and sets the value calculated here to the <em>ContentAdorner</em>.<em>Content property</em>. This also sets the <em>ContentAdorner’s</em> placement point to the mouse point so that the adorner moves along with the mouse move.</p><pre class="csharpcode"><span class="Apple-style-span" style="font-size:x-small;"> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">void</span></span><span class="Apple-style-span" style="font-size:x-small;"> item_PreviewMouseMove(</span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">object</span></span><span class="Apple-style-span" style="font-size:x-small;"> sender, System.Windows.Input.MouseEventArgs e)<br /> {<br /> Slider slider = sender </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">as</span></span><span class="Apple-style-span" style="font-size:x-small;"> Slider;<br /> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">if</span></span><span class="Apple-style-span" style="font-size:x-small;"> (popup == </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">null</span></span><span class="Apple-style-span" style="font-size:x-small;">)<br /> {<br /> </span><span class="rem"><span class="Apple-style-span" style="font-size:x-small;">//Creates a new ContentAdorner with the given Style, Content Style is a Dependancy property of this behaviour</span></span><span class="Apple-style-span" style="font-size:x-small;"><br /> popup = </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">new</span></span><span class="Apple-style-span" style="font-size:x-small;"> ContentAdorner(slider, ContentStyle);<br /> AdornerLayer layer = AdornerLayer.GetAdornerLayer(slider);<br /> layer.Add(popup);<br /> }<br /> popup.Visibility = Visibility.Visible;<br /> </span><span class="rem"><span class="Apple-style-span" style="font-size:x-small;">//Finding out the PART_Track from the controltemplate of the Slider</span></span><span class="Apple-style-span" style="font-size:x-small;"><br /> Track _track = slider.Template.FindName(</span><span class="str"><span class="Apple-style-span" style="font-size:x-small;">"PART_Track"</span></span><span class="Apple-style-span" style="font-size:x-small;">, slider) </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">as</span></span><span class="Apple-style-span" style="font-size:x-small;"> Track;<br /> </span><span class="rem"><span class="Apple-style-span" style="font-size:x-small;">//Calculates the mouse position</span></span><span class="Apple-style-span" style="font-size:x-small;"><br /> Point position = e.MouseDevice.GetPosition(_track);<br /> </span><span class="rem"><span class="Apple-style-span" style="font-size:x-small;">//This method gives the exact preview value of the Slider </span></span><span class="Apple-style-span" style="font-size:x-small;"><br /> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">double</span></span><span class="Apple-style-span" style="font-size:x-small;"> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">value</span></span><span class="Apple-style-span" style="font-size:x-small;"> = _track.ValueFromPoint(position);<br /> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">if</span></span><span class="Apple-style-span" style="font-size:x-small;"> (slider.SmallChange != 0.0)<br /> {<br /> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">double</span></span><span class="Apple-style-span" style="font-size:x-small;"> diff = </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">value</span></span><span class="Apple-style-span" style="font-size:x-small;"> % slider.SmallChange;<br /> </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">value</span></span><span class="Apple-style-span" style="font-size:x-small;"> -= diff;<br /> }<br /> </span><span class="rem"><span class="Apple-style-span" style="font-size:x-small;">//Setting the value as the content of the ContentAdorner</span></span><span class="Apple-style-span" style="font-size:x-small;"><br /> popup.Content = Math.Max(slider.Minimum, Math.Min(slider.Maximum, </span><span class="kwrd"><span class="Apple-style-span" style="font-size:x-small;">value</span></span><span class="Apple-style-span" style="font-size:x-small;">));<br /> position = e.GetPosition(slider);<br /> position.Y = slider.ActualHeight / 2.0;<br /> popup.PlacementOffset = position;<br /> }</span></pre><p>Now it is pretty easy to add this behavior to any Slider control, if you are in Expression Blend just opens the behavior tab and drag and drop this on to any Slider in the designer area. The XAML code will looks like,</p><pre class="csharpcode"><span class="Apple-style-span" style="font-size:small;"><Slider x:Name=</span><span class="str"><span class="Apple-style-span" style="font-size:small;">"sld"</span></span><span class="Apple-style-span" style="font-size:small;"> Minimum=</span><span class="str"><span class="Apple-style-span" style="font-size:small;">"00"</span></span><span class="Apple-style-span" style="font-size:small;"> Maximum=</span><span class="str"><span class="Apple-style-span" style="font-size:small;">"100"</span></span><span class="Apple-style-span" style="font-size:small;"> SmallChange=</span><span class="str"><span class="Apple-style-span" style="font-size:small;">"0.5"</span></span><span class="Apple-style-span" style="font-size:small;"> IsSnapToTickEnabled=</span><span class="str"><span class="Apple-style-span" style="font-size:small;">"True"</span></span><span class="Apple-style-span" style="font-size:small;"> TickFrequency=</span><span class="str"><span class="Apple-style-span" style="font-size:small;">"0.5"</span></span><span class="Apple-style-span" style="font-size:small;">><br /></span><strong><span class="Apple-style-span" style="font-size:small;"> <i:Interaction.Behaviors><br /> <local:PreviewSliderBehaviour ContentStyle=</span><span class="str"><span class="Apple-style-span" style="font-size:small;">"{StaticResource PreviewStyle}"</span></span><span class="Apple-style-span" style="font-size:small;">/><br /></i:Interaction.Behaviors></span></strong><span class="Apple-style-span" style="font-size:small;"><br /></Slider></span></pre><p><strong><u><span style="font-size:130%;"><a href="http://www.ria-labs.com/Resources/download.php?file=PreviewSliderBehavior.zip">Source Code</a></span></u></strong><br /></p><p>Few other links you may be interested to read about Behaviors</p><p><a href="http://gallery.expression.microsoft.com/en-us/site/search?f[0].Type=RootCategory&f[0].Value=behaviors">Gallery of Behaviors</a> </p><p><a href="http://blogs.msdn.com/expression/archive/2009/03/23/an-introduction-to-behaviors-triggers-and-actions.aspx">AN INTRODUCTION TO BEHAVIORS, TRIGGERS, AND ACTIONS</a></p><p><a href="http://geekswithblogs.net/lbugnion/archive/2009/04/05/using-a-behavior-to-magnify-your-wpf-applications.aspx">Using a Behavior to magnify your WPF applications</a></p><div style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: none; PADDING-TOP: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:1f8a0d14-12b2-4ddd-aaf5-3f862a6bc610" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/Expression+Blend" rel="tag">Expression Blend</a>,<a href="http://technorati.com/tags/Behavior" rel="tag">Behavior</a>,<a href="http://technorati.com/tags/XAML" rel="tag">XAML</a>,<a href="http://technorati.com/tags/WPF" rel="tag">WPF</a></div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com2tag:blogger.com,1999:blog-27918159.post-41855561011322212182009-07-29T12:16:00.001-07:002009-07-29T13:36:50.753-07:00Attaching Preview behavior to a WPF Slider control<div style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: none; PADDING-TOP: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:c2145fc4-249a-4682-9bc1-9ba3e3733924" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/MediaPlayer+Style" rel="tag">MediaPlayer Style</a>,<a href="http://technorati.com/tags/Theme" rel="tag">Theme</a>,<a href="http://technorati.com/tags/WPF" rel="tag">WPF</a>,<a href="http://technorati.com/tags/XAML" rel="tag">XAML</a>,<a href="http://technorati.com/tags/ControlTemplate" rel="tag">ControlTemplate</a></div><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9fnghic-wWDluV8uaVvC-oDHN2n3E8OsNPp__ChQ7I3Xh5teYY2bX4Y3oOqOkstT-pwXX3u2p2JHP3HL2BCHxKMvYX7waT50Zp_G3Ulw3MB72YTtycmL949VHvBlfMGgedlq0Rw/s1600-h/PreviewSlider.jpg"><img style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title="PreviewSlider" border="0" alt="PreviewSlider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4XfYrCPYywWlZdgKP0WKx2ZvaIC-nWmQmwbzRBB3ZIN7gsHl5pKFv6V-P4fuIbMwJu0_m_dG6ZJuirjltv_F6y0dMJCNWEq5bE5gapxjqfLQpCqUwUxTzu01tJUtIdm-8TXqR6A/?imgmax=800" width="310" height="120" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6_NOu6Bw4ZYq7pdYehqTBAp3rNC3OMWUSmIqJdUCHNaglWdKKsha8ROeT9OWKqxbNSLh5pntmB7snXwY5rRp0QTJzwGDWTSMWeAIDRqeVYT1PC8ws77dklGt1qFF81D0dY7qeA/s1600-h/PreviewSlider1%5B1%5D.jpg"><img style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title="PreviewSlider1" border="0" alt="PreviewSlider1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJQL-sRoZy3TpKYZ3bwKDK4AVUamwdFPzHVIunwaCki7C48HMo8lye02RFoG4jAn1R9aypAwS8fC3LIkoMEQaDBv8TQeIsVuyNlp_JkyLk26kECvp2y1ddiL_I9oyO7iW55tPMA/?imgmax=800" width="310" height="120" /></a></p><p>Today I am sharing about a common usage of <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.slider.aspx">Slider</a> control for the Timeline scenarios as we can see in many Media players. The above pictures shows timeline/scrubber control of some popular video players(<a href="http://www.hulu.com/">Hulu</a> and <a href="http://www.youtube.com/">Youtube</a>). We can edit the Slider Style and <strong><em>ControlTemplate</em></strong> to create the same look and feel of the above two scrubbers except the preview value get displayed when we hover over. </p><p>While figuring out an easy way to build this, I got two different options. The first and the obvious solution is to extend the Slider class to create a new custom control, which will have a new DependancyProperty called <i>PreviewValue</i> to hold the mouse over value. The biggest challenge in this approach is to make this control as much flexible(design and dev friendly) because people may customize the control by giving different Size and Margins to the <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.track.aspx">Track</a> and other parts of the Control template, which will make our assumptions invalid in some cases. And another issue is having a totally modified <strong><em>Controltemplate</em></strong> for the new Slider makes ‘Integrators’ life hard, because this control will introduce one mandatory visual inside the control template with a PART_naming convention.</p><p>Would it be cool if we can achieve this by adding couple of Attached properties to any regular Slider control? Yes that seems to be an elegant solution to me. So I have created a static class -<strong><em>PreviewSliderHelper</em></strong> to hold the required<a href="http://msdn.microsoft.com/en-us/library/ms749011.aspx"> attached dependancy properties</a>. The XAML code for the Slider is shown below. You need to specify a Style in the resource which will set to the preview display visual. The tooltip like visual is created using a custom <a href="http://msdn.microsoft.com/en-us/library/system.windows.documents.adorner.aspx">Adorner</a> and repositioning it based on the mouse move, I will discuss the details about this generic adorner implementation in another blog post.</p><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQGbhR5CPs2rkXBBkNEbpzbr0ceVfFoMfnFCd8fFdUcNn0PtwIsBgXG6z79W_lCG-tEBlYm_mfe89hgs7oScOIMC4w4ZXC99WgvVWUyPGbwwFRiYMiB5DVUrsk0GK78f39bg76Q/s1600-h/image%5B16%5D.png"><img style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title="image" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggZZ2QTxaCPM_Zu4U3r2rTrZQsI87SeAG-u8_N91oPvZmhGpgux4r9wL2-AUnOCFCyOOEyLP0yqYvAE2-oOyg2ilPeFXBrTXG-6LEfAsBQPpcgJMlAKeeqQBpK6255ZHH9MDrjeg/?imgmax=800" width="512" height="118" /></a> </p><p>And the final UI came out like this. <a href="http://www.ria-labs.com/Resources/download.php?file=PreviewSliderTest.exe"> Get the Executable</a></p><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEamKrGZ-TbFlvaeAXawepdeSR4ga9p6F3X-h0oMf1ArwAlgehSF2WJssPbUQgC8HqpMGT8nNSNp5JEMaARwsLh1lzRpTUrsdhE75HP1dDYiZYRKt_9AP2aZxaBhVrN_SF1-iuMw/s1600-h/Jobi_mediaPlayer%5B25%5D.jpg"><img style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title="Jobi_mediaPlayer" border="0" alt="Jobi_mediaPlayer" src="http://lh6.ggpht.com/_Q_BibWE3zeg/SnCgEfDIRPI/AAAAAAAAMmA/7-OGYSPaCak/Jobi_mediaPlayer_thumb%5B20%5D.jpg?imgmax=800" width="590" height="355" /></a> </p><p>The main technical details you might wanted to know is how to grab the preview value on the mouse over. We have to find out the PART_Track inside the slider and call ValueFromPoint() function to get the exact Slider.Value for each mouse move. </p><pre class="csharpcode"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpR5k71iOBYXMZmQ9t1FiTYnEPWa28KFA4WQDwDVClcaqm91ZaXiD-PkIH2KiBX_2UVLOqsk93VQfSjXfYzairz2rns-2sMweXaHfTMgDHHzNqKau1EVLEGEKu_9SzuxCeGWuVtA/s1600-h/image%5B11%5D.png"><img style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/_Q_BibWE3zeg/SnCgFH4ZpxI/AAAAAAAAMlM/C74bWQlLLm4/image_thumb%5B6%5D.png?imgmax=800" width="485" height="99" /></a> </pre><p><a href="http://www.ria-labs.com/Resources/download.php?file=PreviewSliderTest.zip"><strong><u><span style="font-size:130%;">Source Code</span></u></strong></a><span style="font-size:130%;"> </span>-Of course there are lot to improve on this messy code :) ,but feel free to share your thoughts on this</p>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com4tag:blogger.com,1999:blog-27918159.post-80782859059923688542009-07-17T17:03:00.001-07:002009-07-18T00:57:53.575-07:00An easy way to update all the UI Property Bindings of an Instance at once! – Silverlight and WPF<p>Imagine that you have a lot of properties in a class and you are very sure that all of those properties are getting updated at the same point of time. What generally we do in the ViewModel scenario is that we create Property setters for all these and raise PropertyChanged event so as to get the data reflected in the UI layer bindings. But that is a real resource waste when you really know the time of all your property updates. The solution is really easy as per the MSDN documentation for <a href="http://msdn.microsoft.com/en-us/library/system.componentmodel.inotifypropertychanged.propertychanged.aspx">PropertyChanged Event</a> in the remarks section it says “<em>The PropertyChanged event can indicate all properties on the object have changed by using either a null reference (Nothing in Visual Basic) or </em><a href="http://msdn.microsoft.com/en-us/library/system.string.empty.aspx"><em>String.Empty</em></a><em> as the property name in the </em><a href="http://msdn.microsoft.com/en-us/library/system.componentmodel.propertychangedeventargs.aspx"><em>PropertyChangedEventArgs</em></a><em>.” </em>It seems that this is a great saver in terms of code writing and execution, since we need to raise only one PropertyChanged Event per class just after the property updation.</p> <p>Think about a Stock Trading scenario as an example to this, you must have a Quote class which generally will have lot of properties in it, and there will be an Update method on a timer may update this quote object. Imagine that this class is bound to a DataTemplate at XAML level.</p> <pre class="csharpcode"> <span class="kwrd">public</span> <span class="kwrd">class</span> Quote : ViewModelBase<br /> {<br /> <span class="kwrd">public</span> <span class="kwrd">string</span> Symbol { get; set; }<br /> <span class="kwrd">public</span> <span class="kwrd">double</span> Last { get; set; }<br /> <span class="kwrd">public</span> <span class="kwrd">double</span> Change { get; set; }<br /> <span class="kwrd">public</span> <span class="kwrd">double</span> Bid { get; set; }<br /> <span class="kwrd">public</span> <span class="kwrd">double</span> Ask { get; set; }<br /> <span class="kwrd">public</span> <span class="kwrd">double</span> Open { get; set; }<br /> <span class="kwrd">public</span> <span class="kwrd">string</span> Percentage { get; set; }<br /> <span class="kwrd">public</span> <span class="kwrd">double</span> Volume { get; set; }<br /><br /> <span class="kwrd">public</span> <span class="kwrd">bool</span> IsRefreshed<br /> {<br /> get { <span class="kwrd">return</span> _isRefreshed; }<br /> set<br /> {<br /> _isRefreshed = <span class="kwrd">value</span>;<br /> <strong>RaisePropertyChanged(<span class="kwrd">null</span>);</strong><br /> }<br /> }<br /> <span class="kwrd">private</span> <span class="kwrd">bool</span> _isRefreshed;<br /> }</pre><p>Isn't the code very neat with the awesome <a href="http://msdn.microsoft.com/en-us/library/bb384054.aspx">Auto-Implemented Properties</a> rather than having fields and expanded setters with RaiseProertyChanged in all those?. Now in the Stock Update method you can set all these properties and set IsRefreshed=true which in turn calls <strong>RaisePropertyChanged(<span class="kwrd">null</span>)</strong> and makes the WPF/Silverlight binding infrastructure to re-evaluate all the bindings associated with the UI. </p><p>I recommend using the <a href="http://msdn.microsoft.com/en-us/magazine/dd419663.aspx">MVVM</a> implementation by <a href="http://joshsmithonwpf.wordpress.com/">Josh Smith</a> for the basic ViewModel architecture. You can download his MVVM Foundation from codeplex - <a href="http://mvvmfoundation.codeplex.com/">http://mvvmfoundation.codeplex.com/</a></p>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com0tag:blogger.com,1999:blog-27918159.post-20731957934015331362009-04-07T18:48:00.001-07:002009-04-07T20:54:19.843-07:003D Flipper Control – Using Silverlight 3.0 Plane Projection<p>Silverlight 3.0 has a coolest feature called <em>PlaneProjection</em>-a perspective transform which projects any <em>UIElement</em> on to a 3D plane. To create a plane projection you just need to set an attached property called ‘Projection’ on the UI Element. You can see relevant set of properties to rotate, center or offset. If you are using <a href="http://www.microsoft.com/expression/try-it/blendpreview.aspx" target="_blank">Expression blend 3 Beta</a>, you can set these properties using the new Projection editor under Transform category of the property editor.</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRXBGx-ZZQWbDDkEHj3S8fmWjNyM5a7k3TCMFNCxzBrMXrbVD-ht1HZPCXkvBd2u-ZTtpAFhnOo9l-rg1Bp8GjxyA-Suv87XAZlT8A3jpfHMJNuzFBbpIdq2NkGV3YGKU89UpRaA/s1600-h/image%5B20%5D.png"><img title="image" style="border-width: 0px; display: inline;" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiS-gTMCKH5xNC8pHC1uUX9DAdFCfRV3iPZR7ZN7ANY51kCqXXzhInPjbElbe6trAPW8gMD3vfO0k0UBBVkkBASfVOW3CcFcD3rRH9Qt0nKS_eqn17jyA-bpoU8Y9x5b_ijM0U1A/?imgmax=800" width="301" border="0" height="247" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSNxmx5mXhnMSeXrmsLSndFtCV_bwdScJGzRmL_ZXusB34VAcgj3fS7p_fYrgvjqpp5dVugPLQL7aJB6z5XdjSdXiqzuSYZjauxUyH4F4Rl7Zgb-MnZZ-P8rB810LNAs834VWjMg/s1600-h/image%5B21%5D.png"><img title="image" style="border-width: 0px; display: inline;" alt="image" src="http://lh6.ggpht.com/_Q_BibWE3zeg/SdwCfVOIZCI/AAAAAAAAKtc/-vVvrWvtIrA/image_thumb%5B9%5D.png?imgmax=800" width="287" border="0" height="201" /></a></p> <p>I am going to create a <strong>3D flipper control</strong> using this plane projection feature. I guess 3D flipping is the most popular and simplest 3D UX pattern out there. In a nut shell what we need is a custom Silverlight control which is able to take a ‘Front’ and ‘Back’ content elements. And the control should have the ability to flip both the contents in a 3D plane. For example if I have two images to flip, then my XAML should be as follows.</p> <p><a href="http://lh4.ggpht.com/_Q_BibWE3zeg/SdwCf9g83VI/AAAAAAAAKtg/QDt2inbkFag/s1600-h/image%5B25%5D.png"><img title="image" style="border-width: 0px; display: inline;" alt="image" src="http://lh4.ggpht.com/_Q_BibWE3zeg/SdwCgKpLBUI/AAAAAAAAKtk/6BHdYgSALFc/image_thumb%5B13%5D.png?imgmax=800" width="355" border="0" height="178" /></a> </p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt4wDVk6hedfChXfY3tUgVLuZTL8Xk-lBdHK5jQKq6ianXcGGRkUKMjpZwraGctynyHcG8sAzTGBzEL14NS4gpyCBauLvRC7ll5EhuIe4Gs1prZfhqGYdt2xGaQ4Rnro5RdiXjGA/s1600-h/image%5B2%5D.png"> </a>So I need to define two dependency properties of type <em>UIElement</em> called <em>FrontContent</em> and <em>BackContent</em>. As for every look less control, we need to define a default XAML Style and control template for this control in <strong><em>Themes\Generic.xaml</em></strong> file. In the template we need two <em>ContentPresenter</em> for the control to respect both front and back Content which user sets. And the root element is where we can apply the <em>PlaneProjection</em>. </p> <p><a href="http://lh4.ggpht.com/_Q_BibWE3zeg/SdwCggYp4gI/AAAAAAAAKuI/1uRHP5Z3Zw0/s1600-h/image%5B39%5D.png"><img title="image" style="border: 0px none ; display: inline;" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYikW9QiNOP_yDk5htMF6UQUGeDMYDODMSafXlv911RaOWU5YUQ5HJGwpYs4RrLspU7Grg3OxA3_yJiZa6nbm5GKN3KRRgLeSUch9P9ZtMyFtw_pB6z9Z8PIfdke1hr0_-qb86IA/?imgmax=800" width="980" border="0" height="323" /></a></p> <p>The remaining jobs are to rotate the <em>PART_MainGrid</em> with an animation on the (<em>PlaneProjection.RotationY</em>) from 0 to 180degrees and when it reaches 90degrees, we need to flip the visibility of the contents so that the back content should be visible from 90 to 180 transition. These two actions can purely be handled using <a href="http://timheuer.com/blog/archive/2008/06/04/silverlight-introduces-visual-state-manager-vsm.aspx" target="_blank">VisualStateManager</a> in XAML. Currently I am triggering the Flip action on <em>mousedown</em> event, but we can utilize some Command pattern to make it fully generic. You may notice that I put a ScaleTransform with ScaleX=-1 to the backside container in the above XAML. The reason is that when the <em>PlaneProjection</em> flips to the backside the content gets flipped horizontally, so we are applying a horizontally flipped(<strong><em>ScaleX =-1</em></strong>) container to the backside so that the user applied <em>BackContent</em> will look normal.</p> <p>See the <a href="http://silverlight.ria-labs.com/Samples/FlipperControl3D/Default.html" target="_blank"><strong><span style="font-size:130%;">demo here </span></strong></a></p> <p>And here is the<a href="http://www.ria-labs.com/Resources/download.php?file=Flipper3DControl.zip"> Source Code</a></p><p>I have used few other Silverlight3.0 features in this sample. Effects(<em>Dropshadow effect</em>) and ElementName binding. You can type on the TextBox bellow and the value has bind to a TextBlock on the backside content. ElementName binding feature makes the binding in Silverlight a lot more easier as it is with WPF.</p> <p><a href="http://silverlight.ria-labs.com/Samples/FlipperControl3D/Default.html"><img title="image" style="border: 0px none ; display: inline;" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSlPqOIq2kVbKkPBWdbTp_MEJZMiIFbTNB_CV9cwNDQeFPx1srdb3oSxDvDElxRV9pQvlmJvy3-klkMhpKQRmbiB1uyWzFVnkKRdqPYoQKGUgCBqdk8LiP4DZCNroLUmw8_hhWXQ/?imgmax=800" width="661" border="0" height="464" /></a></p>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com17tag:blogger.com,1999:blog-27918159.post-18609181531569967502009-03-07T00:33:00.001-08:002009-03-09T00:55:42.216-07:00Different ways to access XML data in Silverlight Application<p>One of the most common requirement in the Silverlight development is to load XML data in to the application. I am going to describe a few different options that we can choose based on the situations. I am using LINQ for the XML parsing in the examples. Taking a sample XML file names<em><strong> </strong>Sample.xml</em> with the following content</p><pre style="BACKGROUND: white;font-family:Courier New;font-size:10pt;color:black;"><span class="kwrd"><</span><span class="html">Employees</span><span class="kwrd">></span><br /><span class="kwrd"> <</span><span class="html">Employee</span> <span class="attr">Name</span><span class="kwrd">="John"</span><span class="kwrd">/></span><br /><span class="kwrd"> <</span><span class="html">Employee</span> <span class="attr">Name</span><span class="kwrd">="Mark"</span><span class="kwrd">/></span><br /><span class="kwrd"> <</span><span class="html">Employee</span> <span class="attr">Name</span><span class="kwrd">="David"</span><span class="kwrd">/></span><br /><span class="kwrd"></</span><span class="html">Employees</span><span class="kwrd">></span> </pre><h4>1. Load XML file directly from the Web Server hosted Silverlight XAP </h4><p>You can host the XML file at your web server itself and Silverlight application can load it on demand. To simulate this in Visual Studio you need to create a Test Website for your Silverlight application and put xml file into the ClientBin folder.</p><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTNWdSz2yC3l7Lw5Mxc_51wvtljs-TNQ7mx0QyDdYP8vsT1xM1eEh1N6JvW6tY-_aC1cafNMmHhGEcK5Kx2w3SS7rYpQAF8flMOyRpEtHWQBFNye9ZplOxRF46y333aWZreuheJg/s1600-h/image18.png"><img title="image" style="BORDER-TOP-WIDTH: 0px; DISPLAY: inline; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="244" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiESqsphQmWpIwPOpu7JOdceq6iNi0tG1COhnYW_gK4XlzOFYVHns-azUm9JRz1Bx5qCSo9GhOj5o1_ts4duXdIBXESBdXwvPvPH0KTO6JqpXPzlyXeqm_DNz0dBH_cNeaZLSqW2Q/?imgmax=800" width="199" border="0" /></a></p><p>Now we can write few lines of code to read the XML. WebClient will download the file asynchronously</p><pre style="BACKGROUND: white;font-family:Courier New;font-size:10pt;color:black;"><span class="kwrd">void</span> Page_Loaded(<span class="kwrd">object</span> sender, RoutedEventArgs e)<br />{<br />WebClient xmlClient = <span class="kwrd">new</span> WebClient();<br />xmlClient.DownloadStringCompleted += <span class="kwrd">new</span> DownloadStringCompletedEventHandler(XMLFileLoaded);<br />xmlClient.DownloadStringAsync(<span class="kwrd">new</span> Uri(<span class="str">"Sample.xml"</span>, UriKind.RelativeOrAbsolute));<br />}<br /><span class="kwrd">void</span> XMLFileLoaded(<span class="kwrd">object</span> sender, DownloadStringCompletedEventArgs e)<br />{<br /><span class="kwrd"> string</span> XmlString = e.Result; <span class="rem">// Got all your XML data in to a string </span><br />XDocument elem = XDocument.Load(XmlReader.Create(<span class="kwrd">new</span> StringReader(XmlString)));<br />var collection = from nod <span class="kwrd">in</span> elem.Descendants(<span class="str">"Employee"</span>)<br /> select nod.Attribute(<span class="str">"Name"</span>).Value;<br />lstBox.ItemsSource = collection ; <span class="rem">// XML data bind to the UI</span><br />}</pre><h4>2. Load XML file directly from the Silverlight App(XAP)</h4><p><a href="http://lh4.ggpht.com/_Q_BibWE3zeg/SbIxXxZOQXI/AAAAAAAAKmA/27z4oT58MaQ/s1600-h/image8.png"><img title="image" style="BORDER-TOP-WIDTH: 0px; DISPLAY: inline; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="244" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84LDmvP5h5Kw9JtAgqHVPHNIlnw561AYdEtXs4gXsY8iXhA7wMJzMjyUWAC5ej2CvQkTGMjk-DXcZb9nXYb60q8Ymmd-1LgazIf8Wq1ogp-W-0-JEZ4wcGYwwOYpwjgpSvRYCOg/?imgmax=800" width="176" border="0" /></a></p><p>Add the XML file as a content to the Silverlight project. This is the easiest way to build and deploy a Silverlight project, since you really don't need to worry about the XML file once it is placed as part of the project. When you compile, it will automatically embed the XML file inside the XAP file. But the big problem is that you can’t easily change the XML data after the deployment. . And here the C# to read data from this situation<br /></p><pre style="BACKGROUND: white;font-family:Courier New;font-size:10pt;color:black;"> XDocument elem = XDocument.Load(<span class="str">"Sample.xml"</span>);<br />var collection = from nod <span class="kwrd">in</span> elem.Descendants(<span class="str">"Employee"</span>)<br /> select nod.Attribute(<span class="str">"Name"</span>).Value;</pre><h4>3. Load XML file from one of the Silverlight Assemblies</h4><p>When you have more than one Silverlight class libraries associated with a Silverlight application, it may be meaningful to add the XML file to a different project than the main project. So this case you need to add the file as an <em>EmbeddedResource</em>.</p><p><a href="http://lh3.ggpht.com/_Q_BibWE3zeg/SbIxY-R1iPI/AAAAAAAAKmI/hd-k154drMA/s1600-h/image24.png"><img title="image" style="BORDER-TOP-WIDTH: 0px; DISPLAY: inline; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="244" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicCbdAWeWJ_lMVKJeELXr7p_G24D_gwttCman38e5e72zCfILnOzJhRLn599agQcKp0zwp6thWxLdPAhi-FXcUkluT3CgsEcQ3sDtlwHKsf5EMKVXR-MoKgVPwy-A0Sqg4yJVehA/?imgmax=800" width="184" border="0" /></a></p><pre style="BACKGROUND: white;font-family:Courier New;font-size:10pt;color:black;"> Stream stream = <span class="kwrd">this</span>.GetType().Assembly.GetManifestResourceStream(<span class="str">"XmlLoadingTest.Sample.xml"</span>);<br /> XDocument elem = XDocument.Load(XmlReader.Create(stream));<br /> var coll = from nod <span class="kwrd">in</span> elem.Descendants(<span class="str">"Employee"</span>)<br /> select nod.Attribute(<span class="str">"Name"</span>).Value;</pre><h4>4. Load XML file from a URI</h4><p>This is the case of accessing third party data from feeds and services. It is a big security threat to access resources from a server where the XAP file didn't not originate. So the server you are requesting access needs a special permission files hosted. You can read more about this here-<a href="http://msdn.microsoft.com/en-us/library/cc197955(VS.95).aspx" target="_blank">Making a Service Available Across Domain Boundaries</a>) and here-<a href="http://msdn.microsoft.com/en-us/library/cc645032(VS.95).aspx" target="_blank">Network Security Access Restrictions in Silverlight 2</a></p><p>When coming to read this kind of hosted XML urls from C#, you can use either step(1) or step(2) of the above C# code snippets. I prefer the step(1) option because it is asynchronous and will not hang up the UI. And also it will not make the XAP size larger with larger XML files, so the initial loading will be faster.</p>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com14tag:blogger.com,1999:blog-27918159.post-10713210662691637912009-03-01T09:45:00.000-08:002009-03-01T21:21:39.587-08:00Sunny Orange - WPF Theme 1Recently I found out that I have an<a href="http://jobijoy.blogspot.com/2008/07/cool-control-template-for-wpf-button.html"> old blog post </a>about Control Templating a Button, getting a lot of hits. Many out there are looking for free control templates and themes for WPF/Silverlight applications. I am planning to publish few WPF/Silverlight themes in the coming posts. So here I am publishing a simple theme which has almost similar colors to the old blog post. It contains very basic set of controls. <div>1)Button</div><div>2)ToggleButton</div><div>3)ComboBox</div><div>4)TextBox</div><div>5)CheckBox</div><div>6)RadioButton</div><div>7)ScrollBar</div><div>8)ScrollViewer</div><div>9)ListBox</div><div>10)ProgressBar</div><div>11)Slider</div><div><br /></div><div>You can find the source XAML style here -<a href="http://www.ria-labs.com/Resources/download.php?file=SunnyOrange_Theme.xaml"><span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;"> </span></span></a><span class="Apple-style-span" style=" white-space: pre; font-family:Arial;font-size:13px;"><a href="http://www.ria-labs.com/Resources/download.php?file=SunnyOrange_Theme.xaml"><span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">SunnyOrange_Theme.xaml</span></span></a></span></div><div>WPF control theming and templating is very interesting and fun task in the WPF application development, it took only an hour or two for me to create this theme file. Please let me know your valuable feedbacks and suggestions .</div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://ria-labs.com/jobijoy/blog/Theme1.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 880px; height: 517px;" src="http://ria-labs.com/jobijoy/blog/Theme1.png" border="0" alt="" /></a>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com5tag:blogger.com,1999:blog-27918159.post-72410414325875488182009-02-03T12:24:00.000-08:002009-02-03T13:52:05.676-08:00A simple Multiselect ComboBox using expression Blend<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0nnp3THap9P9GQQEeeVDTLqn85N4OLdOIOwuSF6BjhyphenhyphenbuYSf5cWBpjpawDAlKyEPDrhLeDZSESdVhwwyHXEknYkMyf-Lsu3hiW8Si9diBQSbwn8FTQ9aXrigp0N5EjObz791SA/s400/multiSelect_Combo.jpg" style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 264px; height: 234px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5298681361456409426" /><br /><div><br /></div><div>I have often seen requirements to have a combobox with multiple selection enabled. We know thatWPF ListBox control is having two special properties, which enables the multiple selection but the combobox doesnt have those<div><span class="Apple-style-span" style="font-style: italic;"> public IList SelectedItems { get; }<br /></span><div><div><span class="Apple-style-span" style="font-style: italic;"> public SelectionMode SelectionMode { get; set; }</span><br /></div><div>There are many ways we can make a multiselect combo box</div><div>1)Create a custom control from the scratch and have a Listbox in the dropdown</div><div>2)Extend the combobox and add the above properties to it</div><div>3)Edit the Combobox control template to add necessary controls and binding.</div><div><br /></div><div>I am going to describe the 3rd idea from the above list, which is a total <span class="Apple-style-span" style="font-style: italic;">Expression Blend</span> work, so no need of VS2008 to make a multiselect combobox from a simple combobox. </div><div><br /></div><div>Place a combobox in to the editing area and right click on the control to create an copy of the Control template. Now you can see the Control's tree on the left side of Expression Blend</div><div><br /></div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmIGVK1qEi_qizctFgDPf-YcrXxKatWnVFEnFU0-LyvTZUcjbYFPGBxjDpDTvINSJGbetJQaBzXCAyJJDKGyd2Qt90yoO6fCepDibVsEYVrmRdWJkl2BQtRLqVkozuEf0UdKkrQg/s400/controlTree.jpg" style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 273px; height: 296px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5298676894137981330" /></div><br /><br /></div><div>The ItemPresenter inside the scrollviewer is actually the control which displays the data in the dropdown part of the combobox, we want to havethe multiselection enabled on that. So replace the ItemsPresenter with a ListBox control with SelectionMode=Multiple </div><div>The last control in the tree, ContentPresenter is to show the selectedvalue in the combobox's main area. Since we are going to have more than one value from the ListBox we need to have an ItemsPresenter like control here. Just for simplicity I have replace it with an ItemsControl with a an ItemsPanel as StackPanel with horizontal orientation.</div><div>Now we need to bind the ListBox.SelectedItems to the ItemsControl using an ElementName binding.</div><div><br /></div><div><br /></div><div><br /></div><div><div style=" ;font-family:Consolas;font-size:8pt;color:black;"><p style="margin: 0px;"><span style="color:blue;"><</span><span style="color:#a31515;">Style</span><span style="color:red;"> x</span><span style="color:blue;">:</span><span style="color:red;">Key</span><span style="color:blue;">="MultiSelectComboBox"</span><span style="color:red;"> TargetType</span><span style="color:blue;">="{</span><span style="color:#a31515;">x</span><span style="color:blue;">:</span><span style="color:#a31515;">Type</span><span style="color:red;"> ComboBox</span><span style="color:blue;">}"></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Setter</span><span style="color:red;"> Property</span><span style="color:blue;">="Template"></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Setter.Value</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ControlTemplate</span><span style="color:red;"> TargetType</span><span style="color:blue;">="{</span><span style="color:#a31515;">x</span><span style="color:blue;">:</span><span style="color:#a31515;">Type</span><span style="color:red;"> ComboBox</span><span style="color:blue;">}"></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Grid</span><span style="color:red;"> SnapsToDevicePixels</span><span style="color:blue;">="true"</span><span style="color:red;"> x</span><span style="color:blue;">:</span><span style="color:red;">Name</span><span style="color:blue;">="MainGrid"</span><span style="color:red;"> Height</span><span style="color:blue;">="Auto"</span><span style="color:red;"> Width</span><span style="color:blue;">="Auto"></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:red;"> Width</span><span style="color:blue;">="*"/></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ColumnDefinition</span> <span style="color:red;"> Width</span><span style="color:blue;">="0"/></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Popup</span><span style="color:red;"> AllowsTransparency</span><span style="color:blue;">="true"</span><span style="color:red;"> IsOpen</span><span style="color:blue;">="{</span><span style="color:#a31515;">Binding</span><span style="color:red;"> Path</span><span style="color:blue;">=IsDropDownOpen,</span><span style="color:red;"> RelativeSource</span><span style="color:blue;">={</span><span style="color:#a31515;">RelativeSource</span><span style="color:red;"> TemplatedParent</span><span style="color:blue;">}}"</span> </p><p style="margin: 0px;"> <span style="color:red;"> Placement</span><span style="color:blue;">="Bottom"</span><span style="color:red;"> PopupAnimation</span><span style="color:blue;">="{</span><span style="color:#a31515;">DynamicResource</span><span style="color:blue;"> {</span><span style="color:#a31515;">x</span><span style="color:blue;">:</span><span style="color:#a31515;">Static</span><span style="color:red;"> SystemParameters</span><span style="color:blue;">.</span><span style="color:red;">ComboBoxPopupAnimationKey</span><span style="color:blue;">}}"</span> </p><p style="margin: 0px;"> <span style="color:red;"> Margin</span><span style="color:blue;">="1"</span><span style="color:red;"> x</span><span style="color:blue;">:</span><span style="color:red;">Name</span><span style="color:blue;">="PART_Popup"</span><span style="color:red;"> Grid.ColumnSpan</span><span style="color:blue;">="2"></span><span style="color:#a31515;"> </span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Border</span><span style="color:red;"> x</span><span style="color:blue;">:</span><span style="color:red;">Name</span><span style="color:blue;">="DropDownBorder"</span><span style="color:red;"> MaxHeight</span><span style="color:blue;">="{</span><span style="color:#a31515;">TemplateBinding</span><span style="color:red;"> MaxDropDownHeight</span><span style="color:blue;">}"</span><span style="color:red;"> MinWidth</span><span style="color:blue;">="{</span><span style="color:#a31515;">Binding</span><span style="color:red;"> Path</span><span style="color:blue;">=ActualWidth,</span><span style="color:red;"> ElementName</span><span style="color:blue;">=MainGrid}"></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ScrollViewer</span><span style="color:red;"> CanContentScroll</span><span style="color:blue;">="true"></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ListBox</span><span style="color:red;"> x</span><span style="color:blue;">:</span><span style="color:red;">Name</span><span style="color:blue;">="lstBox"</span><span style="color:red;"> SnapsToDevicePixels</span><span style="color:blue;">="{</span><span style="color:#a31515;">TemplateBinding</span><span style="color:red;"> SnapsToDevicePixels</span><span style="color:blue;">}"</span> </p><p style="margin: 0px;"> <span style="color:red;"> KeyboardNavigation.DirectionalNavigation</span><span style="color:blue;">="Contained"</span><span style="color:red;"> SelectionMode</span><span style="color:blue;">="Multiple"</span><span style="color:red;"> ItemsSource</span><span style="color:blue;">="{</span><span style="color:#a31515;">TemplateBinding</span><span style="color:red;"> ItemsSource</span><span style="color:blue;">}"/></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">ScrollViewer</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Border</span><span style="color:blue;">></span><span style="color:#a31515;"> </span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Popup</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ToggleButton</span><span style="color:red;"> Background</span><span style="color:blue;">="{</span><span style="color:#a31515;">TemplateBinding</span><span style="color:red;"> Background</span><span style="color:blue;">}"</span><span style="color:red;"> BorderBrush</span><span style="color:blue;">="{</span><span style="color:#a31515;">TemplateBinding</span><span style="color:red;"> BorderBrush</span><span style="color:blue;">}"</span> <span style="color:red;"> Grid.ColumnSpan</span><span style="color:blue;">="2"</span> </p><p style="margin: 0px;"> <span style="color:red;"> IsChecked</span><span style="color:blue;">="{</span><span style="color:#a31515;">Binding</span><span style="color:red;"> Path</span><span style="color:blue;">=IsDropDownOpen,</span><span style="color:red;"> Mode</span><span style="color:blue;">=TwoWay,</span><span style="color:red;"> RelativeSource</span><span style="color:blue;">={</span><span style="color:#a31515;">RelativeSource</span><span style="color:red;"> TemplatedParent</span><span style="color:blue;">}}"</span><span style="color:red;"> Style</span><span style="color:blue;">="{</span><span style="color:#a31515;">DynamicResource</span><span style="color:red;"> ToggleButtonStyle1</span><span style="color:blue;">}"/></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ItemsControl</span><span style="color:red;"> IsHitTestVisible</span><span style="color:blue;">="false"</span><span style="color:red;"> ItemsSource</span><span style="color:blue;">="{</span><span style="color:#a31515;">Binding</span><span style="color:red;"> Path</span><span style="color:blue;">=SelectedItems,</span><span style="color:red;"> ElementName</span><span style="color:blue;">=lstBox}"</span><span style="color:red;"> Margin</span><span style="color:blue;">="4,0,0,0"></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ItemsControl.ItemsPanel</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ItemsPanelTemplate</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">StackPanel</span><span style="color:red;"> IsItemsHost</span><span style="color:blue;">="True"</span><span style="color:red;"> Orientation</span><span style="color:blue;">="Horizontal"/></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">ItemsPanelTemplate</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">ItemsControl.ItemsPanel</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">ItemsControl</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Grid</span><span style="color:blue;">></span><span style="color:#a31515;"> </span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">ControlTemplate</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Setter.Value</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Setter</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:blue;"></</span><span style="color:#a31515;">Style</span><span style="color:blue;">></span></p></div><br /></div><div>Now we need to access the SelectedItems from this new control template. Use the bellow line<br /></div><div><span class="Apple-style-span" style="border-collapse: collapse; line-height: 18px; font-family:Arial;font-size:14px;"><pre class="prettyprint" style="margin-top: 0px; margin-right: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; margin-bottom: 10px; overflow-x: auto; overflow-y: auto; width: 620px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: rgb(245, 245, 245); max-height: 600px; background-position: initial initial; font-family:Consolas, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New';font-size:100%;"><code style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background- background-position: initial initial; font-family:Consolas, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New';font-size:100%;color:transparent;"><span class="pun" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; font-size:100%;color:black;">((</span><span class="typ" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; color: rgb(43, 145, 175); background-position: initial initial; font-size:100%;">ListBox</span><span class="pun" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; font-size:100%;color:black;">)</span><span class="pln" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; font-size:100%;color:black;">cmbBox</span><span class="pun" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; font-size:100%;color:black;">.</span><span class="typ" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; color: rgb(43, 145, 175); background-position: initial initial; font-size:100%;">Template</span><span class="pun" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; font-size:100%;color:black;">.</span><span class="typ" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; color: rgb(43, 145, 175); background-position: initial initial; font-size:100%;">FindName</span><span class="pun" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; font-size:100%;color:black;">(</span><span class="str" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; font-size:100%;color:maroon;">"lstBox"</span><span class="pun" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; font-size:100%;color:black;">,</span><span class="pln" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; font-size:100%;color:black;">cmbBox</span><span class="pun" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; font-size:100%;color:black;">)).</span><span class="typ" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; color: rgb(43, 145, 175); background-position: initial initial; font-size:100%;">SelectedItems</span></code></pre></span></div><div>You can download the <a href="http://www.ria-labs.com/Resources/download.php?file=MultiCombo.zip">sample project here</a></div></div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com4tag:blogger.com,1999:blog-27918159.post-1621924039799018282009-02-02T17:43:00.000-08:002009-02-03T14:04:51.040-08:00Lilac Chaser - Optical illusion using Silverlight<div><span class="Apple-style-span" style="font-style: italic;"><br /></span></div><object data="data:application/x-silverlight," height="430" width="440" type="application/x-silverlight-2"><br /><param name="source" value="http://ria-labs.com/silverlight/samples/lilacillusion/lilac_illusion.xap"><br /><param name="minRuntimeVersion" value="2.0.31005.0"><br /><param name="autoUpgrade" value="true"><br /><a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"><br /><img alt="Get Microsoft Silverlight" src="http://go.microsoft.com/fwlink/?LinkId=108181" style="border-style: none" /><br /></a><br /></object><span class="Apple-style-span" style=" line-height: 19px; font-family:-webkit-sans-serif;font-size:13px;"><span class="Apple-style-span" style="font-style: italic;"></span></span><div><div><span class="Apple-style-span" style="font-style: italic; ">"When one stares at the center for about 20 seconds or so, one first sees a gap running around the circle of lilac disks, then a green disk running around the circle of lilac disks, then a green disk running around on the grey background, the lilac disks having disappeared or having been erased by the green disk. This is due to an interesting effect in which the colors of the lilac disks are inverted in the optical illusion to a green color"</span><br />This <a href="http://en.wikipedia.org/wiki/Optical_illusion">optical illusion</a> is called <a href="http://en.wikipedia.org/wiki/Lilac_chaser">Lilac chaser</a> . Just thought of creating a silverlight version of this illusion for fun. I have used a radial panel(<a href="http://jobijoy.blogspot.com/2008/04/simple-radial-panel-for-wpf-and.html">from my old blog</a>) to layout the ellipses radially, and implemented a a timer to change the visibility in a sequential way.<div></div><div><br /></div><div>This kind of effects can be a good candidate for <span class="Apple-style-span" style="font-style: italic;">Splash sreen</span> for silverlight applications :)</div><div>Full source can be found <a href="http://www.ria-labs.com/Resources/download.php?file=Lilac_Illusion.zip">here </a><br /></div> </div></div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com1tag:blogger.com,1999:blog-27918159.post-62756847909576780242008-12-31T11:50:00.001-08:002009-01-06T09:53:24.837-08:00Mix 10K Coding Challenge - Few Tips I have used to limit the code size<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9P_bBw15JAF6h7RUPtsFUNjRi0um-FHGvbllj2NGb8A4JZ70dpbs3pq5BDIanyKG58hRHBksn9GuKdkl8KXByCxcS55vqz_5HOe1dhcauQRblC8RMki5AzneNBtzA2YtDOXuT-g/s1600-h/image1.png"><img style="cursor:pointer; cursor:hand;width: 188px; height: 138px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9P_bBw15JAF6h7RUPtsFUNjRi0um-FHGvbllj2NGb8A4JZ70dpbs3pq5BDIanyKG58hRHBksn9GuKdkl8KXByCxcS55vqz_5HOe1dhcauQRblC8RMki5AzneNBtzA2YtDOXuT-g/s400/image1.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5288240335143826706" /></a><br /><div><br /></div>While developing for the <a href="http://2009.visitmix.com/MIXtify/TenKGallery.aspx">MIX 10K coding challenge</a>, the major challenge to face is to limit the code in 10K size. So I had to question each and every line of code that would it be possible to write this even with fewer bytes.<br /> Check out my application at <a href="http://2009.visitmix.com/MIXtify/TenKDisplay.aspx?SubmissionID=0044">http://2009.visitmix.com/MIXtify/TenKDisplay.aspx?SubmissionID=0044</a> Make sure to run the application in fullscreen mode.<br /> Here I am compiling a list of tips and features I used to reduce the code size. <br /><span style="font-weight:bold;">1. Automatic Properties</span> - Used this .NET feature to create the Tweet class which represents an RSS feed item from the search result <br /><span class="Apple-style-span" style="font-family:'courier new';"><span class="Apple-style-span" style="font-size:small;">public class Tweet {<br /> public string Guid { get;set; }<br /> public string Title { get;set; }<br /> public string Author { get;set;</span></span><span class="Apple-style-span" style="font-size:small;"><br /> … ….</span><br /><span class="Apple-style-span" style="font-weight: bold;">2. Object Initializers</span><br /><span class="Apple-style-span" style="font-family:'courier new';"><span class="Apple-style-span" style="font-size:small;">new Tweet {Title = element.Element("title").Value,<br /></span></span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="font-family:'courier new';"><span class="Apple-style-span" style="font-size:small;"> </span></span></span><span class="Apple-style-span" style="font-family:'courier new';"><span class="Apple-style-span" style="font-size:small;">Author = element.Element("author").Value,<br /></span></span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="font-family:'courier new';"><span class="Apple-style-span" style="font-size:small;"> </span></span></span><span class="Apple-style-span" style="font-family:'courier new';"><span class="Apple-style-span" style="font-size:small;">Guid = element.Element("guid").Value}};</span></span><br /><span class="Apple-style-span" style="font-weight: bold;">3. LINQ to XML</span> - I have used this to read the XML stream from the search result handler.<br /><span class="Apple-style-span" style="font-weight: bold;">4. Collection Initializer</span> - Collection initialize has used along with the LINQ query, which does a huge amount of job with fewer lines.<br /><span class="Apple-style-span" style="font-weight: bold;">5. Use 'Var'</span> - Used to initialize a variable without specifying its type<br /> The bellow few lines do all the work to grab the RSS feed in to a collection variable which utilizes the features 3,4 and 5 above<br /><span class="Apple-style-span" style="font-family:'courier new';"><span class="Apple-style-span" style="font-size:small;">XElement elements = XElement.Parse(e.Result);<br />var items = from element inelements.Descendants("item")<br /></span></span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="font-family:'courier new';"><span class="Apple-style-span" style="font-size:small;"> </span></span></span><span class="Apple-style-span" style="font-family:'courier new';"><span class="Apple-style-span" style="font-size:small;">select new Tweet { PrevZ = double.NaN, Title = element.Element("title").Value</span></span><br /><span class="Apple-style-span" style="font-weight: bold;"> 6. Anonymous functions</span> - This save you some bytes. Bellow line I have used to toggle between the Fullscreen modes when the user clicks on a checkbox named 'chkFullScreen'<br /><span class="Apple-style-span" style="font-family:'courier new';"><span class="Apple-style-span" style="font-size:small;">chkFullScreen.Click +=delegate{Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen; };</span></span><br /><span class="Apple-style-span" style="font-weight: bold;"> 7. Remove all Private keywords</span> - Default member accessor is 'Private' so you don’t need to specify that :)<br /><span class="Apple-style-span" style="font-weight: bold;">8. Remove all unused 'Using' statements</span> - Easy ways to check – When you finish coding, removes all the ‘using’ statements and then correct the compile error<br /><span class="Apple-style-span" style="font-weight: bold;">Some other editing tricks</span> (This can make the source code un-readable too).<br /> Reduce the Tab size to zero<br /> Remove all white spaces<br /> Make the entire source code into few lines.<br /> Put all the source code in to a single source file <br /> Single character variable names.<br /><br /><div>I haven’t used much of these editing tricks. The code was just 8.96KB. So I kept the source readable and in 4 separate files.<br /><br /></div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com0tag:blogger.com,1999:blog-27918159.post-12478104561645514972008-12-31T10:34:00.000-08:002009-07-10T13:02:36.674-07:00Mix 10K smart coding challenge<a href="http://2009.visitmix.com/MIXtify/TenKGallery.aspx"><img style="cursor:pointer; cursor:hand;width: 188px; height: 138px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaRhXcGjj-uPZQwGeyZAcL4_HCmTJtF6LM75RwbadunAMUTamP38VWajnbbGoPbPtuwMjc2uTJhDWEygwurlYRBDcuPF_GECql533uqKlbD2rxlzwLzZSyeAmAZfa4jx6aia9iOg/s400/image1.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5288240021281681794" /></a><br /><div>The <a href="http://2009.visitmix.com/">Mix conference 2009</a> has organized a coding challenge on Silverlight/WPF with a restriction of using only 10Kb of source code. You can see the gallery of submissions at <a href="http://2009.visitmix.com/MIXtify/TenKGallery.aspx">http://2009.visitmix.com/MIXtify/TenKGallery.aspx</a>. Please visit and cast your vote for the entries you like,<a href="http://ria-labs.com/twitfind/"> </a><span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-size:large;"><a href="http://ria-labs.com/twitfind/">You can see my entry here. </a></span></span><a href="http://ria-labs.com/twitfind/"><br /></a></div><a href="http://2009.visitmix.com/MIXtify/TenKDisplay.aspx?SubmissionID=0044"><img src="http://twitfind.ria-labs.com/pic.jpg" style="cursor:pointer; cursor:hand;width: 720px; height: 460px;" border="0" alt="" /></a><br />My application allows you to search the twitter feeds over the internet using Twitter Search APIs(basically same as what you can see at <a href="http://search.twitter.com/">http://search.twitter.com/) </a>What I am trying to acheive here with <a href="http://silverlight.net/">silverlight </a>is <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">just another way to visualize the search data along the time line travelling towards the negative Z-space</span></span>. One more interesting feature I wanted to add to this in the future version would be to give the ability to navigate through the Z-space with mouse scroll to see the older results. This same kind of UX(user experience) can be used to view any sort of time based feeds like blog feeds or search results. Architecturally the application is utilizing the following major features<div>1) <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">DataTemplate </span></span></div><div>2) <span class="Apple-style-span" style="font-style: italic; font-weight: bold;">MVVM Pattern</span>-Used mainly an ObservableCollection as the ViewModel to keep the UI notified on all the data change events.</div><div>3) <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">Custom Panel</span></span> - I have used a special panel called Space panel which arranges the items in a way to give a Parallax effect(2.5D)</div><div>4) <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">LINQ </span></span>- More specifically LINQ to XML to parse the incoming search data and other data processing.<br /><div><div>Class diagram shown the Entity class and the Panel </div><div><img src="http://4.bp.blogspot.com/_Q_BibWE3zeg/SVyZoyXK42I/AAAAAAAAJ9U/CT6Wy-EEbHw/s400/mix_class.jpg" style="cursor:pointer; cursor:hand;width: 400px; height: 275px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5286268988618892130" /><br /></div><div>My initial reaction to 10K code size restriction was that it would be too less to write this application. But you know, surpisingly with all the richness and power of .NET3.5(Specifically XAML,C#(ver3.0) and LINQ) we can write a moderately rich interactive application with just 10K of code. All the tips and tricks I have used to limit the code in 10Kb will be posted to you in my next blog.</div></div></div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com1tag:blogger.com,1999:blog-27918159.post-71047126547355024742008-12-26T15:14:00.001-08:002008-12-27T01:05:18.377-08:00Paginated ObservableCollection<a href="http://msdn.microsoft.com/en-us/library/ms668604.aspx">ObservableCollection </a>class makes the collection binding very easy in Silverlight or WPF. This special collection is aware of the binding infrastructures and notify them whenever some changes happens to the collection.<br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBcs5uJm2-lt0DPB6BRXaJ8eIEhPY9UfOT3GXJA5xnzyH6niv1mN3FXe9pN-omTrc4lkq5Pu2QKCEqwWOWcHVtSsWIuIuMKjkQAmnGbBrTREi1fewJg2po1yxzc2TFN3R52f0pkQ/s400/pagination.jpg" style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 276px; height: 69px;" id="BLOGGER_PHOTO_ID_5284250372302912066" /><br /><br />I have often come across the requirement to have pagination enabled on collections. When we bind a Collection with many items inside to an ItemsControl, the visual will be created for each and every items. But as we can see that there is no big significance in displaying all the data with a huge vertical scroll bar(or similar mechanism) in it. So pagination is the typical user experience strategy we use in this kind of scenarios. Architecturally we can achieve the <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">pagination</span></span> mainly in three different ways<br /><ol><li>Making the UI Control or Panel aware of the virtualization, so that the visuals wont create at the time of binding. But as an on demand visual element creation. VirtualizingPanel concept in WPF is actually helps to achieve this idea. For more details about WPF virtualizaiton panels, go <a href="http://blogs.msdn.com/dancre/archive/2006/02/06/implementing-a-virtualized-panel-in-wpf-avalon.aspx">here</a> and <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.virtualizingstackpanel.aspx">here </a>- In terms of <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">MVVM </span></span>pattern this will be implemented at the <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">View </span></span>side.</li><li>Making the collection aware of the pagination and that special collection always gives a subset of items to the UI for making the visuals. In terms of <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">MVVM </span></span>pattern this solution is implemented as <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">ViewModel</span></span></li><li>Last and most commonly used way in the web technology - Typical DB/Back end/Web service side pagination where the pagination is controlled in the query side. This is best way for handling huge data like what we see in most of the typical websites out there. Typically the implementation is part of the <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">Model</span></span></li></ol><div><span class="Apple-style-span" style="font-weight: bold;">Paginated ObservableCollection</span><br /> I have created a PaginatedObservableCollection as an experiment to achieve the UI vitalization based on the point (2) of the above list. And this special generic Collection is derived from ObservableCollection. This has mainly two properties </div><div><ul><li>PageSize - to store the number of items that can be shown in a single page </li><li>CurrentPage - the page number of the current page which the UI is showing in a particulr time.</li></ul>This collection internally keeps the original items in a private List<t> and based on the above two properties the PaginatedObservableCollection returns a subset of the items inside the list.You can use this new Collection in the same way as you use any ObservableCollection and the two properties are also databindable to the UI to control the collection behaviors.</t><br /><t><p>See a running demo in Silverlight <a href="http://silverlight.ria-labs.com/Samples/PaginatedCollection/Default.html">here</a>.</p><p style="margin: 0px;"><iframe src="http://silverlight.ria-labs.com/Samples/PaginatedCollection/Default.html" width="620" height="380"></iframe><br /></p><p style="margin: 0px;">You can find the source code in <a href="http://www.codeplex.com/PaginatedCollection">CodePlex - </a><a href="http://www.codeplex.com/PaginatedCollection">http://www.codeplex.com/PaginatedCollection </a>, Feel free to give your suggestions comments to improve this. Source code include WPF and Silverlight sample code</p><p style="margin: 0px;"><br /></p></t></div><div>The current version of source code is not a thread proof implementation, but this can be taken as a starting point to make a working application to get this feature. There are some good articles about Observable collection in the multi-threading environment by <a href="http://blogs.microsoft.co.il/blogs/tamir/archive/2007/04/22/Thread-safe-observable-collection.aspx">Tamir</a> and <a href="http://www.beacosta.com/blog/?p=34">Beatriz</a><br /><p></p></div><p></p>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com12tag:blogger.com,1999:blog-27918159.post-25412730812359807202008-12-03T08:09:00.000-08:002008-12-04T10:37:00.353-08:00XAML Balloon Comments - Expression Blend TipIt is often a requirement in Silverlight and WPF that to create Balloon kind of UI for Toolip popups. It can be done in many ways. I am listing out few of the common Balloons you might be interested in.<div><br /><table style="width:100%;"><tbody> <tr> <td style="width: 20%"><br /> <img alt="" src="http://ria-labs.com/jobijoy/blog/Ballon1.png" style="height:120px; width:200px" /></td> <td style="width: 50%"><br /> <br /> <div style=" ;font-family:Courier New;font-size:7pt;color:black;"><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Grid</span><span style="color:#a31515;"> <span style="color:blue;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Grid.RowDefinitions</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">RowDefinition</span><span style="color:red;"> Height</span><span style="color:blue;">="*"/></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">RowDefinition</span><span style="color:red;"> Height</span><span style="color:blue;">="30"/></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Grid.RowDefinitions</span><span style="color:blue;">></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Rectangle</span><span style="color:red;"> RadiusX</span><span style="color:blue;">="10"</span><span style="color:red;"> RadiusY</span><span style="color:blue;">="10"</span><span style="color:red;"> Stroke</span><span style="color:blue;">="#FF000000"/></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Path</span><span style="color:red;"> Fill</span><span style="color:blue;">="#FFFFFFFF"</span><span style="color:red;"> Stretch</span><span style="color:blue;">="Fill"</span><span style="color:red;"> Stroke</span><span style="color:blue;">="#FF000000"</span><span style="color:red;"> HorizontalAlignment</span><span style="color:blue;">="Left"</span><span style="color:red;"> Margin</span><span style="color:blue;">="30,-1.6,0,0"</span><span style="color:red;"> Width</span><span style="color:blue;">="20"</span><span style="color:red;"> Grid.Row</span><span style="color:blue;">="1"</span> </p><p style="margin: 0px;"> <span style="color:red;"> Data</span><span style="color:blue;">="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395"/></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">TextBlock</span><span style="color:red;"> HorizontalAlignment</span><span style="color:blue;">="Center"</span><span style="color:red;"> VerticalAlignment</span><span style="color:blue;">="Center"</span><span style="color:red;"> FontSize</span><span style="color:blue;">="14"</span><span style="color:red;"> Text</span><span style="color:blue;">="Hello World"</span><span style="color:red;"> TextWrapping</span><span style="color:blue;">="Wrap"</span><span style="color:red;"> FontWeight</span><span style="color:blue;">="Bold"/></span></p><p style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Grid</span><span style="color:blue;">></span></p></div><br /> <!--EndFragment--><br /></td> <td class="style5"><br /> This Balloon doesnt change its corner Radius when you resize. And also doesn't change the size of the Tip when you resize. The Tip has its height always be 30 since the Grid Row height is 30. You can tweak the constants in the XAML apporpriately to make it looks proper for your scenarios.</td> </tr> <tr> <td class="style8"><br /> <img alt="" src="http://ria-labs.com/jobijoy/blog/Ballon2.png" style="height:120px; width:200px" /></td> <td class="style7"><br /> <div style=" ;font-family:Courier New;font-size:7pt;color:black;"><br /> <p style="margin: 0px;"><br /> <span style="color:blue;"><</span><span style="color:#a31515;">Path</span><span style="color:red;"> Stretch</span><span style="color:blue;">="Fill"</span><span style="color:blue;">="2"</span><span style="color:red;"> Data</span><span style="color:blue;">="M10.5,0.5<br /> L108.60157,0.5 C109.98227,0.5 111.29763,0.77982046 112.49402,1.2858505<br /> 114.88678,2.297905 116.80367,4.2147827 117.81572,6.6075516 118.32175,7.8039356<br /> 118.60157,9.1192895 118.60157,10.5 L118.60157,51.442939 C118.60157,52.823647<br /> 118.32175,54.139003 117.81572,55.33539 116.80367,57.728154 114.88678,59.645032<br /> 112.49402,60.657088 111.29763,61.163118 109.98227,61.442938 108.60157,61.442937<br /> L22.30129,61.681242 11.674737,79.949581 10.48383,61.465811 10.209005,61.465811<br /> C8.8282947,61.465812 7.8039303,61.163115 6.6075497,60.657088 4.2147805,59.645032<br /> 2.2979068,57.728154 1.2858486,55.33539 0.77982051,54.139003 0.5,52.823647<br /> 0.5,51.442939 L0.5,10.5 C0.5,9.1192895 0.77981997,7.8039356 1.2858486,6.6075516<br /> 2.2979069,4.2147827 4.2147808,2.297905 6.6075497,1.2858505 7.8039303,0.7798233<br /> 9.1192894,0.5 10.5,0.5 z"</span><span style="color:red;"> Stroke</span><span style="color:blue;">="#FF000000"/></span></p><br /> </div><br /> <!--EndFragment--><br /></td> <td class="style8"><br /> If you combine the Rectangle and Path in the above Balloon you will get a single Path. But the issue here is that when you resize this Path along with your contents the corners and the Tip wont look exactly the same, both will get stretched on the direction of resize. But this can be useful in many scenarios.</td> </tr> <tr> <td><br /> </td> <td class="style1"><br /> </td> <td><br /> </td> </tr> </tbody></table><br /></div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com2tag:blogger.com,1999:blog-27918159.post-71290931824061550752008-11-30T03:46:00.000-08:002008-12-01T20:47:49.809-08:00Interactive Silverlight Greeting Card<div style="text-align: left;">For the last couple of days I was trying to make an animated e-card using Silverlight. So here is the final result. The speciality of this card is that when we move the mouse over the card we can see it as if it is a 3D object and get the perspective view of the objects(Papervision 3D?). All the Trees and Mountains are Path objects and the particles falling down are random sized ellipses. I have used Microsoft Expression Blend to do most of this work<br /></div><div style="text-align: left;"><div style="text-align: left;"><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://ria-labs.com/jobijoy/blog/cardinblend.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 829px; height: 350px;" src="http://ria-labs.com/jobijoy/blog/cardinblend.jpg" border="0" alt="" /></a><br /></div><div style="text-align: left;"><a href="http://ria-labs.com/silverlight/samples/xmascard1/xmascard.html">Click here to see the Card in action.</a><br /></div><div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://ria-labs.com/silverlight/samples/xmascard1/xmascard.html"></a></div><div style="text-align: left;">The important part of this Silverlight appplication is a Custom Panel called <span style="font-weight:bold;"><span class="Apple-style-span" style="font-style: italic;">SpacialArrangePanel<span class="Apple-style-span" style="font-weight: normal;"><span class="Apple-style-span" style="font-style: normal;">. This panel will arrange its children based on two Attached Dependancy Properties.</span></span></span></span><br /></div><div style="text-align: left;">1) HangingPoint - A point determines its X and Y position in the space</div><div style="text-align: left;">2) ZDistance - A double value determines how far the object is in the Z-plane.</div><div style="text-align: left;"><br /></div><div style="text-align: left;">There is another DependancyProperty in the Panel called CameraPoint, which has been hooked to the Mouse Move points so that the mouse pointer acts as an Eye/Camera view point of the Panel.</div><div style="text-align: left;"><br /></div><div style="text-align: left;">I have added the InitParams query string in the HTML so that this card can be customized to use special Message and Name on it. Just change the <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">Greeting </span></span>and <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="font-style: italic;">YourName </span></span>parameters in the bellow HTML.</div><div><div style="text-align: left;"><br /></div><div style="font-size:10pt;color:black;"><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"><</span><span style="color:#a31515;">div</span> <span style="color:red;">id</span><span style="color:blue;">="silverlightControlHost"></span></p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"><</span><span style="color:#a31515;">object</span> <span style="color:red;">data</span><span style="color:blue;">="data:application/x-silverlight,"</span> </p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:red;">type</span><span style="color:blue;">="application/x-silverlight-2"</span> <span style="color:red;">style</span><span style="color:blue;">="</span><span style="color:red;">width</span>: <span style="color:blue;">840px</span>; <span style="color:red;">height</span>: <span style="color:blue;">353px"></span></p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"><</span><span style="color:#a31515;">param</span> <span style="color:red;">name</span><span style="color:blue;">="source"</span> <span style="color:red;">value</span><span style="color:blue;">="http://ria-labs.com/silverlight/samples/xmascard1/XMasCard.xap"/></span></p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"><</span><span style="color:#a31515;">param</span> <span style="color:red;">name</span><span style="color:blue;">="InitParams"</span> <span style="color:red;">value</span><span style="color:blue;">="Greeting=Merry Christmas,YourName=Jobi Joy"/></span> </p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"><</span><span style="color:#a31515;">param</span> <span style="color:red;">name</span><span style="color:blue;">="minRuntimeVersion"</span> <span style="color:red;">value</span><span style="color:blue;">="2.0.31005.0"</span> <span style="color:blue;">/></span></p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"><</span><span style="color:#a31515;">param</span> <span style="color:red;">name</span><span style="color:blue;">="autoUpgrade"</span> <span style="color:red;">value</span><span style="color:blue;">="true"</span> <span style="color:blue;">/></span></p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"><</span><span style="color:#a31515;">a</span> <span style="color:red;">href</span><span style="color:blue;">="http://go.microsoft.com/fwlink/?LinkID=124807"</span> <span style="color:red;">style</span><span style="color:blue;">="</span><span style="color:red;">text-decoration</span>: <span style="color:blue;">none</span>;<span style="color:blue;">"></span></p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"><</span><span style="color:#a31515;">img</span> <span style="color:red;">src</span><span style="color:blue;">="http://go.microsoft.com/fwlink/?LinkId=108181"</span> <span style="color:red;">alt</span><span style="color:blue;">="Get Microsoft Silverlight"</span> <span style="color:red;">style</span><span style="color:blue;">="</span><span style="color:red;">border-style</span>: <span style="color:blue;">none"/></span></p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"></</span><span style="color:#a31515;">a</span><span style="color:blue;">></span></p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"></</span><span style="color:#a31515;">object</span><span style="color:blue;">></span></p><p style="text-align: left;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> <span style="color:blue;"></</span><span style="color:#a31515;">div</span><span style="color:blue;">></span></p></div></div><br /><br />And here is the <a href="http://www.ria-labs.com/Resources/download.php?file=SilverlightCard1.zip">Source code</a> </div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com8tag:blogger.com,1999:blog-27918159.post-7436605093452268132008-11-15T12:41:00.000-08:002008-11-15T16:29:57.954-08:00Concave cornered Rectangle - Expression Blend Tip<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8By8_vpKL99PHLscLdtWb61B6x5FoOWXgoRKCWaXWVZ0UDKtf7hg42NLI8v2CP7qm7pcKgYWKY-cMZifamEgQnKEn20W1gVqVLE8f8tZ9jkI6-nbc0e70vGcKyKkP-FmHhNTwg/s1600-h/concaveRect.jpg"><img style="cursor:pointer; cursor:hand;width: 225px; height: 213px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8By8_vpKL99PHLscLdtWb61B6x5FoOWXgoRKCWaXWVZ0UDKtf7hg42NLI8v2CP7qm7pcKgYWKY-cMZifamEgQnKEn20W1gVqVLE8f8tZ9jkI6-nbc0e70vGcKyKkP-FmHhNTwg/s400/concaveRect.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5269039357388394210" /></a><br />An expression blend tip to create a Path looks like a concave cornered rectangle. Put a Grid with 5*5 rows and columns. and add 4 ellipse and a rectangle as in the following XAML.<div><br /></div><div><!-- {\rtf1\ansi\ansicpg\lang1024\noproof65001\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;??\red0\green0\blue255;\red255\green255\blue255;\red163\green21\blue21;\red255\green0\blue0;}??\fs20 \cf1 <\cf3 Grid\cf4 x\cf1 :\cf4 Name\cf1 ="grid" >\par ??\cf3 \tab \tab \tab \tab \cf1 <\cf3 Grid.ColumnDefinitions\cf1 >\par ??\cf3 \tab \tab \tab \tab \tab \cf1 <\cf3 ColumnDefinition\cf4 Width\cf1 ="0.1*"/>\par ??\cf3 \tab \tab \tab \tab \tab \cf1 <\cf3 ColumnDefinition\cf4 Width\cf1 ="0.1*"/>\par ??\cf3 \tab \tab \tab \tab \tab \cf1 <\cf3 ColumnDefinition\cf4 Width\cf1 ="0.6*"/>\par ??\cf3 \tab \tab \tab \tab \tab \cf1 <\cf3 ColumnDefinition\cf4 Width\cf1 ="0.1*"/>\par ??\cf3 \tab \tab \tab \tab \tab \cf1 <\cf3 ColumnDefinition\cf4 Width\cf1 ="0.1*"/>\par ??\cf3 \tab \tab \tab \tab \cf1 </\cf3 Grid.ColumnDefinitions\cf1 >\par ??\cf3 \tab \tab \tab \tab \cf1 <\cf3 Grid.RowDefinitions\cf1 >\par ??\cf3 \tab \tab \tab \tab \tab \cf1 <\cf3 RowDefinition\cf4 Height\cf1 ="0.1*"/>\par ??\cf3 \tab \tab \tab \tab \tab \cf1 <\cf3 RowDefinition\cf4 Height\cf1 ="0.1*"/>\par ??\cf3 \tab \tab \tab \tab \tab \cf1 <\cf3 RowDefinition\cf4 Height\cf1 ="0.6*"/>\par ??\cf3 \tab \tab \tab \tab \tab \cf1 <\cf3 RowDefinition\cf4 Height\cf1 ="0.1*"/>\par ??\cf3 \tab \tab \tab \tab \tab \cf1 <\cf3 RowDefinition\cf4 Height\cf1 ="0.1*"/>\par ??\cf3 \tab \tab \tab \tab \cf1 </\cf3 Grid.RowDefinitions\cf1 >\par ??\cf3 \tab \tab \tab \tab \cf1 <\cf3 Rectangle\cf4 Fill\cf1 ="#FF000000"\cf4 Grid.Column\cf1 ="1"\cf4 Grid.Row\cf1 ="1"\cf4 Grid.RowSpan\cf1 ="3"\cf4 Grid.ColumnSpan\cf1 ="3"\cf4 StrokeThickness\cf1 ="0"/>\par ??\cf3 \tab \tab \tab \tab \cf1 <\cf3 Ellipse\cf4 Fill\cf1 ="#FFEA0000"\cf4 VerticalAlignment\cf1 ="Stretch"\cf4 StrokeThickness\cf1 ="0"\cf4 Grid.Row\cf1 ="0"\cf4 Grid.Column\cf1 ="0"\cf4 Grid.RowSpan\cf1 ="2"\cf4 Grid.ColumnSpan\cf1 ="2"/>\par ??\cf3 \tab \tab \tab \tab \cf1 <\cf3 Ellipse\cf4 Fill\cf1 ="#FFEA0000"\cf4 StrokeThickness\cf1 ="0"\cf4 VerticalAlignment\cf1 ="Stretch"\cf4 Grid.ColumnSpan\cf1 ="2"\cf4 Grid.RowSpan\cf1 ="2"\cf4 Grid.Row\cf1 ="3"/>\par ??\cf3 \tab \tab \tab \tab \cf1 <\cf3 Ellipse\cf4 Fill\cf1 ="#FFEA0000"\cf4 StrokeThickness\cf1 ="0"\cf4 VerticalAlignment\cf1 ="Stretch"\cf4 Grid.ColumnSpan\cf1 ="2"\cf4 Grid.Row\cf1 ="3"\cf4 Grid.RowSpan\cf1 ="2"\cf4 Grid.Column\cf1 ="3"/>\par ??\cf3 \tab \tab \tab \tab \cf1 <\cf3 Ellipse\cf4 Fill\cf1 ="#FFEA0000"\cf4 StrokeThickness\cf1 ="0"\cf4 VerticalAlignment\cf1 ="Stretch"\cf4 Grid.Column\cf1 ="3"\cf4 Grid.ColumnSpan\cf1 ="2"\cf4 Grid.Row\cf1 ="0"\cf4 Grid.RowSpan\cf1 ="2"/>\par ??\cf3 \tab \tab \tab \cf1 </\cf3 Grid\cf1 >} --><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEbdM3Qjl7onuiEzK_0TvLx7gDrh6_qs-p0LKuBbaq0uhXNW6dUZbu1zjUYjktL1fglclfgE0_Bx5TA3Q6-a8QpWyHLQrmSFnQvTMdMVcn6-NmoDGXauVoTqXLVM1RZ5NdTce_w/s400/blend.png" style="cursor:pointer; cursor:hand;width: 600px; height: 297px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5268994829938327234" /></div><div><div style="font-family:Courier New;font-size:8pt;color:black;"><pre style="margin: 0px;"><span style="color:blue;"><</span><span style="color:#a31515;">Grid</span><span style="color:red;"> x</span><span style="color:blue;">:</span><span style="color:red;">Name</span><span style="color:blue;">="grid" ></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:red;"> Width</span><span style="color:blue;">="0.1*"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:red;"> Width</span><span style="color:blue;">="0.1*"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:red;"> Width</span><span style="color:blue;">="0.6*"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:red;"> Width</span><span style="color:blue;">="0.1*"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:red;"> Width</span><span style="color:blue;">="0.1*"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Grid.RowDefinitions</span><span style="color:blue;">></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">RowDefinition</span><span style="color:red;"> Height</span><span style="color:blue;">="0.1*"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">RowDefinition</span><span style="color:red;"> Height</span><span style="color:blue;">="0.1*"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">RowDefinition</span><span style="color:red;"> Height</span><span style="color:blue;">="0.6*"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">RowDefinition</span><span style="color:red;"> Height</span><span style="color:blue;">="0.1*"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">RowDefinition</span><span style="color:red;"> Height</span><span style="color:blue;">="0.1*"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Grid.RowDefinitions</span><span style="color:blue;">></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Rectangle</span><span style="color:red;"> Fill</span><span style="color:blue;">="#FF000000"</span><span style="color:red;"> Grid.Column</span><span style="color:blue;">="1"</span><span style="color:red;"> Grid.Row</span><span style="color:blue;">="1"</span><span style="color:red;"> Grid.RowSpan</span><span style="color:blue;">="3"</span><span style="color:red;"> Grid.ColumnSpan</span><span style="color:blue;">="3"</span><span style="color:red;"> StrokeThickness</span><span style="color:blue;">="0"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Ellipse</span><span style="color:red;"> Fill</span><span style="color:blue;">="#FFEA0000"</span><span style="color:red;"> VerticalAlignment</span><span style="color:blue;">="Stretch"</span><span style="color:red;"> StrokeThickness</span><span style="color:blue;">="0"</span><span style="color:red;"> Grid.Row</span><span style="color:blue;">="0"</span><span style="color:red;"> Grid.Column</span><span style="color:blue;">="0"</span><span style="color:red;"> Grid.RowSpan</span><span style="color:blue;">="2"</span><span style="color:red;"> Grid.ColumnSpan</span><span style="color:blue;">="2"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Ellipse</span><span style="color:red;"> Fill</span><span style="color:blue;">="#FFEA0000"</span><span style="color:red;"> StrokeThickness</span><span style="color:blue;">="0"</span><span style="color:red;"> VerticalAlignment</span><span style="color:blue;">="Stretch"</span><span style="color:red;"> Grid.ColumnSpan</span><span style="color:blue;">="2"</span><span style="color:red;"> Grid.RowSpan</span><span style="color:blue;">="2"</span><span style="color:red;"> Grid.Row</span><span style="color:blue;">="3"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Ellipse</span><span style="color:red;"> Fill</span><span style="color:blue;">="#FFEA0000"</span><span style="color:red;"> StrokeThickness</span><span style="color:blue;">="0"</span><span style="color:red;"> VerticalAlignment</span><span style="color:blue;">="Stretch"</span><span style="color:red;"> Grid.ColumnSpan</span><span style="color:blue;">="2"</span><span style="color:red;"> Grid.Row</span><span style="color:blue;">="3"</span><span style="color:red;"> Grid.RowSpan</span><span style="color:blue;">="2"</span><span style="color:red;"> Grid.Column</span><span style="color:blue;">="3"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"><</span><span style="color:#a31515;">Ellipse</span><span style="color:red;"> Fill</span><span style="color:blue;">="#FFEA0000"</span><span style="color:red;"> StrokeThickness</span><span style="color:blue;">="0"</span><span style="color:red;"> VerticalAlignment</span><span style="color:blue;">="Stretch"</span><span style="color:red;"> Grid.Column</span><span style="color:blue;">="3"</span><span style="color:red;"> Grid.ColumnSpan</span><span style="color:blue;">="2"</span><span style="color:red;"> Grid.Row</span><span style="color:blue;">="0"</span><span style="color:red;"> Grid.RowSpan</span><span style="color:blue;">="2"/></span></pre><pre style="margin: 0px;"><span style="color:#a31515;"> </span><span style="color:blue;"></</span><span style="color:#a31515;">Grid</span><span style="color:blue;">></span></pre><pre style="margin: 0px;"><span class="Apple-style-span" style="color: rgb(0, 0, 255);"><br /></span></pre></div></div> Do the Subtract Path operation by selecting menu option Object -> Combine -> Subtract<br />Now you will get a Path object as bellow XAML.<br /><!-- {\rtf1\ansi\ansicpg\lang1024\noproof65001\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;??\red0\green0\blue255;\red255\green255\blue255;\red163\green21\blue21;\red255\green0\blue0;}??\fs20 \cf1 <\cf3 Path\cf4 Fill\cf1 ="#FFA1A1A1"\cf4 Stretch\cf1 ="Fill"\cf4 Stroke\cf1 ="#FF000000"\cf4 StrokeThickness\cf1 ="1"\cf4 HorizontalAlignment\cf1 ="Left"\cf4 Margin\cf1 ="35.333,70.667,0,0"\cf4 VerticalAlignment\cf1 ="Top"\cf4 Width\cf1 ="50"\cf4 Height\cf1 ="50"\cf4 Data\cf1 ="M17.200002,0L120.4,0 120.4,2.3066998E-06C120.4,6.7378696,128.10079,12.200001,137.60001,12.200001L137.60001,85.400003C128.10077,85.400003,120.4,90.862138,120.4,97.6L17.200002,97.6C17.200002,90.862151,9.4993697,85.400003,0,85.400003L0,12.199999C9.4993663,12.200015,17.200002,6.7378725,17.200002,0z"/>} --><br /><div style="font-family:Courier New;font-size:8pt;color:black;"><pre style="margin: 0px;"><span style="color:blue;"><</span><span style="color:#a31515;">Path</span><span style="color:red;"> Fill</span><span style="color:blue;">="#FFA1A1A1"</span><span style="color:red;"> Stretch</span><span style="color:blue;">="Fill"</span><span style="color:red;"> Stroke</span><span style="color:blue;">="#FF000000"</span><span style="color:red;"> StrokeThickness</span><span style="color:blue;">="1"</span><span style="color:red;"> </span></pre><pre style="margin: 0px;"><span style="color:red;">Width=</span><span style="color:blue;">"50"</span><span style="color:red;"> Height</span><span style="color:blue;">="50"</span><span style="color:red;"> Data</span><span style="color:blue;">="M17.200002,0L120.4,0 120.4,2.3066998E-06C120.4,6.7378696,128.10079,12.200001,137.60001,12.200001L137.60001,85.400003C128.10077,85.400003,120.4,90.862138,120.4,97.6L17.200002,97.6C17.200002,90.862151,9.4993697,85.400003,0,85.400003L0,12.199999C9.4993663,12.200015,17.200002,6.7378725,17.200002,0z"/></span></pre></div><br />The above can be achieved in many different ways. You can use <a href="http://www.microsoft.com/expression/products/Overview.aspx?key=design">Expression Design</a> or Adobe illustrator to generate a Path like this.<br />And if you are looking for a custom shape like this, you can create that by deriving a class from System.Windows.Shapes.Shape by doing some similar Geometry operations. Then we can define some dependency Properties for controlling the Concave radius too.Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com0tag:blogger.com,1999:blog-27918159.post-31058136152350634422008-09-11T01:06:00.000-07:002008-09-11T01:28:15.383-07:00WPF Clock<a href="http://2.bp.blogspot.com/_Q_BibWE3zeg/SMjTGT7unUI/AAAAAAAAEfU/MHwUXzcLooI/s1600-h/clock.jpg"><img id="BLOGGER_PHOTO_ID_5244673871456410946" style="CURSOR: hand" alt="" src="http://2.bp.blogspot.com/_Q_BibWE3zeg/SMjTGT7unUI/AAAAAAAAEfU/MHwUXzcLooI/s400/clock.jpg" border="0" /></a><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_frHg8Jz6EVwq_WRjrjxcXNJp2I4k17dUII83AXdgUOpusxezTmjIypxliLSeE9DLJojT1vOBAaVYHmrZi0nD7t-pjg3bixKml_mh1dnSXwAum6bR30Z3qPuverS5gCHpWSzgPQ/s1600-h/clock.jpg"></a></div><div>I had written a <a href="http://jobijoy.blogspot.com/2007/03/simple-wpf-clock-using-microsoft.html">blog </a>a long time back on creating a simple <a href="http://jobijoy.blogspot.com/2007/03/simple-wpf-clock-using-microsoft.html">WPF clock</a>. It was actually one my first few sample applications that I built when I got to fiddle with Expression Blend for the first time. Only today I noticed that the hyperlink to the Source code on the blog was actually broken for a long time and there are still quite a few asking me for the source code. So I am posting the same here with out even looking in to what I have done 1.5 years back :). Ofcourse I had to convert the source to VS2008(.NET3.5)</div><div></div><div>Download the Exe <a href="http://www.ria-labs.com/Resources/download.php?file=XamlClock.exe">Here</a></div><div>and <a href="http://www.ria-labs.com/Resources/download.php?file=XamlClock.zip">Source code </a></div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com5tag:blogger.com,1999:blog-27918159.post-81585608080154012232008-09-04T10:59:00.000-07:002008-09-05T00:39:35.448-07:00Desklighter - A handy tool for SilverlightAs a silverlight developer I have often come across the need to demonstrate my work to others and post it to the Silverlight community. The options we generally use are listed below<br /><br />1)You can just share the entire source code as a zip.<br />But do you think most of the guys out there have the patience to download-compile-run the code? And sometimes you dont want to share your source code with the public.<br /><br />2)Upload the application to a webserver<br />But you need to have a webspace and ofcourse the website should support Silverlight. People always need connectivity to the website to run your sample.<br /><br />3)<strong>A new way to share Silverlight</strong><br />Imagine that you could create an EXE out of Silverlight application and send that across your guys and get some comments to improve your work. This makes a silverlight application 'Offline' Sounds like a good idea?<br />So <a href="http://blendables.com/labs/Desklighter/Default.aspx">Desklighter </a>is your tool to do that. <a href="http://blendables.com/labs/Desklighter/Default.aspx">Deskllighter </a>is a free tool from <a href="http://www.identitymine.com/">identitymine</a><br /><br /><a href="http://ctlabs.blogspot.com/2008/09/desklighter-carry-light-along.html">Sameer </a>has a great post explaing more details about the desklighter<br /><strong></strong><br /><strong>How does it work?</strong><br /><br />I just tried to convert Silverlight sample created in my <a href="http://jobijoy.blogspot.com/2008/08/silverlight-marquee-control.html">previous Marquee Blog</a>.<br /><br />The conversion is as simple as the screen shot bellow. I have pointed my xap file path to desklighter tool and clicked on the 'Convert' button, I am done!. Check out the <a href="http://www.ria-labs.com/Resources/download.php?file=MarqueeTest.exe">MarqueeTest.EXE</a> file I got.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbvYQDEKMGx0PJtvdfw5VJhlnfq5djMyftf6LbtSs3t43T68tSCjzhpJ7oY8N5h0RMnA-us5P9YbH3b7HQPDFiuRZ5ImzVInP0sKbFNcP6W5D2CWy5nNGosencagqI6qtlyclKw/s1600-h/desklighter.png"><img id="BLOGGER_PHOTO_ID_5242239257470154210" style="MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbvYQDEKMGx0PJtvdfw5VJhlnfq5djMyftf6LbtSs3t43T68tSCjzhpJ7oY8N5h0RMnA-us5P9YbH3b7HQPDFiuRZ5ImzVInP0sKbFNcP6W5D2CWy5nNGosencagqI6qtlyclKw/s400/desklighter.png" border="0" /></a><br /><a href="http://www.ria-labs.com/Resources/download.php?file=MarqueeTest.exe"><img id="BLOGGER_PHOTO_ID_5242239529527533042" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqALu9yiqbXc57qJBvUgvhSOz0Segl9DIFEID5N8CDsVamfmVxhoMUIuJx_vQOFQWoweh6GwnhLpxCHDcjmqasjWeJMuhzcTJoEjBTO6Alf3eP8-VOVAUd0QEkcB6EL1YRoS7Jxw/s400/Marquee.png" border="0" /></a><br /><br />Desklighter is an application which is writen in .NET2.0 and it contains a small TCP server and a Webbrowser control, in other words it contains a small server as well as a browser.Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com3tag:blogger.com,1999:blog-27918159.post-62031209001377513932008-08-18T16:48:00.006-07:002008-08-18T18:10:52.297-07:00Silverlight Marquee ControlMy <a href="http://jobijoy.blogspot.com/2008/08/wpf-custom-controls-marquee-control.html">previous post </a>describes about making a Custom marquee control in WPF. Here is what I tried the same using Silverlight. Silverlight is getting really mature with its latest releases, it has come pretty close to WPF in most of the scenarios.<br />There is a difference with the way you create the Generic.xaml for writing the default look. You have to manually add the Generic.xaml to the project and set the build action as Resource file. See this <a href="http://www.silverlightshow.net/items/Creating-a-Silverlight-Custom-Control-The-Basics.aspx">blog </a>for a detailed explanation of this. And the XAML code is still the same as what we wrote in WPF. The following code has to be added to the constructor so that whenever the control gets instantiated the default style will be associated with that.<br /><span style="color:blue;">public</span> Marquee()<br />{<br /><pre style="MARGIN: 0px"> DefaultStyleKey = <span style="color:blue;">typeof</span>(<span style="color:#2b91af;">Marquee</span>);</pre><pre style="MARGIN: 0px"> }</pre>The rest of the code is pretty much the same as WPF. I have added a Duration dependency property so that end user will be able to change the speed of the animation at run time. And subscribed to the mouse enter and leave so that animation will just stoped if the mouse is on top of the control.<br /><br /><strong>Live </strong><a href="http://silverlight.ria-labs.com/Samples/MarqueeControl/MarqueeTest.html"><strong>Demo Url</strong></a><strong><br />Source Code can be downloaded </strong><a href="http://www.ria-labs.com/Resources/download.php?file=MarqueeTest.zip"><strong>here</strong></a><br /><iframe src="http://silverlight.ria-labs.com/Samples/MarqueeControl/MarqueeTest.html" width="640" height="380"></iframe>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com12tag:blogger.com,1999:blog-27918159.post-36509120756883986522008-08-15T18:02:00.031-07:002008-08-18T18:14:15.455-07:00WPF Custom Controls - Marquee controlWPF and Silverlight have the cool idea of 'Lookless controls' which means you can skin a control in whichever way you like. Or in other words the UI rendering logic of a WPF control lives totally in a seperate world than the control's functionality. This enables a WPF applications capaibility to dress up in totally different skins and layouts at the run time.<br />So let me explain the creation of a simple custom control by taking the example of a Marquee control. Hope you are well aware of the HTML Marquee tag. I am explaining the CustomControl concept of WPF with Marquee control as an example.<br /><br /><strong>Step to Create a custom control with VS2008</strong><br /><a href="http://3.bp.blogspot.com/_Q_BibWE3zeg/SKZUSkJ0obI/AAAAAAAADvY/7griAz2vxxo/s1600-h/addnewCustomControl.png"><img id="BLOGGER_PHOTO_ID_5234964294784033202" style="CURSOR: hand" alt="" src="http://3.bp.blogspot.com/_Q_BibWE3zeg/SKZUSkJ0obI/AAAAAAAADvY/7griAz2vxxo/s400/addnewCustomControl.png" border="0" /></a><br />The above step will give you the class file and Generic.xaml added to the project.<br /><br /><strong>Who is your control Parent?</strong><br />First I should choose the base class from which my control has to derive from. I am seeing the Marquee as a control which holds up a content element always and the content gets scrolled horizontally. So I can say that ' Marquee control has a Content' so lets write that statement in C#.<br /><span style="color:blue;">public</span> <span style="color:blue;">class</span> <span style="color:#2b91af;">Marquee</span> : <span style="color:#2b91af;">ContentControl</span><br /><br /><strong>What is the default look of your control?</strong><br />Next step is to define the visual elements which builds up the default look. My idea here is to put a Canvas and make the content scroll inside the canvas using DoubleAnimation on Canvas.Left attached property. So the default template can be writen as shown in the XAML.<br /><div style="font-family:Courier New;font-size:8pt;color:black;" ><pre style="MARGIN: 0px"> <span style="color:blue;"> <</span><span style="color:#a31515;">Style</span><span style="color:blue;"> </span><span style="color:red;">TargetType</span><span style="color:blue;">=</span>"<span style="color:blue;">{x:Type local:Marquee}</span>"<span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> <</span><span style="color:#a31515;">Setter</span><span style="color:blue;"> </span><span style="color:red;">Property</span><span style="color:blue;">=</span>"<span style="color:blue;">Template</span>"<span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> <</span><span style="color:#a31515;">Setter.Value</span><span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> <</span><span style="color:#a31515;">ControlTemplate</span><span style="color:blue;"> </span><span style="color:red;">TargetType</span><span style="color:blue;">=</span>"<span style="color:blue;">{x:Type local:Marquee}</span>"<span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> <</span><span style="color:#a31515;">Canvas</span><span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> <</span><span style="color:#a31515;">ContentPresenter</span><span style="color:blue;"> </span><span style="color:red;">x:Name</span><span style="color:blue;">=</span>"<span style="color:blue;">PART_Content</span>"<span style="color:blue;">/></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> </</span><span style="color:#a31515;">Canvas</span><span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> </</span><span style="color:#a31515;">ControlTemplate</span><span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> </</span><span style="color:#a31515;">Setter.Value</span><span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> </</span><span style="color:#a31515;">Setter</span><span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> </</span><span style="color:#a31515;">Style</span><span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:#0000ff;"></span> </pre></div>You can see from the XAML that the <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.contentpresenter.aspx">ContenPresenter </a>is having a name so that we can find the reference of this control inside the control logic. So here we are making a mutual contract between the Control logic and the UI logic that we will always expect a control named PART_Content in the control template. So anybody who is goinging to re-template this would be considering this fact.<br />Using the following code we can find the instance of the above metioned contentpresenter<br /><br /><div style="font-family:Courier New;font-size:10pt;color:black;" ><pre style="MARGIN: 0px"><span style="color:blue;">public</span> <span style="color:blue;">override</span> <span style="color:blue;">void</span> OnApplyTemplate()</pre><pre style="MARGIN: 0px">{</pre><pre style="MARGIN: 0px"> _contentPresenter = Template.FindName(<span style="color:#a31515;">"PART_Content"</span>, <span style="color:blue;">this</span>) <span style="color:blue;">as</span> <span style="color:#2b91af;">FrameworkElement</span>;</pre></div><br /><strong>Marquee Logic Implementation</strong> <span style="color:blue;"></span><br /><br /><div style="font-family:Courier New;font-size:10pt;color:black;" ><pre style="MARGIN: 0px"><span style="color:blue;">private</span> <span style="color:blue;">void</span> Animate()</pre><pre style="MARGIN: 0px">{</pre><pre style="MARGIN: 0px"> <span style="color:blue;">if</span> (IsLoaded)</pre><pre style="MARGIN: 0px"> { </pre><pre style="MARGIN: 0px"> _doubleAnimation.From = <span style="color:blue;">this</span>.ActualWidth;</pre><pre style="MARGIN: 0px"> _doubleAnimation.To = -_contentPresenter.ActualWidth;</pre><pre style="MARGIN: 0px"> </pre><pre style="MARGIN: 0px"> _doubleAnimation.RepeatBehavior = <span style="color:#2b91af;">RepeatBehavior</span>.Forever;</pre><pre style="MARGIN: 0px"> _doubleAnimation.Duration = Duration;</pre><pre style="MARGIN: 0px"> <span style="color:#2b91af;">Storyboard</span>.SetTargetProperty(_doubleAnimation, <span style="color:blue;">new</span> <span style="color:#2b91af;">PropertyPath</span>(<span style="color:#a31515;">"(Canvas.Left)"</span>));</pre><pre style="MARGIN: 0px"> _storyBoard.Children.Add(_doubleAnimation); </pre><pre style="MARGIN: 0px"> </pre><pre style="MARGIN: 0px"> _storyBoard.Begin(_contentPresenter,<span style="color:blue;">true</span>); </pre><pre style="MARGIN: 0px"> }</pre><pre style="MARGIN: 0px">}</pre><pre style="MARGIN: 0px"></pre></div>The animation code has taken the actualWidth of the content and animate the Canvas.Left from control's rightside to left.<br /><br /><strong>Sample Application</strong><br />Check out the <a href="http://wpf.ria-labs.com/xbaps/marquee/xbaptest.xbap">XBAP application - LIVE DEMO </a>running this marquee. One marquee with a TextBlock as its content and another with an ItemsControl as its content.<br /><div style="font-family:Courier New;font-size:8pt;color:black;" ><pre style="MARGIN: 0px"><span style="color:blue;"><</span><span style="color:#a31515;">lib:Marquee</span><span style="color:blue;"> </span><span style="color:red;">Duration</span><span style="color:blue;">=</span>"<span style="color:blue;">00:00:10</span>"<span style="color:blue;"> </span><span style="color:red;">RenderTransformOrigin</span><span style="color:blue;">=</span>"<span style="color:blue;">0.5,0.5</span>"<span style="color:blue;"> </span><span style="color:red;">HorizontalAlignment</span><span style="color:blue;">=</span>"<span style="color:blue;">Stretch</span>"<span style="color:blue;">> </span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> <</span><span style="color:#a31515;">TextBlock</span><span style="color:blue;"> </span><span style="color:red;">FontSize</span><span style="color:blue;">=</span>"<span style="color:blue;">18</span>"<span style="color:blue;"> </span><span style="color:red;">FontWeight</span><span style="color:blue;">=</span>"<span style="color:blue;">Bold</span>"<span style="color:blue;"> </span><span style="color:red;">Foreground</span><span style="color:blue;">=</span>"<span style="color:blue;">#FF000000</span>"<span style="color:blue;"> </span><span style="color:red;">Text</span><span style="color:blue;">=</span>"<span style="color:blue;">Sample Marquee Text</span>"<span style="color:blue;"> /></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"></</span><span style="color:#a31515;">lib:Marquee</span><span style="color:blue;">></span></pre><pre style="MARGIN: 0px"> </pre><pre style="MARGIN: 0px"><span style="color:blue;"><</span><span style="color:#a31515;">lib:Marquee</span><span style="color:blue;"> </span><span style="color:red;">Duration</span><span style="color:blue;">=</span>"<span style="color:blue;">00:00:10</span>"<span style="color:blue;"> </span><span style="color:red;">RenderTransformOrigin</span><span style="color:blue;">=</span>"<span style="color:blue;">0.5,0.5</span>"<span style="color:blue;"> </span><span style="color:red;">HorizontalAlignment</span><span style="color:blue;">=</span>"<span style="color:blue;">Stretch</span>"<span style="color:blue;">></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"> <</span><span style="color:#a31515;">ItemsControl</span><span style="color:blue;"> </span><span style="color:red;">x:Name</span><span style="color:blue;">=</span>"<span style="color:blue;">lstPhotos</span>"<span style="color:blue;"> </span><span style="color:red;">ItemsTemplate</span><span style="color:blue;">=</span>"<span style="color:blue;">{StaticResource someCoolTemplate}</span>"<span style="color:blue;">/></span></pre><pre style="MARGIN: 0px"><span style="color:blue;"></</span><span style="color:#a31515;">lib:Marquee</span><span style="color:blue;">></span></pre><pre style="MARGIN: 0px"> <a href="http://ria-labs.com/wpf/xbaps/marquee/xbaptest.xbap"><img id="BLOGGER_PHOTO_ID_5235960623987994930" style="CURSOR: hand" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtENwB_0oep20UDprDJYyZQyVeseIhDqJaD5pOFc2k2fTCAjwwCOdF7YxAfA2s58Ihstb7yG_NLeNE2AgQL3WTIp3u4aboL_QJxSMkIW8M9cP7MTifWZAv8pbzfAaA5HOsozRBiw/s400/xbap.jpg" border="0" /></a></pre></div>Jobi Joyhttp://www.blogger.com/profile/10436122763518119375noreply@blogger.com10