Posted by: Glavs Blog, on 20 May 2007 | View original | Bookmarked: 0 time(s)

Like a lot of people lately, I have been playing with Silverlight (Alpha 1.1 version), trying to understand the nuts and bolts of it, and when that fails, just diving in and seeing how I go. I can’t say I am much of a WPF/XAML guru so things have been slow.

What is hard is just diving in and trying to implement stuff, then realising that I am trying to use an supported feature. A few examples:

I wanted to add some MouseOver effects to particular Canvas (while lamenting the absence of any grid controls in Silverlight), and eventually realised that the “MouseEnter” routed event is not supported as an event trigger, only the “Loaded” event is. Kinda weird I thought, a little painful but not too bad. It means you need to resort to code, and in my case, I wanted to do some scale animations, so needed to put those ScaleAnimations in the Resouce section of my canvas (that exists within my Page1.xaml file) like this:

 <Canvas.Resources>

  <Storyboard x:Name="fullScreenIconEnlargeTimeline">

    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="txtFullScreenIcon" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

      <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="2.646"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="txtFullScreenIcon" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

      <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="3.75"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="txtFullScreenIcon" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

      <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="-65"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="txtFullScreenIcon" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

      <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="27.5"/>

    </DoubleAnimationUsingKeyFrames>

  </Storyboard>

</Canvas.Resources>

My Canvas object definition looked something like:

<Canvas x:Name="fullScreenCanvas" Width="157" Height="72" Canvas.Left="515"

                    MouseLeftButtonUp="FullScreenClick" RenderTransformOrigin="0.5,0.5" Canvas.Top="-7"

          MouseEnter="FullScreenMouseEnter" MouseLeave="FullScreenMouseLeave">

// ... rest of definition continues.....

You’ll notice the MouseEnter="FullScreenMouseEnter" event definition. Now in my code behind (Page1.xaml.cs) I have this:

public void FullScreenMouseEnter(object sender, EventArgs e)

{

    fullScreenIconEnlargeTimeline.Begin();

}

Obviously it would be nicer to hook all this up in XAML (wel at least thats how I would like to do it) but that requires support for RoutedEvents other than Loaded as I mentioned earlier.

I should also note that I am using a combination of Blend and Visual Studio (Orcas) to get the XAML how I want it. Timelines are easier within Blend (IMHO) but in a lot of other cases I feel more confortable going into the XAML itself to edit. If I had XAML intellisense in Blend, I’d be much happier.

Advertisement

Free Agile Project Management Tool from Telerik TeamPulse Community Edition helps your team effectively capture requirements, manage project plans, assign and track work, and most importantly, be continually connected with each other.