Создание собственного Splash Screen в Silverlight

24 авг. 2009 г. | Автор: Unknown | Ярлыки: Custom splash screen, Silverlight |

Создавая приложение, хочется всегда сделать что-нибудь такое эдакое, чтоб красиво и оригинально :) Стильный дизайн формочек, кнопочек и прочих элементов gui, делающих их такими привлекательными для пользователя, что он аж не может удержаться, чтоб не потыкать их мышкой, это хорошо. Это просто отлично. Но это все подается пользователю после загрузки программы, а до этого .... До этого мы видим Splash Screen. Вспомним PhotoShop, CorelDraw - пока загружаются необходимые библиотеки, мы видим Splash Screen с логотипом программы. Очень умный и хороший шаг. Но это для десктоп приложений. В сфере web-приложений (сейчас я говорю о приложениях, созданных с помощью Java, Flex, Silverlight) начальная загрузка приложения гораздо более длительна по времени в силу ограничений пропускной способности интернет-канала. И , ожидая загрузки приложения, мы зачастую видим однотипные Splash Screens, которые встроены и идут по умолчанию для конкретных инстументальных средств. Например, для Silverlight картинка загрузки приложения такова:Красиво, но для коммерческого законченого продукта непременимо. Даже для себя хочется чего-нибудь другого....
Чтобы изменить Spash Screen в Silverlight , потребуются руки, немного фантазии , любимые инструменты (топор и секира :) ) и вобщем-то всё :)
Изменения Splash Screen условно можно разделить на два этапа - подговка нового Splash Screen и его внедрение. Вот так это пафосно звучит :)
И так, создаем новое Silverlight-приложение со следующими опциями:

Далее, в настройках проекта изменяем стартовую страницу с *.asp на *.html:
Теперь в папку ClientBin добави файл SplashScreen.xaml. Уточню, что нам нужен только обычный xaml, не UserControl! В этом файле будет наш Splash Screen. Открываем файл в Expression Blend и редактируем. Вот что получилось у меня:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="201" Height="89" Background="#FFFFFFFF"> <canvas name="LayoutRoot"> <Rectangle x:Name="rectBorder" StrokeThickness="1" Stroke="#FFC8C8C8" Height="7" Width="200" HorizontalAlignment="Left"/> <Rectangle name="rectBar" fill="#FF336EA9" height="7" width="0" horizontalalignment="Left" /> <textblock top="29" width="157" height="29" text="My Splash Screen" textwrapping="Wrap" fontsize="18" left="24" foreground="#FF1C516D"></textblock> </canvas> </canvas>

На этом, в принципе, первая часть заканчивается. Могу посоветовать добавить в клиентскую часть ресурсный файл и в него запихнуть чего-нибудь тяжелого, например, видео-ролик где-то размером с 20 мб. Это для того, чтобы успеть увидеть SplashScreen.
Теперь вторая часть - внедрение!
Создаем файл SpashSreen.js со следующим содержанием и добавляем его в серверную часть проекта (splash.web):

function onSourceDownloadProgressChanged(sender, eventArgs) { var rectBar = sender.findName("rectBar"); var rectBorder = sender.findName("rectBorder"); if (eventArgs.progress) rectBar.Width = eventArgs.progress * rectBorder.Width; else rectBar.Width = eventArgs.get_progress() * rectBorder.Width; }

Это фунция будет вызываться каждый раз, как увеличится процент загрузки xap-файла приложения. Что и как делает функция, по-моему, понятно интуитивно.
Далее.
Открываем файл, который указали как стартовый при билде. У меня это splashTestPage.html. В раздел <head> страницы добавляем строку
<script type="text/javascript" src="SplashScreen.js"></script>.

Далее в теле документа Silverlight-объекту добавим такие параметры:
<param name="splashscreensource" value="ClientBin/SplashScreen.xaml"> <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged">
Все. Запускаем и наслаждаемся :)
Почитать еще об этой процедуре можно тут http://msdn.microsoft.com/en-us/library/cc903962(VS.95).aspx
Исходный код примера можно скачать тут http://wsite.in.ua/files/splash_screen.rar