מדריך Silverlight – הוספת מסך Splash

כאשר אפליקציית Silverlight היא פשוטה ואינה תוספת הרבה מקום, טעינת האפליקציה היא כמעט מידית. לעומת זאת, באפליקציות מסחריות, נפח האפליקציה עלול לגדול לנקודה שבה לוקח לאפליקציה זמן לרדת מהשרת ולהיטען במחשב. נרצה לראות נוכל להוסיף מסך Splash שיטען מידית ויוצג בזמן שהאפליקציה הכבדה נטענת.

ברירת המחדל ב Silverlight היא להראות מסך Splash שנראה כך:

בפרק נלמד כיצד להוסיף מסך Splash מותאם אישית לאפליקציית ה Silverlight שלנו.

כדי ליצור מסך Splash משלנו נצטרך להוסיף קובץ XAML שלא יהיה חלק מהאפליקציה אלא יפורסם בנפרד לידה (loose XAML) לאפליקציה. קובץ זה יכיל אלמנטים של גרפיקה שיציגו למשתמש את התקדמות ההורדה. להלן דוגמא לקובץ כזה בשם SplashScreen.xaml:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name="parentCanvas"
        Width="850"
        Height="600">
  <Canvas Canvas.Top="228.834"
          Canvas.Left="246.329"
          Width="357"
          Height="31.379">
    <Rectangle Width="27.545"
               Height="1"
               x:Name="uxProgress"
               Canvas.Top="29.545"
               Canvas.Left="1.4">
      <Rectangle.RenderTransform>
        <TransformGroup>
          <ScaleTransform x:Name="uxProgressBar"
                          ScaleX="1"
                          ScaleY="0" />
          <SkewTransform AngleX="0"
                         AngleY="0" />
          <RotateTransform Angle="270" />
          <TranslateTransform X="0"
                              Y="0" />
        </TransformGroup>
      </Rectangle.RenderTransform>
      <Rectangle.Fill>
        <LinearGradientBrush EndPoint="1,0.5"
                             StartPoint="0,0.5">
          <GradientStop Color="#FFEA1D1D"
                        Offset="1" />
          <GradientStop Color="#FF5310DA"
                        Offset="0" />
          <GradientStop Color="#FF29C2D0"
                        Offset="0.28" />
          <GradientStop Color="#FF2975D0"
                        Offset="0.72" />
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
 
    <TextBlock x:Name="uxStatus"
               Height="25"
               Canvas.Left="155"
               Text="Loading..."
               TextWrapping="Wrap"
               Canvas.Top="6"
               Foreground="White" />
 
    <Path Width="356.85"
          Height="1"
          Fill="#FF3A3A3A"
          Stretch="Fill"
          Stroke="#FF000000"
          Canvas.Top="0"
          Data="M0,170.5 L356.84209,170.5"
          Opacity="0.35" />
    <Path Width="1.662"
          Height="29.03"
          Fill="#FF3A3A3A"
          Stretch="Fill"
          Stroke="#FF000000"
          Canvas.Top="0.48"
          Canvas.Left="0.2"
          Data="M360,168 L360,0"
          Opacity="0.35" />
 
    <Path Width="357.84"
          Height="1"
          Fill="#FF3A3A3A"
          Stretch="Fill"
          Stroke="#FF000000"
          Canvas.Top="29"
          Data="M0,170.5 L356.84209,170.5"
          Opacity="0.35" />
    <Path Width="358.85"
          Height="1"
          Fill="#FFA2A2A2"
          Stretch="Fill"
          Stroke="#FF000000"
          Canvas.Top="30"
          Data="M0,170.5 L356.84209,170.5"
          Opacity="0.25" />
    <Path Width="1.662"
          Height="30"
          Fill="#FF3A3A3A"
          Stretch="Fill"
          Stroke="#FF000000"
          Canvas.Left="356.01"
          Data="M360,168 L360,0"
          Opacity="0.35"
          Canvas.Top="-0.498" />
    <Path Width="1"
          Height="31"
          Fill="#FFA2A2A2"
          Stretch="Fill"
          Stroke="#FF000000"
          Canvas.Left="357.333"
          Data="M360,168 L360,0"
          Opacity="0.245"
          Canvas.Top="-0.498" />
  </Canvas>
  <Canvas.Background>
    <LinearGradientBrush EndPoint="1,0.5"
                         StartPoint="0,0.5">
      <GradientStop Color="Black"
                    Offset="0" />
      <GradientStop Color="White"
                    Offset="1" />
    </LinearGradientBrush>
  </Canvas.Background>
</Canvas>
    

בקובץ ה HTML שמכיל את אפליקציית ה Silverlight שלנו נוסיף פרמטר בשם SplashScreenSource ונקבע את ערכו להיות שם קובץ ה XAML שהוספנו. בנוסף נרשם לאירוע ב JavaScript בשם onSourceDownloadPRogressChanged. להלן דוגמת קוד:

    <object data="data:application/x-silverlight," type="application/x-silverlight-2"
      width="100%" height="100%">
      <param name="source" value="ClientBin/Splash.xap" />
      <param name="onerror" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="splashscreensource" value="SplashScreen.xaml" />
      <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
          style="border-style: none" />
      </a>
    </object>

הדבר האחרון שעלינו לעשות הוא לממש את הפונקציה onSourceDownloadProgressChanged כך שתשנה את הגרפיקה בקובץ ה XAML כאשר ההורדה של האפליקציה מתקדמת. להלן דוגמא:

<script type="text/javascript">
  function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName("uxStatus").Text = "Loading: " + Math.round(eventArgs.progress * 1000) / 10 + "%";
    sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;   }
</script>

התוצאה: