Стояла задача – сделать анимацию в Silverlight, формирование страницы в зависимости от некоторых условий (например, в зависимости от пользователя), и чтобы все хорошо смотрелось в IE и FF.
Создадим новый проект Silverlight 1.0. По-умолчанию он состоит из следующих файлов:
Default.html и Default.html.js
Scene.xaml и Scene.xaml.js
Silverlight.js
Default.html – содержит ссылки на все скриптовые файлы в заголовке и вызов функции createSilverlight() в теле.
Scene.xaml – собственно xaml-код приложения.
Silverlight.js и другие *.js-файлы содержат java-script, необходимый для работы.
Увы, в данном случае возможно показывать только заранее созданную xaml-форму. Но часто требуется, чтобы наполнение формы зависело от каких-то условий. Например, разным пользователям нужно показывать разные пункты меню. Попробуем сделать это.
Для начала создадим в проекте еще aspx-форму с именем XamlForm.aspx и в редакторе заменим стандартный код на следующий:
Код XAML: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="XamlForm.aspx.cs"
Inherits="SilverlightJSApplication1.XamlForm" ContentType="text/xaml" %>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="#FFF6F4F0"
x:Name="Page">
<Canvas x:Name="Menu" Width="400" Height="420"
Canvas.Top="200" Canvas.Left="320">
<Rectangle Width="400" Height="420" Fill="#FFFFFFFF"
Stroke="#FF000000" RadiusX="10" RadiusY="10"/>
</Canvas>
</Canvas>
Также добавим в проект файл XamlForm.js и в него перенесем код из Scene.xaml.js, очистив от всего лишнего:
Код JavaScript:
if (!window.SilverlightJSApplication1)
window.SilverlightJSApplication1 = {};
SilverlightJSApplication1.Scene = function()
{
}
SilverlightJSApplication1.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
}
}
Файлы Scene.xaml и Scene.xaml.js можно удалить из проекта, они больше не понадобятся.
Чтобы увидеть, что у нас получилось, нужно в файле Default.html заменить путь к Scene.xaml.js на путь к новому XamlForm.js и добавить атрибуты в :
leftmargin=”0″ topmargin=”0″ marginheight=”0″ marginwidth=”0″
А в Default.html.js заменить строку source c ‘Scene.xaml’ на ‘ XamlForm.aspx’. Теперь в качестве xaml-файла у нас обыкновенная страница aspx, и мы имеем возможность динамически ее наполнять. Поправим aspx код на:
Код XAML: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="XamlForm.aspx.cs"
Inherits="SilverlightJSApplication1.XamlForm"
ContentType="text/xaml" %>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="#FFF6F4F0"
x:Name="Page">
<Canvas.Resources>
<Storyboard x:Name="animation">
<%= createRectAnimation() %>
</Storyboard>
</Canvas.Resources>
<Canvas x:Name="Menu" Width="330" Height="170"
Canvas.Top="200" Canvas.Left="320">
<Rectangle Width="330" Height="170" Fill="#FFFFFFFF"
Stroke="#FF000000" RadiusX="10" RadiusY="10"/>
</Canvas>
<%= createRectangles()%>
</Canvas>
В cs-коде напишем:
Код C#:
using System;
using System.Collections;
using System.Text;
namespace SilverlightJSApplication1
{
public partial class XamlForm : System.Web.UI.Page
{
// {0} - TargetName
// {1} - end X value
// {2} - end Y value
private string xamlAnimation = @"<DoubleAnimationUsingKeyFrames BeginTime=""00:00:00""
Storyboard.TargetName=""{0}""
Storyboard.TargetProperty=""(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"">
<SplineDoubleKeyFrame KeyTime=”"00:00:02″” Value=”"{1}”"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”"00:00:00″” Storyboard.TargetName=”"{0}”"
Storyboard.TargetProperty=”"(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)”">
<SplineDoubleKeyFrame KeyTime=”"00:00:02″” Value=”"{2}”"/>
</DoubleAnimationUsingKeyFrames>”;
// {0} - Name
// {1} - Width
// {2} - Height
// {3} - Left
// {4} - Top
// {5} - Color (#FFFFFFFF)
// {6} - Visibility (Visible | Collapsed)
private string xamlRectString = @"<Rectangle Width=""{1}"" Height=""{2}"" Fill=""{5}""
Stroke=""#FF000000"" Canvas.Left=""{3}"" Canvas.Top=""{4}""
RenderTransformOrigin=""0.5,0.5"" x:Name=""{0}"" Visibility=""{6}"">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX=”"1″” ScaleY=”"1″”/>
<SkewTransform AngleX=”"0″” AngleY=”"0″”/>
<RotateTransform Angle=”"0″”/>
<TranslateTransform X=”"0″” Y=”"0″”/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>”;
private ArrayList arrayObjects;
protected void Page_Load(object sender, EventArgs e)
{
arrayObjects = new ArrayList(4);
arrayObjects.Add(new XamlRectangle("rect1", 160, 80, 40, 40, 260, 180, "#FFC42B2B", "Visible"));
arrayObjects.Add(new XamlRectangle("rect2", 160, 80, 440, 40, -260, 180, "#FF33AB23", "Visible"));
arrayObjects.Add(new XamlRectangle("rect3", 160, 80, 40, 360, 260, -180, "#FF3A2BC4", "Visible"));
arrayObjects.Add(new XamlRectangle("rect4", 160, 80, 440, 360, -260, -180, "#FFDEBA10", "Visible"));
}
protected string createRectAnimation()
{
StringBuilder result = new StringBuilder();
foreach (XamlRectangle rect in arrayObjects)
{
result.AppendFormat(xamlAnimation, rect.Name, rect.EndX, rect.EndY);
}
return result.ToString();
}
protected string createRectangles()
{
StringBuilder result = new StringBuilder();
foreach (XamlRectangle rect in arrayObjects)
{
result.AppendFormat(xamlRectString, rect.Name, rect.Width, rect.Height, rect.StartX, rect.StartY,
rect.Color, rect.Visibility);
}
return result.ToString();
}
}
}
Да, еще потребуется новый класс XamlRectangle.cs. Его код:
Код C#:
using System;
namespace SilverlightJSApplication1
{
public class XamlRectangle
{
public string Name;
public int Width;
public int Height;
public int StartX;
public int StartY;
public int EndX;
public int EndY;
public string Color; // #FFFFFFFF
public string Visibility; // Visible | Collapsed
public XamlRectangle(string name, int width, int height, int startX, int startY, int endX, int endY,
string color, string visibility)
{
this.Name = name;
this.Width = width;
this.Height = height;
this.StartX = startX;
this.StartY = startY;
this.EndX = endX;
this.EndY = endY;
this.Color = color;
this.Visibility = visibility;
}
}
}
Теперь мы можем генерировать нужные элементы «на лету», в зависимости от начальных условий. Но то, что получилось, пока выглядит не очень красиво. Добавим анимацию и автоматическое изменение размера под всю страницу. Для этого в файле XamlForm.js допишем:
Код JavaScript:
SilverlightJSApplication1.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
this.plugIn.content.onResize = Silverlight.createDelegate(this, this.onResize);
this.border = 5;
this.indent = 100;
this.animate = false;
rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
},
// Sample event handler
handleMouseDown: function(sender, eventArgs)
{
if (this.animate == false)
{
this.animation = sender.findName("animation");
this.animation.begin();
this.animate = true;
}
},
onResize: function(sender, args) {
var targetWidth = sender.getHost().content.actualWidth;
var targetHeight = sender.getHost().content.actualHeight;
var page = sender.findName("Page");
page.Width = targetWidth;
page.Height = targetHeight;
var menu = sender.findName("Menu");
menu["Canvas.Top"] = (targetHeight - menu["Height"]) / 2;
menu["Canvas.Left"] = (targetWidth - menu["Width"]) / 2;
var rect1 = sender.findName("rect1");
rect1["Canvas.Top"] = menu["Canvas.Top"] - rect1["Height"] - this.indent + this.border;
rect1["Canvas.Left"] = menu["Canvas.Left"] - rect1["Width"] - this.indent + this.border;
var rect2 = sender.findName("rect2");
rect2["Canvas.Top"] = menu["Canvas.Top"] - rect2["Height"] - this.indent + this.border;
rect2["Canvas.Left"] = menu["Canvas.Left"] + menu["Width"] + this.indent - this.border;
var rect3 = sender.findName("rect3");
rect3["Canvas.Top"] = menu["Canvas.Top"] + menu["Height"] + this.indent - this.border;
rect3["Canvas.Left"] = menu["Canvas.Left"] - rect3["Width"] - this.indent + this.border;
var rect4 = sender.findName("rect4");
rect4["Canvas.Top"] = menu["Canvas.Top"] + menu["Height"] + this.indent - this.border;
rect4["Canvas.Left"] = menu["Canvas.Left"] + menu["Width"] + this.indent - this.border;
}
}
А в файле Default.html.js исправим свойства width и height на 100% Вот теперь все стало совсем красиво. :)
Увы, в данном случае без ложки дегтя не обошлось. То, что красиво выглядит в IE далеко не всегда также выглядит в Firefox. Точнее, если запустить Default.html, в FF, то все будет выглядеть аналогично IE. Но стоит заменить Default.html на Default.aspx, и тут же FF отказывается воспроизводить наш пример. На всякий случай приведу код Default.aspx:
КОД HTML: <!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">
<head runat="server">
<title>SilverLight Application</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="Default.html.js"></script>
<script type="text/javascript" src="XamlForm.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<form id="form1" runat="server">
<div id="SilverlightPlugInHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</form>
</body>
</html>
Экспериментальным путем выяснил, что FF плохо реагирует на width и height в Default.html.js указанные в %. Поэтому придется от них избавиться. Чтобы в обоих браузерах была полная аналогия придется поправить некоторый код. В файле Default.html.js добавить строку:
Код JavaScript:
var plugIn = null;
Файл XamlForm.js переписать следующим образом:
SilverlightJSApplication1.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
this.plugIn.content.onResize = Silverlight.createDelegate(this, this.onResize);
top.plugIn = plugIn;
this.border = 5;
this.indent = 100;
this.animate = false;
rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
if (window.navigator.userAgent.indexOf("MSIE ") > 0)
{
this.plugIn.width = window.document.body.offsetWidth;
this.plugIn.height = window.document.body.offsetHeight;
}
else
{
this.plugIn.width = window.innerWidth;
this.plugIn.height = window.innerHeight;
}
},
// Sample event handler
handleMouseDown: function(sender, eventArgs)
{
if (this.animate == false)
{
this.animation = sender.findName("animation");
this.animation.begin();
this.animate = true;
}
},
onResize: function(sender, args)
{
var page = sender.findName("Page");
page.Width = window.document.body.offsetWidth;
page.Height = window.document.body.offsetHeight;
},
function onBodyResize(body)
{
if (window.navigator.userAgent.indexOf("MSIE ") > 0)
{
top.plugIn.width = window.document.body.offsetWidth;
top.plugIn.height = window.document.body.offsetHeight;
}
else
{
top.plugIn.width = body.innerWidth;
top.plugIn.height = body.innerHeight;
}
}
}
И добавить пару атрибутов в файла Default.aspx:
style=”width: 100%; height: 100%; overflow: hidden;” onresize=”onBodyResize(this)”
Вот теперь все! :)
| 
