Blog - Silverlight 3 Splash Screen or Custom Splash Loader Screen

Silverlight 3 Splash Screen or Custom Splash Loader Screen

Oct 17

Written by: New Age Solution
10/17/2009 8:45 PM

When we build custom application for the client we want that final touch of giving customer custom loader and here is how you do it.

DONWLOAD CODES

When we are creating high end Silverlight application we want to stay away from default Silverlight splash loaderscreen and give the customer customized or branded loading screen.

Here is very simple steps to do it:

- Create SplashScreen.xaml WITHOUT .cs and should looks something like

    1 <Canvas xmlns="http://schemas.microsoft.com/client/2007"
    2         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    3         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    4         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    5         x:Name="parentCanvas" Height="146" Width="548" mc:Ignorable="d" Background="#4C373737">
    6     <Canvas.Resources>
    7         <Storyboard x:Name="SplashAnimation" RepeatBehavior="Forever">
    8             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="NewAgeLogo" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
    9                 <EasingDoubleKeyFrame KeyTime="00:00:02" Value="360"/>
   10                 <EasingDoubleKeyFrame KeyTime="00:00:04" Value="360"/>
   11             DoubleAnimationUsingKeyFrames>
   12         Storyboard>
   13     Canvas.Resources>
   14     <Canvas x:Name="LoadingPane" Height="130" Width="532" Canvas.Left="8" Canvas.Top="8" HorizontalAlignment="Left" VerticalAlignment="Top">
   15         <Border x:Name="ProgressBarBorder" BorderBrush="#FF766E6E" BorderThickness="1" CornerRadius="2" Height="86" Width="284" Canvas.Left="63" Canvas.Top="19" HorizontalAlignment="Left" VerticalAlignment="Top"/>
   16         <Rectangle x:Name="ProgressBar" Width="1" Height="82" Canvas.Left="65" Canvas.Top="21" d:LayoutOverrides="Height" RenderTransformOrigin="0,0.5" HorizontalAlignment="Left" VerticalAlignment="Top">
   17             <Rectangle.Fill>
   18                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
   19                     <GradientStop Color="#FF535743" Offset="0.333"/>
   20                     <GradientStop Color="#FF7A8063" Offset="0.814"/>
   21                 LinearGradientBrush>
   22             Rectangle.Fill>
   23             <Rectangle.Triggers>
   24                 <EventTrigger RoutedEvent="Canvas.Loaded">
   25                     <BeginStoryboard>
   26                         <Storyboard RepeatBehavior="Forever">
   27                             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="NewAgeLogo" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
   28                                 <EasingDoubleKeyFrame KeyTime="00:00:02" Value="360"/>
   29                                 <EasingDoubleKeyFrame KeyTime="00:00:04" Value="360"/>
   30                             DoubleAnimationUsingKeyFrames>
   31                         Storyboard>
   32                     BeginStoryboard>
   33                 EventTrigger>
   34             Rectangle.Triggers>
   35             <Rectangle.RenderTransform>
   36                 <TransformGroup>
   37                     <ScaleTransform x:Name="ProgressBarTransform" ScaleY="1" ScaleX="0"/>
   38                 TransformGroup>
   39             Rectangle.RenderTransform>
   40         Rectangle>
   41         <TextBlock x:Name="StatusText" Text="90.9%" TextWrapping="Wrap" FontSize="32" Width="121" TextAlignment="Right" Foreground="#FFA3C626" Height="46" Canvas.Left="359" Canvas.Top="40"/>
   42         <Canvas x:Name="NewAgeLogo" Height="269.105" Width="685.093" Opacity="0.5" RenderTransformOrigin="0.5,0.5" Canvas.Left="-140" Canvas.Top="-74">
   43             <Canvas.Projection>
   44                 <PlaneProjection/>
   45             Canvas.Projection>
   46             <Canvas.RenderTransform>
   47                 <TransformGroup>
   48                     <ScaleTransform ScaleX="0.25" ScaleY="0.25"/>
   49                     <SkewTransform/>
   50                     <RotateTransform/>
   51                     <TranslateTransform/>
   52                 TransformGroup>
   53             Canvas.RenderTransform>
   54             <Path Fill="Black" Stretch="Fill" Height="38.503" Width="387.366" Canvas.Left="0" Canvas.Top="214.932" Data="F1M455.628,301.843L68.262,301.843L68.262,263.34L455.628,263.34z"/>
   55             <Path Fill="Black" Stretch="Fill" Height="93.25" Width="71.25" Canvas.Left="312.426" Canvas.Top="115.462" Data="F1M416.5,212.995C412.449,212.995,409.094,214.216,406.432,216.655C403.768,219.097,402.438,222.042,402.438,225.495C402.438,229.024,403.75,231.989,406.375,234.392C409,236.794,412.375,237.995,416.5,237.995C420.549,237.995,423.904,236.794,426.568,234.392C429.23,231.989,430.563,229.024,430.563,225.495C430.563,222.042,429.211,219.097,426.512,216.655C423.813,214.216,420.475,212.995,416.5,212.995 M451.938,195.345L451.938,253.896L431.463,256.12L431.463,247.444C428.91,250.595,425.871,252.995,422.344,254.646C418.816,256.294,414.762,257.12,410.184,257.12C401.777,257.12,394.76,254.194,389.131,248.345C383.502,242.493,380.688,235.179,380.688,226.401C380.688,217.175,383.52,209.655,389.188,203.841C394.854,198.028,402.266,195.12,411.424,195.12C415.551,195.12,419.229,195.776,422.455,197.089C425.682,198.401,428.385,200.331,430.563,202.878L430.563,194.894C430.563,190.604,429.398,187.634,427.07,185.978C424.742,184.323,420.498,183.495,414.342,183.495C410.811,183.495,407.262,183.815,403.695,184.454C400.127,185.095,396.541,186.017,392.938,187.22L398.254,165.788C403.055,165.112,407.275,164.622,410.914,164.321C414.553,164.021,417.799,163.87,420.65,163.87C432.055,163.87,440.121,165.958,444.848,170.132C449.574,174.306,451.938,182.71,451.938,195.345"/>
   56             <Path Fill="Black" Stretch="Fill" Height="138.875" Width="87.936" Canvas.Left="390.819" Canvas.Top="113.145" Data="F1M501.265,182.678C495.948,182.678,491.483,184.525,487.872,188.219C484.261,191.912,482.456,196.42,482.456,201.74C482.456,206.982,484.28,211.471,487.933,215.203C491.583,218.937,496.026,220.803,501.265,220.803C506.423,220.803,510.827,218.918,514.479,215.145C518.13,211.371,519.956,206.904,519.956,201.74C519.956,196.578,518.13,192.111,514.479,188.338C510.827,184.564,506.423,182.678,501.265,182.678 M547.017,163.451L542.382,179.592L538.228,179.592L535.38,179.592C537.989,183.164,539.968,186.875,541.313,190.725C542.657,194.574,543.331,198.404,543.331,202.213C543.331,208.166,541.866,213.602,538.94,218.523C536.013,223.445,531.899,227.373,526.601,230.309C531.187,234.027,534.726,238.516,537.218,243.775C539.71,249.035,540.956,254.67,540.956,260.682C540.956,271.912,536.954,281.346,528.954,288.979C520.952,296.611,511.05,300.428,499.245,300.428C491.243,300.428,483.995,298.701,477.499,295.254C471.003,291.803,465.378,286.629,460.624,279.73L475.218,262.053C477.593,267.271,480.837,271.283,484.952,274.092C489.067,276.898,493.657,278.303,498.724,278.303C504.263,278.303,508.854,276.584,512.495,273.152C516.136,269.717,517.956,265.473,517.956,260.422C517.956,254.422,515.978,249.527,512.021,245.738C508.063,241.949,502.997,240.053,496.825,240.053C492.63,240.053,488.456,240.857,484.302,242.463C480.146,244.07,475.892,246.559,471.54,249.928L476.405,232.686C470.866,228.881,466.595,224.221,463.589,218.709C460.583,213.197,459.081,207.311,459.081,201.045C459.081,189.785,463.081,180.389,471.083,172.854C479.083,165.32,489.146,161.553,501.267,161.553C503.88,161.553,508.772,161.969,515.942,162.799C523.11,163.631,528.913,164.045,533.351,164.045C535.569,164.045,537.786,164.006,540.005,163.926C542.224,163.848,544.56,163.689,547.017,163.451"/>
   57             <Path Fill="Black" Stretch="Fill" Height="249.748" Width="204.591" Canvas.Left="480.502" Canvas.Top="0" Data="F1M656.288,56.569L669.348,51.127L680.235,48.408L690.029,48.408L699.285,48.408L709.622,52.216L714.522,53.305L719.42,52.216L721.593,51.127L723.774,54.394L724.316,58.204L721.051,65.823L721.051,69.631L718.87,72.353L722.14,78.337L724.858,84.325L728.121,89.222L729.1,91.144L727.74,93.869L726.567,93.348L725.811,95.727L732.001,95.764L730.528,101.769L730.192,106.406L729.1,110.222L728.011,111.312L731.01,115.675L733.462,119.765L734.825,123.308L734.825,125.76L733.191,127.938L729.92,128.761L730.463,130.666L734.282,129.575L737.278,129.029L739.734,127.938L743.274,128.761L744.639,130.12L745.452,141.839L745.731,147.566L746.817,153.017L745.731,155.197C745.731,155.197,740.005,159.831,736.46,163.099C732.919,166.371,726.923,174.275,726.923,174.275C726.923,174.275,725.559,174.821,725.559,177.819L725.559,180.819L729.1,183.272L737.824,208.892C737.824,208.892,741.641,212.437,742.458,215.436C743.274,218.43,743.274,220.883,743.274,220.883C743.274,220.883,745.731,224.703,746.546,227.701L747.366,230.696L749.544,234.24L751.179,244.325L752.814,249.775L753.355,255.503L753.089,261.499L752.543,266.947C752.543,266.947,752.543,279.212,751.721,281.936C750.903,284.665,745.452,298.293,731.01,294.749C716.562,291.208,701.371,283.727,688.485,275.943C677.111,269.072,665.979,262.779,665.979,262.779L669.951,280.031L662.323,294.202C662.323,294.202,577.795,297.154,577.732,297.156C577.029,297.177,575.521,299.396,572.855,297.156C570.328,295.031,566.49,290.41,564.715,288.194C558.738,280.735,554.247,270.855,551.773,261.583C549.262,252.169,548.404,242.261,548.897,232.75C549.494,221.243,551.523,209.372,556.329,198.822C558.72,193.574,561.32,189.143,563.002,186.706C567.779,179.772,575.1,171.82,578.64,169.367C582.185,166.915,582.783,165.23,583.913,164.719C585.039,164.207,587.701,163.388,587.701,163.388C587.701,163.388,589.345,160.212,591.796,159.394C594.253,158.576,596.577,158.712,599.577,157.346C602.575,155.984,608.079,151.106,608.079,151.106C608.079,151.106,611.623,145.383,613.526,144.292C615.437,143.203,619.253,142.657,619.253,142.657C619.253,142.657,619.528,140.479,623.891,139.661C628.25,138.841,630.702,138.023,630.702,138.023C630.702,138.023,629.066,130.394,631.791,129.027C634.518,127.666,636.975,126.304,636.975,126.304C636.975,126.304,634.247,122.486,635.339,118.127C636.424,113.765,634.247,99.047,634.247,99.047C634.247,99.047,633.701,86.234,634.518,83.236C635.339,80.239,637.787,73.969,637.787,73.969L640.515,70.155L635.881,68.518L638.059,65.519L647.055,63.884L637.787,61.979L638.059,60.612L649.235,63.067L651.688,60.886L650.87,58.978L654.959,60.612z"/>
   58             <Path Fill="#FFFEFEFE" Stretch="Fill" Height="23.511" Width="9.966" Canvas.Left="631.336" Canvas.Top="112.72" Data="F1M708.363,161.128L699.598,161.525L701.989,167.504L705.978,173.882C705.978,173.882,708.766,174.677,707.566,178.661L706.375,182.645L707.967,184.639L709.564,183.84C709.564,183.84,708.363,175.073,707.967,169.099C707.566,163.118,708.363,161.128,708.363,161.128"/>
   59             <Path Fill="#FFFEFEFE" Stretch="Fill" Height="12.584" Width="3.922" Canvas.Left="657.806" Canvas.Top="49.123" Data="F1M726.112,97.611C726.112,97.611,726.341,97.459,727.51,97.574C728.678,97.687,729.054,97.459,729.586,97.912C730.114,98.367,730.035,99.763,729.849,100.972C729.66,102.179,729.206,105.542,729.172,106.259C729.13,106.977,728.678,109.129,728.491,109.583C728.305,110.035,726.447,110.638,726.224,109.28C725.998,107.922,725.963,107.354,726.486,106.448C727.018,105.542,726.791,105.426,726.567,104.711C726.341,103.994,727.205,103.201,727.053,101.918L726.901,100.634L727.582,100.292C727.582,100.292,727.885,99.576,727.167,99.122C726.447,98.669,726.112,97.611,726.112,97.611"/>
   60             <Canvas x:Name="TextBlock" Height="151.844" Width="138.047" Canvas.Left="481.976" Canvas.Top="117.261">
   61                 <Path Fill="#FFFEFEFE" Stretch="Fill" Height="151.844" Width="138.047" Canvas.Left="0" Canvas.Top="0" Data="F1M688.285175,208.356425L593.83205,269.387675C597.347675,274.481425,601.535175,278.231425,606.378925,280.6533C611.222675,283.075175,616.847675,284.2783,623.26955,284.2783C630.76955,284.2783,638.14455,282.5283,645.410175,279.012675C652.6758,275.512675,659.51955,270.356425,665.95705,263.575175L678.660175,293.543925C671.26955,301.168925,662.64455,307.075175,652.76955,311.24705C642.89455,315.418925,632.70705,317.512675,622.1758,317.512675C602.066425,317.512675,585.0508,310.043925,571.128925,295.0908C557.191425,280.137675,550.2383,261.825175,550.2383,240.137675C550.2383,219.075175,557.285175,201.387675,571.39455,187.106425C585.503925,172.825175,602.8008,165.668925,623.26955,165.668925C636.33205,165.668925,648.566425,169.4033,659.95705,176.8408C671.33205,184.293925,680.785175,194.793925,688.285175,208.356425L688.285175,208.356425 M645.972675,203.62205C642.45705,200.8408,638.76955,198.793925,634.89455,197.450175C631.01955,196.12205,626.89455,195.450175,622.535175,195.450175C611.39455,195.450175,601.972675,199.2783,594.285175,206.9033C586.597675,214.5283,582.753925,223.856425,582.753925,234.87205C582.753925,236.575175,582.83205,238.2783,583.01955,239.9658C583.20705,241.6533,583.472675,243.5283,583.847675,245.5908L645.972675,203.62205"/>
   62             Canvas>
   63             <Path Fill="#FFFEFEFE" Stretch="Fill" Height="30.625" Width="18" Canvas.Left="9.772" Canvas.Top="219.631" Data="F1M95.914,272.711L93.054,275.57C92.31,274.406,91.453,273.516,90.483,272.9C89.513,272.285,88.476,271.977,87.374,271.977C86.151,271.977,85.137,272.362,84.333,273.134C83.53,273.905,83.128,274.883,83.128,276.066C83.128,278.008,85.1,279.783,89.044,281.393C89.801,281.699,90.385,281.938,90.797,282.111C92.463,282.83,93.752,283.857,94.665,285.193C95.578,286.529,96.034,288.061,96.034,289.789C96.034,292.329,95.173,294.443,93.453,296.131C91.732,297.82,89.576,298.664,86.984,298.664C85.204,298.664,83.579,298.26,82.11,297.451C80.642,296.643,79.283,295.403,78.034,293.732L81.339,290.633C82.069,291.904,82.912,292.869,83.868,293.524C84.824,294.18,85.859,294.508,86.975,294.508C88.315,294.508,89.41,294.089,90.26,293.251C91.109,292.413,91.534,291.35,91.534,290.059C91.534,288.037,89.668,286.295,85.937,284.832C85.844,284.792,85.771,284.766,85.718,284.752C83.211,283.768,81.435,282.635,80.387,281.352C79.339,280.068,78.815,278.424,78.815,276.416C78.815,273.876,79.625,271.846,81.247,270.322C82.867,268.801,85.026,268.039,87.724,268.039C89.371,268.039,90.912,268.447,92.347,269.262C93.781,270.077,94.971,271.227,95.914,272.711"/>
   64             <Path Fill="#FFFEFEFE" Stretch="Fill" Height="30.75" Width="30.782" Canvas.Left="55.081" Canvas.Top="219.631" Data="F1M138.734,272.164C135.622,272.164,133.018,273.245,130.923,275.406C128.828,277.568,127.781,280.232,127.781,283.398C127.781,286.578,128.825,289.245,130.913,291.4C133.001,293.556,135.608,294.633,138.734,294.633C141.833,294.633,144.433,293.549,146.535,291.381C148.636,289.212,149.687,286.551,149.687,283.398C149.687,280.232,148.639,277.568,146.544,275.406C144.45,273.245,141.846,272.164,138.734,272.164 M138.734,268.039C140.647,268.039,142.465,268.352,144.186,268.977C145.907,269.602,147.439,270.498,148.782,271.668C150.509,273.211,151.832,274.992,152.749,277.013C153.666,279.033,154.125,281.16,154.125,283.395C154.125,285.322,153.775,287.193,153.078,289.008C152.38,290.822,151.38,292.447,150.078,293.883C148.628,295.479,146.937,296.695,145.003,297.533C143.07,298.37,140.98,298.789,138.734,298.789C136.807,298.789,134.986,298.477,133.271,297.852C131.557,297.227,130.042,296.33,128.726,295.16C126.985,293.604,125.652,291.816,124.729,289.795C123.805,287.775,123.343,285.641,123.343,283.395C123.343,281.16,123.808,279.03,124.739,277.003C125.669,274.976,126.998,273.197,128.726,271.668C130.042,270.498,131.557,269.602,133.271,268.977C134.986,268.352,136.807,268.039,138.734,268.039"/>
   65             <Path Fill="#FFFEFEFE" Stretch="Fill" Height="29.594" Width="17.281" Canvas.Left="114.79" Canvas.Top="220.006" Data="F1M187.427,268.414L187.427,293.852L200.333,293.852L198.698,298.008L183.052,298.008L183.052,268.82z"/>
   66             <Path Fill="#FFFEFEFE" Stretch="Fill" Height="30.344" Width="20.688" Canvas.Left="158.674" Canvas.Top="220.006" Data="F1M231.311,268.414L231.311,284.989C231.311,288.512,231.764,290.984,232.669,292.406C233.574,293.828,235.099,294.539,237.242,294.539C239.399,294.539,240.96,293.865,241.925,292.516C242.891,291.166,243.374,288.93,243.374,285.807L243.374,268.82L247.624,268.414L247.624,286.783C247.624,289.166,247.447,290.992,247.095,292.262C246.742,293.533,246.154,294.646,245.33,295.604C244.504,296.562,243.38,297.328,241.958,297.9C240.535,298.472,239.045,298.758,237.489,298.758C233.951,298.758,231.308,297.767,229.559,295.784C227.81,293.802,226.936,290.802,226.936,286.783L226.936,268.82z"/>
   67             <Path Fill="#FFFEFEFE" Stretch="Fill" Height="29.532" Width="19.781" Canvas.Left="206.483" Canvas.Top="220.412" Data="F1M275.896,268.82L294.526,268.82L294.526,272.977L287.12,272.977L287.12,298.008L282.745,298.352L282.745,272.977L274.745,272.977z"/>
   68             <Path Fill="#FFFEFEFE" Stretch="Fill" Height="29.938" Width="4.313" Canvas.Left="254.122" Canvas.Top="220.006" Data="F1M326.697,268.414L326.697,298.008L322.384,298.352L322.384,268.82z"/>
   69             <Path Fill="#FFFEFEFE" Stretch="Fill" Height="30.75" Width="30.781" Canvas.Left="287.679" Canvas.Top="219.631" Data="F1M371.332,272.164C368.219,272.164,365.615,273.245,363.521,275.406C361.426,277.568,360.378,280.232,360.378,283.398C360.378,286.578,361.422,289.245,363.511,291.4C365.599,293.556,368.206,294.633,371.332,294.633C374.43,294.633,377.031,293.549,379.132,291.381C381.234,289.212,382.285,286.551,382.285,283.398C382.285,280.232,381.237,277.568,379.142,275.406C377.047,273.245,374.444,272.164,371.332,272.164 M371.332,268.039C373.245,268.039,375.063,268.352,376.784,268.977C378.505,269.602,380.037,270.498,381.379,271.668C383.107,273.211,384.43,274.992,385.347,277.013C386.264,279.033,386.722,281.16,386.722,283.395C386.722,285.322,386.373,287.193,385.675,289.008C384.978,290.822,383.978,292.447,382.675,293.883C381.226,295.479,379.535,296.695,377.601,297.533C375.667,298.37,373.578,298.789,371.332,298.789C369.404,298.789,367.583,298.477,365.869,297.852C364.154,297.227,362.639,296.33,361.324,295.16C359.583,293.604,358.25,291.816,357.326,289.795C356.402,287.775,355.941,285.641,355.941,283.395C355.941,281.16,356.406,279.03,357.336,277.003C358.267,274.976,359.596,273.197,361.324,271.668C362.639,270.498,364.154,269.602,365.869,268.977C367.583,268.352,369.404,268.039,371.332,268.039"/>
   70             <Path Fill="#FFFEFEFE" Stretch="Fill" Height="31.5" Width="23.5" Canvas.Left="347.388" Canvas.Top="219.287" Data="F1M415.65,267.695L434.838,288.379L434.838,268.82L439.15,268.414L439.15,299.195L420.025,278.49L420.025,298.008L415.65,298.352z"/>
   71             <Path Fill="#FFA3C626" Stretch="Fill" Height="93.375" Width="73.5" Canvas.Left="0.538" Canvas.Top="114.862" Data="F1M142.3,198.334L142.3,254.645L119.925,256.645L119.925,203.176C119.925,197.395,118.772,192.965,116.472,189.887C114.171,186.809,110.831,185.27,106.456,185.27C101.476,185.27,97.683,186.979,95.079,190.395C92.476,193.811,91.175,198.859,91.175,205.541L91.175,254.645L68.8,256.645L68.8,166.77L91.175,164.395L91.175,174.553C94.56,170.867,98.358,168.064,102.573,166.146C106.786,164.229,111.3,163.27,116.116,163.27C124.919,163.27,131.483,166.164,135.81,171.951C140.136,177.74,142.3,186.533,142.3,198.334"/>
   72             <Path Fill="#FFA3C626" Stretch="Fill" Height="94.25" Width="85.625" Canvas.Left="91.866" Canvas.Top="114.612" Data="F1M219.503,186.59C217.321,184.863,215.028,183.586,212.622,182.76C210.216,181.934,207.661,181.52,204.954,181.52C198.036,181.52,192.188,183.887,187.415,188.617C182.64,193.35,180.253,199.133,180.253,205.969C180.253,207.02,180.308,208.072,180.421,209.123C180.534,210.174,180.702,211.338,180.929,212.615z M245.753,189.52L187.134,227.383C189.312,230.547,191.903,232.881,194.909,234.387C197.915,235.893,201.409,236.645,205.392,236.645C210.05,236.645,214.634,235.553,219.142,233.369C223.649,231.186,227.896,227.986,231.878,223.77L239.753,242.393C235.173,247.127,229.823,250.789,223.704,253.381C217.583,255.973,211.259,257.27,204.728,257.27C192.263,257.27,181.714,252.629,173.079,243.348C164.444,234.066,160.128,222.697,160.128,209.242C160.128,196.166,164.503,185.193,173.253,176.324C182.003,167.455,192.724,163.02,205.419,163.02C213.53,163.02,221.116,165.332,228.177,169.955C235.237,174.58,241.097,181.102,245.753,189.52"/>
   73             <Path Fill="#FFA3C626" Stretch="Fill" Height="91.875" Width="125.5" Canvas.Left="180.742" Canvas.Top="115.737" Data="F1M249.004,167.863L271.197,164.145L288.434,216.777L308.824,165.271L317.049,165.271L338.566,216.1L353.775,164.145L374.504,167.863L344.537,256.02L335.75,256.02L312.992,202.463L290.574,256.02L281.111,256.02z"/>
   74         Canvas>
   75     Canvas>
   76 Canvas>

