Wrox Blox and Silverlight Animation

Wrox has launched a new series of technology shorts named 'Wrox Blox' (formerly eBriefs). More in depth than your typical article yet more concise than your average book, these technology shorts are great for getting up to speed quickly on new technologies and subjects of interest.

 

From the Wrox website:

"Written by the best programmers in the their fields, Wrox Blox are short informational pieces and code that will help get you up-to-speed and keep you up-to-date."

 

As part of the launch, I have contributed a technology short titled Silverlight 1.0 Animation. It teaches you how to create animations using Microsoft's new platform for building rich Internet applications — Silverlight. It also introduces animation concepts and answers questions such as when and why you want to use animation in your Web development. I hope this short, and the associated code, will give you a good foundation for creating animations. More importantly, I hope you enjoy it!

 

Three other shorts have also been released as part of the Wrox Blox launch:

• Leverage LINQ in ASP.NET 3.5 Projects, by Roger Jennings
• iPhone and iPod Touch Programming, by Richard Wagner
• Building a Photo Gallery with Adobe AIR, by Todd. A. Anderson

....and of course, many more interesting shorts to come!

Silverlight: Useful Tips for Working with the Latest Bits and Tool Previews

The latest bits were just released for Silverlight 1.0 and 1.1 along with updated previews of Visual Studio 2008 Beta 2, Silverlight Tools for Visual Studio 2008 Beta 2, Expression Blend August Preview, ASP.NET Futures, etc. That's a lot of updates - and a lot of hassle - but definitely well worth the effort.

 

Of course, with every refresh of bits and update of tools, there's bound to be a few issues. Here are a few links to articles written by some very smart people out there in the "blogoshpere" that I found valuable and in some cases quite helpful:

 

So you just installed Visual Studio 2008 Beta 2 and you don't get intellisense or colorization for your JavaScript code? Yup, this happened to me too. Check out this post on the webdevtools blog.

 

Ok, if you had intellisense issues and read the last post, they should be working now. Once the JavaScript editor is playing nice, why not improve the intellisense a bit for Silverlight now? Check out this project from Justin-Josef:  

 

Are your AJAX applications are not behaving in Visual Studio 2008 Beta 2? First, check your project's target framework and then read this article if you are still having issues. 

 

Are you working with PNG or GIF files in your Silverlight application? Experiencing seemingly unexplainable issues with your Silverlight Image control? If so, read this post by Rob Conery (about 1/2 way down the page) (Note: I had these issues as well and the answer was 'JPEGs')

 

If you don't enjoy editing your Silverlight project's JavaScript files in notepad from Expression Blend, here's a nice workaround posted by Microsoft Evangelist Jaime Rodriguez.

 

If you want your 'split views' to display vertically in Visual Studio 2008, Scott Gu has your answer.

 

Finally, a word about input and hit-testing. If you have a Silverlight element overlaying another element, but you want the element underneath to capture input, what do you do? Jaime Rodriguez writes about the IsHitTestVisible property, which will solve your problems.

Silverlight: Resizing a Canvas and its Child Elements - Together

I was reading through the Silverlight forums this evening when I came across a seemingly obvious question, that had an answer that surpised me. Well, it probably wouldn't have surprised anyone else, but hey...

The question asked was basically 'When I resize a Canvas object, how do I resize all of the child elements of the Canvas as well?'.

My first thought was to iterate over the children collection of the Canvas, increasing each child elements Width and Height properties. And so I set off to try it out. Sure enough it worked, but the child elements started overlapping each other as they increased in size, which wasn't part of the plan. So I simply reset the Canvas.Top and Canvas.Left properties as well, and that worked, problem solved. Well, there is a much simpler way. Another developer posted the answer, which should have been obvious: Simply use a ScaleTransform to scale the Canvas, and all children will scale as well. Ahhh yes, much easier!

The following code shows both methods, and I know which one I will use next time I need to resize a canvas and its child elements:

The XAML:

