Использование Visual Studio с Silverlight 2
Файлы Page.xaml и Page.xaml.cs
Файл Page.xaml является для приложения UI по умолчанию. При компиляции вместе с ассоциированным с ним файлом выделенного кода он формирует класс Page, экземпляр которого будет объектом Page. Если вспомнить из предыдущего раздела, в качестве значения свойства RootVisual приложения был задан новый объект Page, что обеспечило данному классу UI по умолчанию.
Вот XAML, формируемый по умолчанию для Page.xaml:
<UserControl x:Class="SlidingBlocks.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=" http://schemas.microsoft.com/winfx/2006/xa ml" Width = "400" Height="300"> <Grid x:Name="LayoutRoot" Background ="White" > </Grid> </UserControl>
Прежде всего, обратите внимание, что контейнером XAML является UserControl. Этого не было в Silverlight 1.0. Как говорилось ранее, при построении приложений Silverlight 2 в Visual Studio, фактически, создаются элементы управления, которые компилируются в DLL и помещаются в XAP, который затем открывает и исполняет Silverlight.
В данном случае, видим, что экземпляр этого UserControl называется SlidingBlocks.Page. SlidingBlocks- это пространство имен (чтобы увидеть это, вернитесь и взгляните на свойства проекта), и Page - имя класса из этого пространства имен.
Объявления xmlns и xmlns:x задают пространство имен по умолчанию и дополнительное пространство имен, соответственно, которые должны использоваться для проверки корректности XAML Ранее был рассмотрен атрибут x:Class, используемый для описания класса этого элемента управления, который также является примером применения дополнительного пространства имен, запись которого начинается с префикса x:.
Наконец, ширине и высоте присвоены значения по умолчанию: 640 х 480.
Далее идет корневой Grid. В Silverlight 2 корневым элементом должен быть Container (Контейнер), которым в данном случае является Grid под именем LayoutRoot. Соответственно, все элементы дизайна UI будут дочерними элементами этого узла.
Вот выделенный код для данного XAML:
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SlidingBlocks { public partial class Page : UserControl { public Page() { // Необходима для инициализации переменных InitializeComponent(); } } }
Те, кто знаком с C#, видят, что этот код очень похож на код, который, возможно, вы использовали ранее. По сути, это стандартный класс Page, унаследованный от типа UserControl. В конструкторе класса выполняется общая настройка с помощью вызова метода InitializeComponent(). В разделе "Написание игры на Silverlight 2" данной лекции, в котором мы займемся созданием головоломки с перемещением фрагментов, вы добавите в этот модуль характерный для вашей страницы код.
Веб-проект
Кроме проекта элемента управления, шаблон создает Веб-проект, в котором размещается ваше приложение Silverlight. Этот Веб-проект включает два ASPX-файла: Default.aspx, являющийся пустой Веб-формой, на базе которой можно построить свое приложение; и тестовую страницу <ИмяПриложения> TestPage.aspx (например, SlidingBlocksTestPage.aspx ), которая содержит все необходимое для запуска Silverlight из ASP.NET.
Хотя Silverlight не имеет никаких зависимостей на стороне сервера, ASP.NET предлагает элементы управления, обеспечивающие возможность создания JavaScript и HTML на стороне клиента, необходимых для размещения Silverlight в браузере.
Файл TestPage включает ссылки на эти элементы управления. Далее приведена разметка для ASPX-файла:
<%@ Page="" Language="C#" AutoEventWireup="true" %> <%@ Register="" Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"style="height: 100%;"> <head runat="server"> <title>SlidingBlocks</title> </head> <body style="height: 100%;margin:0;"> <form id = "form1" runat="server" style="height:100%;"> <asp:ScriptManager ID="ScriptManager1" runat= "server"> </asp:ScriptManager> <div style="height:100%;"> <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SlidingBlocks.xap" MinimumVersion = "2.0.31005.0" Width = "100%" Height="100%" /> </div> </form> </body> </html>
Заметьте, что данная технология является развивающейся, поэтому атрибуты номера версии и открытого ключа могут немного меняться. Если для создания кода вы использовали шаблон, не стоит волноваться, все будет в порядке.
На этой странице используются два элемента управления ASP.NET. Первый -ScriptManager (Диспетчер сценариев), который является артефактом AJAX ASP.NET и превосходным средством управления загрузкой и использованием всех необходимых библиотек JavaScript в соответствующее время и в соответствующем месте.
Второй -элемент управления Silverlight. Обратите внимание, что в качестве параметра он принимает рассмотренный выше XAP. Этот элемент управления будет формировать правильный HTML-код для создания функций DIV и CreateSilverlight.
После запуска этой страницы будет сформировано много кода на HTML и JavaScript. Элемент управления Silverlight создается и получает файл XAP ближе к концу кода. Вот фрагмент кода:
<script type="text/javascript"> //<![CDATA[ Sys. Application. initialize(); Sys.Application.add init(function() { $create(Sys.UI.Silverlight.Control, {"source": ClientBin/SlidingBlocks.xap"}, null, null, $get("Xaml1 parent")); }); //]]> </script>
Браузер интерпретирует этот сценарий и создает элемент управления Silverlight. Обратите внимание, что корректную работу элементов управления Silverlight ASP.NET обеспечит ASP.NET. Если экземпляр Silverlight создается не из ASP.NET, по-прежнему могут использоваться сценарии JavaScript, входящие в SDK. Это подробно рассматривается в "Элемент управления браузера Silverlight" , "Элемент управления браузера Silverlight".
Написание игры на Silverlight 2
Silverlight поддерживает модель разделения дизайна и процесса разработки, при которой дизайн представляется с помощью XAML и код, обычно (хотя это не обязательно) на C#, создается в выделенном файле.
В данном примере XAML будет использоваться совсем немного, лишь для размещения Canvas, в котором будут находиться фрагменты рисунка и его полное изображение. Если вернуться к рис. 3.4, эти компоненты можно увидеть слева и справа, соответственно. Обратите внимание, что хотя главным контейнером страницы по умолчанию является Grid, для простоты в этой игре мы будем использовать Canvas.
Создание UI в XAML
Как видно на рис. 3.4, UI этой игры очень прост. Он состоит из области экрана (занимаемой элементом Canvas ), в которой располагаются перемещаемые фрагменты собираемого изображения, и области, в которой формируется визуальное представление собранного рисунка.
Вот пример XAML, который обеспечивает отображение Canvas и завершенного рисунка:
<UserControl x:Class="SlidingBlocks.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xam l/presentation" xmlns:x=" http://schemas.microsoft.com/winfx/2006/xa ml" Width = "640" Height="480"> <Canvas x:Name="LayoutRoot"> <Canvas x:Name="GameContainer" /> <Image Source="sl.jpg" Canvas.Left="500" Height="400" Width="400" Stretch="UniformToFill"> </Image> </Canvas> </UserControl>
Как видите, все очень просто. Canvas, в котором будут размещаться фрагменты собираемого изображения, называется GameContainer (Контейнер игры). Изображение, которое будет формировать визуальное представление собранного рисунка, является статическим, таким образом, не нуждается в имени. Изначально оно заполнено изображением sl.jpg из этого же Веб-проекта. Вот и весь дизайн. В следующем разделе займемся кодом.