۱۳۸۹ بهمن ۱۴, پنجشنبه

عوض کردن انیمیشن بارگذاری اولیه در سیلورلایت

تا حالا شده بخواهید آن انیمیشن بارگذاری اولیه برنامه سیلورلایتتون رو عوض کنید؟
انجام اینکار بسیار ساده است و بیشتر به یک طراح نیاز دارد تا برنامه نویس.

یک پروژه سیلورلایت ایجاد کنید و به پروژه وب آن یک فایل XAML اضافه کنید(من نام این فایل رو PreLoader گذاشتم).
! توجه کنید که برای طراحی لازم است مراجع PresentationCore و PresentationFramework و WindowsBase و System.Xml را در پروژه وبتان داشته باشید.
حالا هرچه که می خواهید هنگام بارگذاری نمایش داده شود را طراحی کنید و کنترلرهایی که نیاز به دانستن مقدار بارگذاری شده برنامه سیلورتان دارند را نام گذاری کنید.من فایل PreLoader ام را به شکل زیر ویرایش کردم:

 <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White">  
   <Grid VerticalAlignment="Center" Margin="20,0">  
     <Grid.RowDefinitions>  
       <RowDefinition Height="Auto" MinHeight="2"/>  
       <RowDefinition/>  
     </Grid.RowDefinitions>  
     <Border x:Name="progressBorder" BorderThickness="2" Height="25" Padding="2">  
       <Border.BorderBrush>  
         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
           <LinearGradientBrush.RelativeTransform>  
             <RotateTransform CenterY="0.5" CenterX="0.5" Angle="270"/>  
           </LinearGradientBrush.RelativeTransform>  
           <GradientStop Color="#FF6F64F9" Offset="0"/>  
           <GradientStop Color="#FF1300FF" Offset="1"/>  
         </LinearGradientBrush>  
       </Border.BorderBrush>  
         <Rectangle x:Name="progressBar" Height="17" HorizontalAlignment="Left">  
           <Rectangle.Fill>  
             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
               <LinearGradientBrush.RelativeTransform>  
                 <RotateTransform Angle="-90" CenterX="0.5" CenterY="0.5" />  
               </LinearGradientBrush.RelativeTransform>  
               <GradientStop Color="#FFCBD0FB" Offset="0"/>  
               <GradientStop Color="#FF383BFB" Offset="1"/>  
             </LinearGradientBrush>  
           </Rectangle.Fill>  
         </Rectangle>  
     </Border>  
     <Viewbox Grid.Row="1" Height="70">  
       <TextBlock x:Name="percentText" TextWrapping="Wrap" Foreground="#FF202DED" Text="0"/>  
     </Viewbox>  
   </Grid>  
 </Grid>  

اگر به پروژه وبتون دقت کرده باشید دو صفحه یکی html و یکی با پسوند aspx با نام AppName]TestPage] وجود دارد حالا صفحه ای که پسوند اون aspx هست رو باز کنید و پارامترهای زیر را به تگ object اضافه کنید:

 <param name="splashScreenSource" value="PreLoader.xaml" />  
 <param name="onSourceDownloadProgressChanged" value="onSilverAppDownloadProgressChanged" />  

در دو تگ فوق ما آدرس splash screen ای که می خواهیم نمایش داده شود را برابر PreLoader.xaml قرار دادیم (این آدرس برای شما می تواند متفاوت باشد) وسپس رویداد پیشرفت دانلود شدن برنامه سیلورمان(فایل xap) به کلاینت را هندل می کنیم بنابراین لازم است یک تابع با نام onSilverAppDownloadProgressChanged داشته باشیم و به وسیله ی آن با تغییر مقدار دانلود فایل xap آن را به PreLoader مان گزارش دهیم. برای این کار کمی جاوا اسکریپت نیاز داریم که می توانید آن را در یک فایل js قرار دهید و سپس به صفحه لینکش کنید یا آن را در تک script همین صفحه قرار دهید.
داخل تگ script تابع زیر را اضافه کنید:

     function onSilverAppDownloadProgressChanged(sender, args) {  
       var progressBorder = sender.findName("progressBorder");  
       var progressBar = sender.findName("progressBar");  
       var percentText = sender.findName("percentText");  
       progressBar.width = args.progress * progressBorder.actualWidth;  
       percentText.text = Math.round(args.progress * 100, 2) + "%";  
     }  

در ابتدای این تابع ما فقط چند عنصر را از داخل فایل xaml مان دریافت می کنیم(در اینجا پارامتر sender در اصل همان عنصر ریشه Grid در همان فایل xaml مان می باشد) تا بتونیم مقدار پیشرویی دانلود(با تغییر دادن width عنصر progressBar و اختصاص دادن درصد پیشروی دانلود به percentText) را نمایش دهیم.

برای مشاهده عملکرد PreLoader تان یک فایل حدودا" 30 مگی به پروژه سیلورتان اضافه کنید و سپس Build Action آن را برابر Content یا Resource قرار دهید(برای تغییر Build Action بر روی فایل راست کلیک و Prorperties را انتخاب کنید).

دانلود سورس برنامه.

موفق باشید.