Использование 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 из этого же Веб-проекта. Вот и весь дизайн. В следующем разделе займемся кодом.