Rants Tagged with “Silverlight”
Near the end of the Silverlight Tour class yesterday, one of the students (Rik Robinson of R2Musings.com fame) asked about how a clipping mask could be moved around a page. He wanted to do something like a spotlight over an image. The problem was mostly exacerbated by the fact that the Ellipse tool in Expression Blend 2 created a PathGeometry (in the form of a Path.Data syntax) like so:
<Image x:Name="theImage" Width="472" Height="472"
Canvas.Top="8" Source="4033636_thumbnail.jpg"
Stretch="Fill" Canvas.Left="63.489"
Clip="M250.011,177.5 ..."/>
As a background, the Geometry class supports a Transform which should allow us to move it with a TranslateTransform. The PathGeometry syntax in the Clip is smaller than using a EllipseGeometry so I can understand why Blend does it that way. I wanted to see this work starting with the XAML so I had Blend translate this to the verbose syntax (by adding it to a WPF app where size isn't as important as it uses baml for serialization, but that's another story). With the new verbose syntax in hand I added the TranslateTransform:
<Image x:Name="theImage" Width="472" Height="472"
Canvas.Top="8" Source="Background.jpg"
Stretch="Fill" Canvas.Left="19.489">
<Image.Clip>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="301.011,148.5">
<BezierSegment Point1="301.011,197.10105798511"
Point2="260.268912234602,236.5"
Point3="210.011,236.5" />
<!-- Removed: IsSmoothJoin="True"-->
<BezierSegment Point1="159.753087765398,236.5"
Point2="119.011,197.10105798511"
Point3="119.011,148.5" />
<!-- Removed: IsSmoothJoin="True"-->
<BezierSegment Point1="119.011,99.8989420148902"
Point2="159.753087765398,60.5"
Point3="210.011,60.5" />
<!-- Removed: IsSmoothJoin="True"-->
<BezierSegment Point1="260.268912234602,60.5"
Point2="301.011,99.8989420148902"
Point3="301.011,148.5" />
<!-- Removed: IsSmoothJoin="True"-->
</PathFigure>
<PathGeometry.Transform>
<TranslateTransform X="0" Y="0"
x:Name="spotlightMover" />
</PathGeometry.Transform>
</PathGeometry>
</Image.Clip>
</Image>
Note that I had to remvoe the "IsSmoothJoin" from the Segments as that's not valid Silverlight XAML, but otherwise it was the same. This should allow us to move the X or Y of the spotlightMover in code right? Unfortuantely changing the TranslateTransform has no effect. I tested the code to make sure that the Transform existed and that the X value was changing...nope it was changing, but the Clip wasn't moving.
Last attempt, I copied all this same code into a WPF app to see if maybe the Transform didn't work the way I expected...nope it worked perfectly there. Hrmph!
I finally relented and used an EllipseGeometry in the Clip and tried a TranslateTransform there to see if the problem was related to the PathGeometry...nope same behavior. To help Rik get an answer, I showed him a solution using the EllipseGeometry's CenterPoint property to assign new Points to move it around the page. Not satisfying but workable.
I've attached the example of the problem in WPF and Silverlight to show it works in WPF but not in Silverlight. (Note the example using the CenterPoint isn't in there but its easy to implement...maybe even Rik will post his example on his blog...hint, hint).
I was teaching on the Silverlight Tour today and since the new release of Silverlight 2.0 is around the corner, I decided to do most my demos in Silverlight 1.1 instead of Silverlight 1.0. There were two problems that cropped up during the class. Luckily my students were patient while we dug deeper to find out why it was acting wonky. The two issues I found were:
- Using a MediaElement to load a video, the DownloadProgress always returned 1.0 or 100% no matter what I did.
- Using the Downloader to download a zip file just simply threw an exception that it couldn't download the file.
Curious? In both cases it stemmed from the fact that the 1.1 templates in Visual Studio 2008 are both file based. When you launch the test.htm page, it lauches it in the browser using the address of the file as a FILE based address (e.g. "d:\workshop\testproject\test.htm").
The problem is that the FILE protocol is treated very differently by Silverlight. When you download a video over a FILE Uri, the progress fires repeatedly but for some reason always reports 100% (I assume its because it already exists on disk). Downloading the .zip file seems to be related to a security limitation of downloading from the local machine.
To fix this, I simply created a quick and dirty ASP.NET web site project and did a Silverlight Link to my Silverlight project.. Luckily, this worked fine. The difference here is that the ASP.NET project uses the built-in web server to serve up the page so we could really test these concepts over a web server which is closer to reality than the FILE protocol.
I hope that the new templates released for 2.0 don't use this same technique.
If you have spent anytime with Silverlight, you've likely run across the cross-site scripting issue. Essentially, the browser doesn't let you do web requests from other sites than the one you're hosted in. This is to prevent nasty script kiddies from doing nefarious things.
While I hope that Microsoft solves this in the way that Flash does (essentially a white-list that is located on the server that says what sites are ok), I do suggest a workaround: proxy calls offsite through your server. You can create a simple service on your site that returns data from another site. Then in Silverlight its a matter of making a request up to your own server to get the data and work with it in whatever way you want.
Luckily with .NET 3.5 and WCF's new REST stack, this is really easy. For example, here is a simple WCF service using the new WebGet attribute to specify that it can be called like a REST service:
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(
RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
// Add [WebGet] attribute to use HTTP GET
[WebGet(ResponseFormat=WebMessageFormat.Xml)]
[OperationContract]
public XElement DoWork()
{
return XDocument.Load("http://wildermuth.com/rss").Root;
}
}
The trick here is to add the WebGet attribute to your method. Note I am specifying that I want XML (JSON is the default) so I can get the data back to Silverlight as XML. As a return type I am specifying XElement (XDocument may make more sense but its not Serializable) so we load a XDocument and just return the root of the document. Voila, a service you can call from Silverlight to call out to another service.
I could have changed this to accept a parameter with the request to make and I didn't do this on purpose. You can imagine if you leave an open relay like that open, you're inviting script kiddies to do nasty things.
What do you think?
We are happy to announce that we have winners for the caption contest. The winning caption is:
The winning caption was submitted by Frank Lavigne. He will be given a free seat to the Silverlight Tour stop next week in Atlanta. In addition, we've decided to have a couple of honorable mentions who will receive a free Silverlight Tour T-Shirt! The winners were notified by e-mail today.
Honorable Mentions
- "I'm going to shoot my eye out with SilverLight!", Sean Gerety
- "Look ma, no flash!", Laurent Duveau
Congratulations to everyone who won!
UPDATE: To those of you who thought that I dressed up my children in clothes like these...don't worry, that's a picture of me from the 70's when clothes like that were almost hip.
Due to trouble contacting all the winners of the contest, we've decided to delay the announcement of the winners until Thursday, January 10th. Thanks you for patience.
Don't forget the
Silverlight Tour Contest. I will be closing the contest at 12pm EST (9pm PST) tomorrow (1/9/2007) and announcing the contest by the end of the day. If you haven't tried to caption the picture, this is your last chance!
Rik Robinson has created a nice little Silvelright Widget for showing the weather. Check it out!
I am giving away a free seat to the Silverlight Tour stop in Atlanta on January 15th - 17th, 2008. This includes free admission to the workshop and all the materials associated with the class. If you are not in the Atlanta area, you are responsible for all travel expenses for the workshop.
To win the free seat, I am doing a Caption Contest! To enter follow these steps:
- Add a comment to this blog entry with your caption. (You may need to visit this blog's individual page by clicking here.)
- Put your e-mail in the URL section of the Comment form. (All e-mail addresses will be held in strict confidence and will not be used for marketing or sold to any 3rd parties.)
One one submission per person. Duplicate submissions will exclude you from the contest. If you have questions about this contest, please send me an email by visiting my contact form here.
A winner will be announced next Wednesday, January 9th, 2008.
UPDATE: Some of you are just saying you want to be in on the contest in comments...Please put the Caption you want in the comments (and put your e-mail in the URL so I know how to get a hold of you ).
UPDATE: The Winners have been announced. Follow this link to see who won!
I just arrived back from teaching Silverlight in Toronto and was thinking about what I was doing this time last year. A year ago I had just finished spending a couple of months with WPF/E (the name before it was Silvelright) and had given a two day class in Seattle to some internal groups on WPF/E. In addition, I was just finishing up the first draft of the WPF/E (previous name of Silverlight) appendix for Chris Sells/Ian Griffith's WPF Book. I've spent most of this year working on Silverlight (both articles, the courseware and actually teaching the Silverlight Tour). Its been a great year.
With the Silverlight 2.0 release on most people's minds (with its probable Beta at MIX 08), I've decided to take a look back and note some of my major observations about where Silverlight is now and where I think it is going:
- Silverlight 1.0 is a great platform for creating interactive or video solutions.
- Silvelright 2.0 will be a great platform for creating Line of Business applications in addition Silverlight 1.0 capabilities.
- Silverlight still has to catch up with Flex on features (even after 2.0 I think) but the tool story is surprisingly mature for a product of its age.
- When you can view advertising in Silvelright, the plugin will be officially ubiquitous (e.g. users won't install the plugin to view an ad).
- Silverlight 2.0 has a real control model, Silverlight 1.0 does not.
- I wonder how much of a story the DLR support for Silverlight really is.
- Silverlight needs a packaging format similar to .swf files to compete in some situations...should be an option not the default behavior.
- The Designer/Development story is great for Silverlight...hopefully MS will do the same for HTML (e.g. allow Expression Web to open .sln files please please)
Other than the normal features coming in Silverlight 2.0 (read Scott Guthrie's blog here to see the roadmap), i'd like to publically lobby for the following features/changes:
- A solution similiar to Flash's for a white-list of allowed cross-domain requests. The existing cross-domain scripting limitations is great for security but makes building solutions tougher.
- Assembly resolution in the current request is just broken. Its too hard to package up multiple assemblies unless they exist at the root of the web server (which is the wrong place). Hopefully a web-enabled fusion solution will appear.
- Allow assemblies to work with WebResources so that we can embed assemblies into ASP.NET AJAX controls to simplifiy the deployment strategy.
- Support some sort of obfuscation to help 3rd party control developers protect their IP.
- In the upcoming ASP.NET Silvelright Control, support embedding the XAML into the page to reduce roundtrips.
- A better solution for additionally downloaded fonts than have to assign font packages to each and every TextBlock individually.
- More controls are better than data binding...so if you have to made a decision between delivering data binding and reducing the #/controls...please give us more controls and no data binding.
What do you think?
While playing with Astoria and Silverlight today, I found a problem with the WebRequest Headers. Luckily, Pablo Castro in the ADO.NET Team at Microsoft was there to set me straight. I wanted to warn everyone of this bug in case it bites you:
The BrowserHttpWebRequest.Accept property is improperly mapped to another HTTP header. So both of these examples won't work the way you expect:
HttpWebRequest req = new BrowserHttpWebRequest(theUri);
req.Accept = "application/json"; // Bugged
req.Headers[HttpRequestHeader.Accept] = "application/json"; // Bugged
To get around this problem, use the weakly typed Header collection:
HttpWebRequest req = new BrowserHttpWebRequest(theUri);
req.Headers["accept"] = "application/json"; // Works
Thanks again Pablo!
