Technology news and Jobs
The Linux distillery
Moonlighting Linux: the future of rich web apps
The Linux distillery
Moonlighting Linux: the future of rich web apps | Moonlighting Linux: the future of rich web apps |
|
| by David M Williams | |
| Thursday, 08 May 2008 | |
|
Page 4 of 4 In our sample code, for instance, we find four files. The first is an application manifest, a DLL of our compiled project, and then two library DLLs, System.Windows.Controls.dll and System.Windows.Controls.Extended.dll. These are included because they implement the two controls used on the form. Any assemblies referenced by your project will also be included.Featured Whitepaper
5 Best Practices for Smartphone Support
Here’s something cool however. Silverlight offers a lot more graphical tricks and features than the above languages which ultimately are restricted to what HTML can offer. One such facility is animation using a sequence-based storyboard. This technique will be familiar to anyone who has developed in Flash previously. These storyboards are supported purely within XAML, although they can be bolstered by C# code. This essentially means that if you can find the right tools – like LunaEclipse – a talented designer can produce effective and stunning user interfaces without having to resort to raw markup tags or program code. Here’s an example animation which illustrates several things. Insert this into Page.xaml and recompile and reload. The first thing to note is that we use the tag <Canvas.Triggers> to say we want to handle an event within XAML. Previously, we responded to the button click in the code-behind file. That wasn’t necessary; we could also have handled it within XAML. There’s flexibility in how you design. The next tag specifies the event we which to catch, namely when the Canvas – our drawing space – is loaded. The actions we wish to perform when the event fires follow next. We use two DoubleAnimation tags. This tag adjusts an object’s property slowly over time to reach a defined value. At the end of the code segment, just before the closing </Canvas> tag notice we’ve defined an Ellipse with dimensions of 200x200 pixels. That’s what we’ll work on. The first DoubleAnimation tag increases the width to 400 over 1 second. The second increases the height to 400 over 1 second. To make sure you see it, both tags also reverse the behaviour – so the ellipse snaps back into shape – and repeats over and over. <Canvas x:Name=”LayoutRoot” Background=”White”> <Canvas.Triggers> <EventTrigger RoutedEvent=”Canvas.Loaded”> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation To=”400” Storyboard.TargetProperty=”Ellipse.Width” Storyboard.TargetName=”ellipse” Duration=”0:0:1” RepeatBehavior=”Forever” AutoReverse=”True” /> <DoubleAnimation To=”400” Storyboard.TargetProperty=”Ellipse.Height” Storyboard.TargetName=”ellipse” Duration=”0:0:1” RepeatBehavior=”Forever” AutoReverse=”True” /> <Storyboard> </BeginStoryboard> </EventTrigger.Actions> </Canvas.Triggers>
<Ellipse Width=”200” Height=”200” Fill=”Blue” x:Name=”ellipse” /> |
| < Next story in category | Previous story in the category > |
|---|




Tags




