• Web Design » Silverlight » Manuale Silverlight

Metodo 1:

Creiamo due animazioni all' interno dell' ExpressionBlend usando il KeyFrame Recorder. Muoveremo semplicemente la"Tendina" in questione nel punto in cui vogliamoappaia, e a questo punto in un intervallo di 1 secondo, loanimeremo verso l' alto.Questa azione la chiameremo"PLMoveUP"; a questo punto dovremo creare unaseconda animazione, chiamata "PLMoveDown" chefaccia esattamente il contrario, per riportare il menu allanormalità.

Sebbene straordinariamente funzionale, questo approcciopresenta alcuni problemi. Ad esempio, se un utente clikkaripetutamente sul bottone, il menu apparirà escomparirà a flash, a scatti, il che va evitato.

Metodo 2:

Anzichè avere due animazioni per la"Tendina" , sarebbe meglio farne una unica che lecontenga entrambe. Per questo esistono le API di Silverlight:Storyboard.AutoReverse e Storyboard.Seek(amt):

In tal modo l' animazione funziona, ma è comunquedifficile capire a che punto dell' animazione ci sitrova. per fare ciò ci sarebbe bisogno di un timerche, ad intervalli regolari, faccia un ping/pong allaStoryboard per un aggiornamento. Per far ciò dovremoimpostare l' attributo x:Name a uno deiSplineDoubleKeyFrames al fine di ricavare il valore deiKeyTime.Seconds:

Metodo 3:

Potremmo invece utilizzare l' AjaxControlToolkitdell' ASP.NET, tramite il quale saremmo in grado di fareleva su animazioni già esistenti.

Innanzitutto, creiamo un progetto usando il template ASP.NETAJAX Futures Web application (.NET Framework 3.5); a questopunto aggiungiamo al progetto il JavaScript SilverlightProject.

Impostiamo poi le strutture della GUI, usando il MicrosoftExpression Blend.

Colleghiamo ora le due cose, scegliendo "AddSilverlight Link.." nel Solution Explorer di VisualStudio 2008.

A questo punto, ecco il codice:

    1:  <!-- ---------------------    2: SILVERLIGHT CONTROL    3: -------------------------- -->    4:  <div class="SilverlightHost">    5:  <asp:Xaml XamlUrl="~/Page.xaml" runat="server" ID="SilverlightControl" Windowless="true"    6:  Width="1000" Height="750" />    7:  </div>

    1:  <script type="text/javascript">    2:  Sys.Application.add_init(appInitHandler);    3:  function appInitHandler() {    4:  }    5:     6:  // Silverlight is Ready, now proceed...    7:  function appOnLoad() {    8:  //$create(Demo.Person,null,null,null,null);    9:  var animator = new AjaxControlToolkit.Animation.FadeAnimation($get("Overlay"), 0.5, 20, "FadeOut");    10:  var customanim = new AjaxControlToolkit.Animation.ScriptAction("overlay", 0.5, 40, null);    11:  animator.play();    12:  customanim.onStep = onCustomStep;    13:  customanim.play();    14:  }    15:     16:  // Custom Animation Sequence    17:  function onCustomStep(percentage) {    18:  var o = $get("SilverlightControl").content.FindName("pulldown");    19:  var amt = Math.round(456*percentage/100);    20:  o.SetValue("Canvas.Top", amt + -456);    21:  }    22:  </script>