<Canvas  
  xmlns="http://schemas.microsoft.com/client/2007"  
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  Width="640"   
  Height="480"  
  >  
  <Canvas     
    x:Name="CanvasToResize"     
    Width="272"     
    Height="168"     
    Background="#FF2D3F81"     
    RenderTransformOrigin="0.0,0.0"          
    MouseLeftButtonDown="resize"    
    >    
    <Canvas.RenderTransform>      
      <ScaleTransform         
        x:Name="scale"          
        ScaleX="1"         
        ScaleY="1"        
        />    
    </Canvas.RenderTransform>                
    <Rectangle       
      Fill="#FFFF1919"       
      Stroke="#FFFFFFFF"       
      Width="72"       
      Height="32"       
      Canvas.Left="32"       
      Canvas.Top="24"      
      />            
    <Ellipse       
      Fill="#FFDB6969"       
      Width="40"       
      Height="40"       
      Canvas.Left="136"       
      Canvas.Top="88"      
      />            
    <Path       
      Fill="#FFFFFFFF"       
      Stretch="Fill"       
      Stroke="#FF000000"       
      Width="65"       
      Height="1"       
      Canvas.Left="199.5"       
      Canvas.Top="149.5"       
      Data="M320,248 L384,248"      
      />      
  </Canvas>
</Canvas>

JavaScript - Method #1: Manual Resize:

var resizeBy = 1.1;

function resize(sender, args) {
              
  var canvas = sender.findName("CanvasToResize");
    
  for (var i=0; i<canvas.children.count; i++) {
    
    var child = canvas.children.getItem(i);
        
    child.Width = child.Width*resizeBy;
    child.Height = child.Height*resizeBy;
    
    var top = child.getValue("Canvas.Top");   
    var left = child.getValue("Canvas.Left");
    
    child.setValue("Canvas.Top", top*resizeBy);
    child.setValue("Canvas.Left", left*resizeBy);
  }
    
  canvas.Width = canvas.Width*resizeBy;
  canvas.Height = canvas.Height*resizeBy;
}

JavaScript - Method #2: Scale to Resize

var resizeBy = 1.1;

function resize(sender, args) {    

  var st = sender.findName("scale");

  var scaleX = st.getValue("ScaleX");
  var scaleY = st.getValue("ScaleY");
        
  st.setValue("ScaleX", scaleX*resizeBy);
  st.setValue("ScaleY", scaleY*resizeBy);    
}

Silverlight Makes a Big Splash Today...

If you are paying attention to the Silverlight blog-o-sphere today, you know that there were a lot of big announcements at Mix 07!

Tim Sneath posted a bunch of screencasts on Silverlight highlighting some cool features and how-to's. (my favorites are the Video Overlay and Video Scrubbing tutorials).

Mike Harsh announced on his blog that CLR support is now ready for a test drive in Silverlight. I've been excitedly waiting for this for quite some time. A few other exciting links can be found here as well.

Laurence Moroney also announced a new Silverlight community is online http://silverlight.net/Default.aspx and it looks like there's some great content there.

Keep an eye on the blogs... more great info is sure to be popping up quickly as Silverlight momentum seems to be picking up!

Getting Started with WSS and MOSS Development Links

The following list is my starting point for links to WSS and MOSS development. Really, this is just for my own organization efforts, but maybe someone else will stumble on these and get a head start. A lot of people have put a great effort into documenting their own lists already, so I've linked to them here as well. Thanks to them all for their effort!


MSDN: Windows SharePoint Services Developer Portal


MSDN: SharePoint Server 2007 Developer Portal


SDK: Windows SharePoint Services 3.0


SDK: SharePoint Server 2007


TechNet: Windows SharePoint Services 3.0


TechNet: SharePoint Server 2007


Microsoft SharePoint Team Blog


How to Create a MOSS 2007 VPC Image (Excellent Resource - thanks to Tony Zink)


Another Great Setup Guide by Robert te Kaat and Bart Gunneman


A Great Overview TechNet Webcast


MOSS Video and Screencast listing on Russ Stalter's Blog


SharePoint 2007 Book Listing on Russ Stalter's Blog


A Gazillion Great Resource Links Categorized by Mark Kruger

Microsoft Offers Free SharePoint 2007 eClinics

Microsoft is offering two free 2-hour eClinics on the following Office 2007 subjects:

• Microsoft Windows SharePoint Services 3.0 (WSS)


• Microsoft Office SharePoint Server 2007 (MOSS)

These are an excellent way to get up to speed quickly on the capabilities of these new and upgraded products.

Here are the links.. hope you enjoy:

Clinic 5045: Inside Look at Developing with Microsoft® Windows® SharePoint® Services 3.0

Clinic 5046: Inside Look at Building and Developing Solutions with Microsoft® Office SharePoint® Server 2007