Line 16 : progressBar contains ProgressBarTransform scale X at Line 37 which will be incrmented via progress callback.

Line 41 : StatusText will be updated with number of percent completed via progress callback.

Line 23 : EventTrigger on Rectangle.Load will begin animation or storyboard that rotates the logo.

- Next hook in Splash sreen loader in Silverlight control host in .aspx

   63 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
   64   <param name="source" value="ClientBin/SplashScreenLoaderDemo.xap"/>
   65   <param name="onError" value="onSilverlightError" />
   66   <param name="background" value="#4C373737" />
   67   <param name="minRuntimeVersion" value="3.0.40624.0" />
   68   <param name="autoUpgrade" value="true" />
   69   <param name="splashscreensource" value="ClientBin/SplashScreen.xaml" />
   70   <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
   71 
   72   <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
   73       <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
   74   a>
   75 object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px">iframe>div>

Line 69 : Set SplashScreenSource

Line 70 : Set progress callback which is in JavaScript

- Add JavaScript to update StatusText and progressBarTransform

Add JavaScript to .aspx

<script type="text/javascript" src="ClientBin/SplashScreen.js">script>

And JavaScript looks like

    1 function onSourceDownloadProgressChanged(sender, eventArgs)
    2 {
    3     var progress = eventArgs.progress;
    4     var totalWidth = document.body.clientWidth;
    5     var totalHeight = document.body.clientHeight;
    6 
    7     var slHost = sender.getHost();
    8     // Resize canvas to fill the browser
    9     var background = slHost.content.findName("parentCanvas");
   10     background.Width = totalWidth;
   11     background.Height = totalHeight;
   12 
   13     // Reposition the progress bar to the center of new size
   14     var loadingPane = slHost.content.findName("LoadingPane");
   15     loadingPane.setValue("Canvas.Left", Math.round((totalWidth - loadingPane.Width) / 2));
   16     loadingPane.setValue("Canvas.Top", Math.round((totalHeight - loadingPane.Height) / 2));
   17 
   18     // Fill progress bar
   19     var pgFillMaxWidth = slHost.content.findName("ProgressBarBorder").Width - 4;
   20     sender.findName("StatusText").Text = Math.round((eventArgs.progress * 1000)) / 10 + "%";
   21     sender.findName("ProgressBarTransform").ScaleX = eventArgs.progress * pgFillMaxWidth;
   22 
   23     slHost = null;
   24 }

Line 3- 5 : gets the width and height of current browser white space in order to use in calculating the center to place ProgressBar

Line 9 - 11 : Sets ProgressBar's parent canvas width and height to fill the background

Line 13 - 16 : properly places the ProgressBar at the center

Line 20 - 21 : Updates the StatusText and fills the progress bar

NOTE: When creating SplashScreen first use Blend to create storyboard to add fancy animation for wow factor and simply copy SplashScreen.xaml to Web Application. Once things are in place it would be matter of making it nice or have graphic designer to work on in.

Trackback Print

Tags: Silverlight 3

Categories:

Location: Blogs Parent Separator

New Age Solution Blog Child Separator

All Things Silverlight

0 comment(s) so far...

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:

Security Code Enter the code shown above in the box below
Add Comment Cancel