SilverlightShow: How to create a custom control that adapts to various screen sizes Comments http://www.silverlightshow.net/ Silverlight articles, Silverlight tutorials, Silverlight videos, Silverlight samples en-us SilverlightShow.net estoychev@completit.com (Emil Stoychev) Argotic Syndication Framework, http://www.codeplex.com/Argotic http://www.rssboard.org/rss-specification RE: How to create a custom control that adapts to various screen sizes http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx#comment3198 <p>The issue Gopi encountered can (also) be fixed by changing the XAML:</p> <span style="color: #0000ff; font-size: 13px;"><span style="color: #0000ff; font-size: 13px;"> <p><</p> </span> <p> </p> </span> <p><span style="color: #a31515; font-size: 13px;">controls</span><span style="color: #0000ff; font-size: 13px;">:</span><span style="color: #a31515; font-size: 13px;"><strong><span style="text-decoration: underline;">FloatableWindow</span></strong></span><span style="color: #ff0000; font-size: 13px;"> x</span><span style="color: #0000ff; font-size: 13px;">:</span><span style="color: #ff0000; font-size: 13px;">Class</span><span style="color: #0000ff; font-size: 13px;">="Demo.DemoChildWindow"</span> <p><span style="font-size: 13px;"> <p> </p> </span></p> <span style="color: #ff0000; font-size: 13px;">xmlns</span><span style="color: #0000ff; font-size: 13px;">:</span><span style="color: #ff0000; font-size: 13px;">controls</span><span style="color: #0000ff; font-size: 13px;">="clr-namespace:System.Windows.Controls;assembly=<strong><span style="text-decoration: underline;">FloatableWindow</span></strong>"</span></p> <p><span style="color: #0000ff; font-size: 13px;">etc <p> </p> </span></p> ( Marc) http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx Tue, 09 Mar 2010 19:11:54 +0300 RE: How to create a custom control that adapts to various screen sizes http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx#comment2663 Thanks for the article. It was very interesting and useful. As for me, I'm studying IT Contoling now. It turns out to be a very interesting field . I've found a lot of books in it at the pdf search engine <a href="http://pdf.rapid4me.com/">http://pdf.rapid4me.com </a>. And now I was looking for examples. It seems to me this is a good one because it can be widely used and thus of great importance.<br /> <div style="border: 1px solid #000000; margin: 0pt; padding: 0pt; display: none; opacity: 0.9; position: absolute; width: auto; z-index: 99999;" id="seolinx-tooltip"> <table style="border: 0pt none ; margin: 0pt; padding: 0pt; border-collapse: separate; width: auto;"> <tbody> <tr> <td style="border: 0pt none ; margin: 1px; padding: 0pt; font-family: tahoma; font-size: 11px; font-weight: bold;" id="seolinx-table"> <div style="margin: 0pt; padding: 0pt; overflow: auto; width: auto;"> <table style="border: 1px solid gray; margin: 0pt; border-collapse: separate;" id="seolinx-paramtable"> <tbody> <tr> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://toolbarqueries.google.com/favicon.ico" /> PR: <a href="javascript:{}" title="Google pagerank" seolinx-type="param" seolinx-param-index="0" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://www.google.com/favicon.ico" /> I: <a href="javascript:{}" title="Google index" seolinx-type="param" seolinx-param-index="1" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://www.google.com/favicon.ico" /> L: <a href="javascript:{}" title="Google links" seolinx-type="param" seolinx-param-index="2" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://siteexplorer.search.yahoo.com/favicon.ico" /> LD: <a href="javascript:{}" title="Yahoo linkdomain" seolinx-type="param" seolinx-param-index="12" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://www.bing.com/favicon.ico" /> I: <a href="javascript:{}" title="Bing index" seolinx-type="param" seolinx-param-index="20" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><a href="javascript:{}" title="Sitemap.xml" seolinx-type="param" seolinx-param-index="40" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://www.semrush.com/favicon.ico" /> Rank: <a href="javascript:{}" title="SEMRush Rank" seolinx-type="param" seolinx-param-index="41" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://www.semrush.com/favicon.ico" /> Traffic: <a href="javascript:{}" title="SEMRush SE Traffic" seolinx-type="param" seolinx-param-index="42" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://www.semrush.com/favicon.ico" /> Price: <a href="javascript:{}" title="SEMRush SE Traffic price" seolinx-type="param" seolinx-param-index="43" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://bar-navig.yandex.ru/favicon.ico" /> CY: <a href="javascript:{}" title="Yandex CY" seolinx-type="param" seolinx-param-index="50" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://www.yandex.ru/favicon.ico" /> I: <a href="javascript:{}" title="Yandex index" seolinx-type="param" seolinx-param-index="51" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://search.yaca.yandex.ru/favicon.ico" /> YCat: <a href="javascript:{}" title="Yandex catalogue" seolinx-type="param" seolinx-param-index="53" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://www.rambler.ru/favicon.ico" /> I: <a href="javascript:{}" title="Rambler index" seolinx-type="param" seolinx-param-index="60" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://search.rambler.ru/favicon.ico" /> Top: <a href="javascript:{}" title="Rambler Top100" seolinx-type="param" seolinx-param-index="61" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://www.baidu.com/favicon.ico" /> I: <a href="javascript:{}" title="Baidu index" seolinx-type="param" seolinx-param-index="70" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://www.baidu.com/favicon.ico" /> L: <a href="javascript:{}" title="Baidu link" seolinx-type="param" seolinx-param-index="71" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> <td style="border: 1px solid gray; padding: 2px; background: #f0f0f0 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: darkgreen; font-family: tahoma; font-size: 7pt; font-weight: bold; white-space: nowrap;"><img alt="" height="12px" width="12px" style="vertical-align: middle;" src="http://siteanalytics.compete.com/favicon.ico" /> C: <a href="javascript:{}" title="Compete Rank" seolinx-type="param" seolinx-param-index="108" style="color: blue; font-family: tahoma; font-size: 7pt; font-weight: bold; text-decoration: underline;">wait...</a></td> </tr> </tbody> </table> </div> </td> <td title="close" id="seolinx-tooltip-close" style="border: 0pt none ; margin: 0pt; padding: 1px; cursor: pointer; vertical-align: middle; width: auto;"><img alt="" src="chrome://seoquake/content/skin/close.gif" /></td> </tr> </tbody> </table> </div> ( Violet) http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx Thu, 12 Nov 2009 16:39:05 +0300 RE: How to create a custom control that adapts to various screen sizes http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx#comment2324 Hello Gopi <p>When I wrote the demo, I also had the same problem. I dont know why, but the VisualStudio changes the code. In order to built the project you need to perform the following steps:</p> <p>1. Double click on the error in your ErrorWindow, this will lead you to the <strong>partial </strong>declaration for the <strong>DemoChildWindow</strong>.</p> <p>2. DemoChildWindow must derives from System.Windows.Controls.<strong>FloatableWindow </strong>not from <strong>ChildWindow</strong> as it is now!!!</p> 3. Next go on line 39, where is your <strong>MainWindow </strong>declaration. It is probably: <br /> <strong>internal System.Windows.Controls.ChildWindow MainWindow;</strong> <p>and it must be</p> <p><strong>internal System.Windows.Controls.FloatableWindow MainWindow;</strong></p> <p>4. Go on line 59, where is the initialization of the <strong>MainWindow</strong>. Probable currently is:</p> <p><strong>this.MainWindow = ( ( System.Windows.Controls.ChildWindow)( this.FindName( "MainWindow" ) ) );</strong></p> <p>and the correct is:</p> <p></p> <strong>this.MainWindow = ( ( System.Windows.Controls.FloatableWindow )( this.FindName( "MainWindow" ) ) );</strong><br /> ( ppopadiyn) http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx Tue, 08 Sep 2009 15:07:05 +0300 RE: How to create a custom control that adapts to various screen sizes http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx#comment2317 <p>Hi,</p> <p> I'm using SL 3 RTW, and the demo code is not compiling, says, "must not specify different base class" pointing to <span style="font-size: 13px; color: #2b91af;">DemoChildWindow .</span></p> <p>Thanks, </p> <p>Gopi</p> <span style="font-size: 13px; color: #2b91af;"> <p> </p> </span> ( Gopi) http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx Mon, 07 Sep 2009 20:54:22 +0300 RE: How to create a custom control that adapts to various screen sizes http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx#comment2275 Hi Jay <p>Sorry for the inconvenience, the link is fixed.</p> <br /> ( ppopadiyn) http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx Mon, 24 Aug 2009 17:17:48 +0300 RE: How to create a custom control that adapts to various screen sizes http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx#comment2268 <p>Please correct the demo URL. It is shpwing like - <a href="http://http//www.silverlightshow.net/showcase/templatesizecontrol/testpage.html">http://http//www.silverlightshow.net/showcase/templatesizecontrol/testpage.html</a></p> <p>Cheers,</p> <p>Jay</p> ( Jayavelcs) http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx Sun, 23 Aug 2009 09:15:12 +0300 RE: How to create a custom control that adapts to various screen sizes http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx#comment2260 Hi Edward <p>Yes you note correct between switching different templates the items are hidden. The reason is that there are no templates defines for these dimensions ;)</p> <br /> ( ppopadiyn) http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx Wed, 19 Aug 2009 07:57:42 +0300 Problems on Mac OS X http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx#comment2258 Nice article.  Though, I noticed on Mac OS X + Safari + Silverlight 3 the items are hidden upon resizing most of the time. ( Edward J. Stembler) http://www.silverlightshow.net/items/How-to-create-a-custom-control-that-adapts-to-various-screen-sizes.aspx Wed, 19 Aug 2009 04:51:44 +0300