Rants Tagged with “Silverlight”
Wow, after only 24 hours, the Dallas "A Taste of Silverlight" is already getting full. If you want to attend, please register now. As of 6pm EST, there were only 14 seats (out of 32) left!
The Silverlight Tour is proud to announce "A Taste of Silverlight" to be held on February 18, 2008 in Dallas, TX. Shawn Wildermuth is bringing his Silverlight chops to Dallas to discuss the big picture of Silverlight and answer the following questions:
- Why should I care about Silverlight
- What is Silverlight?
- When should I use Silverlight?
- What is the Silverlight story on the Server?
- How do developers and designers work together?
This event takes place in the afternoon of February 18th (starting at 1pm) at the Microsoft Office in Dallas.
There are only 32 seats available for this free event so sign up early! You can see event details and register at www.silverlight-tour.com/freesignup.aspx.
I've gotten the question a number of times about problems getting intellisense with Visual Studio 2008. If your XAML looks like this in Visual Studio 2008 then I can help you:
The problem stems from the fact that VS2008 wants to open .xaml files in the WPF Designer. Instead you can get intellisense and a better-faster experience if you open your Silverlight XAML files in the XML Editor. Most people assume that the intellisense is the lack of the Silverlight XSD file in the installation, but in fact VS2008 includes the Silverlight XSD document (but is unaptly named WPFE.XSD). To solve the problem of opening the file in th wrong editor, right click your XAML file in the solution explorer and pick "Open With..." (see right).
Once that dialog is open, you can pick the "XML Editor" and it will open the file with full intellisense. I usually click the "Set Default" button as well to always open XAML files (for both WPF and Silverlight) in the XML editor. I use Blend to edit these files and I am not a big fan of the built-in editor (as it seems to be designed mostly for Windows Forms developers to create simple experiences. You can see the "Open With..." dialog below:
Let me know if you have any questions!
I've written a quick example of a Google Gadget. There is nothing really special about it as its hosted in an IFrame so that I could get at local assets (like my RSS feed) to the Gadget. It isn't a lot to look at, but if anyone is interested in the process or want to add it to their iGoogle page, feel free. Here's the Gadget in action:
UPDATE: The BrowserHttpWebRequest doesn't look like it works right in Firefox (though the control does render). I'll have to look into it, but I think it may be a bug (since I am using Silverlight 1.1 in this case).
ANOTHER UPDATE: Should be working for Firefox now. I found an oddity I am still trying to work out.
I am headed to MIX 08 this year. I didn't make the cut of speakers but I hope to spend most of my time in Vegas away from the Poker tables.
As a bunch of bloggers have mentioned, MIX is a shiny version of the PDC (as far as I am concerned)...so its a great place to learn about Microsoft's web strategies and alignment with design. These include:
I am hoping to do a informal drink night while I am there but I am not sure how it will shape up. If you are going to MIX and want to meet up for beer and geek talk, reply to this message and i'll see what I can work out.
In response to a question posed on Silverlight.net's forums I crufted up a quick example of how to modify a Storyboard at runtime with Silverlight 1.1 (soon to be 2.0). The question was about both modifying the values of individual keyframes of but also changing the Storyboard's TargetName. Its driven by the ability to re-use Storyboards/Animations for multiple XAML elements.
I started with some simple XAML...three images placed near the top of the page. I want to have a storyboard with two animations; one for Canvas.Left and one for Canvas.Top. Here's the XAML I used:
...
<Canvas.Resources>
<Storyboard x:Name="theMover" Storyboard.TargetName="Image1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetProperty="(Canvas.Left)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="386"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetProperty="(Canvas.Top)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="127"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<Image x:Name="Image1" Source="sllogo.jpg"
Canvas.Top="8" Canvas.Left="8" />
<Image x:Name="Image2" Source="headshot.jpg"
Canvas.Left="154" Canvas.Top="8" />
<Image x:Name="Image3" Source="aglicense.jpg"
Canvas.Left="380" Canvas.Top="8" />
...
Now I wanted to have a handler in the code that when I clicked on a button to switch the animation between the three images and set the values of the storyboard. First I setup an array of the Images so I can switch between them simply:
Image[] _images;
int _currentImage = 0;
Random _rnd = new Random();
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
theButton.MouseLeftButtonUp +=
new MouseEventHandler(theButton_MouseLeftButtonUp);
_images = new Image[] { Image1, Image2, Image3 };
}
Next I handle the Mouse event and modify the Storyboard and kick it off:
void theButton_MouseLeftButtonUp(object sender, MouseEventArgs e)
{
// Stop the Storyboard (to ensure its stopped)
// We can't change anything while its running
theMover.Stop();
// Set the TargetName
theMover.SetValue<string>(Storyboard.TargetNameProperty,
_images[_currentImage].Name);
// Set random Values for the Canvas.Left Animation
DoubleAnimationUsingKeyFrames leftAnimation =
(DoubleAnimationUsingKeyFrames)theMover.Children[0];
leftAnimation.KeyFrames[0].Value = _rnd.Next(400);
leftAnimation.KeyFrames[1].Value = _rnd.Next(400);
// Set random Values for the Canvas.Left Animation
DoubleAnimationUsingKeyFrames topAnimation =
(DoubleAnimationUsingKeyFrames)theMover.Children[1];
topAnimation.KeyFrames[0].Value = _rnd.Next(400);
topAnimation.KeyFrames[1].Value = _rnd.Next(400);
// Start the Animation
theMover.Begin();
// Change the counter so it picks the next image next time
if (_currentImage < 2) _currentImage++;
else _currentImage = 0;
}
It isn't elegant, but it does work so if you want to re-use a Storyboard grab the sample and get going!
I was interviewed a few days ago on Silverlight and though i'd share the link. This is a very short interview with me to discuss Silverlight for the novice. If you want to get your big pictures answered, this Podcast might be for you!
Over the last few weeks I became interested in SeeqPod. Essentially it is a site that crawls the web and looks for open music files on servers. It has impleneted a search page and a search API. The SeeqPod site uses a Flash player to play the found music. I decided to use their API and create my own player using Silverlight.
The result is a little Silverlight app that shows off a couple of interesting techniques:
- Uses WCF's REST stack to retieve results from a site's web service and feed the results to a Silverlight app.
- Layering of HTML controls over a Silverlight control including supporting the Enter key to access the Silverlight control.
- Exposes managed code to JavaScript to allow searches to be performed from JavaScript (the app is written in Silverlight 1.1 Alpha).
- Shows several control written in Silverlight 1.1 and shows nesting of controls in other controls.
Take a look when you have a chance and i'd love any feedback you have. The source code is available on the SilverlightPod page.
The Silverlight Tour is going all Silvelright 2.0. The first class after MIX (Dallas, TX) will Silverlight 2.0 material only. While the new workshop will cover in brief detail the Silverlight 1.0 JavaScript integration, it will be highly focused on development using Silverlight 2.0.
I plan to have the new 2.0 outline up on the Silverlight Tour site by the end of the week. Its an exciting time for Silverlight. If you haven't made the jump yet, watch for the new version to be announced at MIX and dive in with your mad C#/VB.NET skillz!
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).
