Воспоминание Microsoft Silverlight 08.10.2024
Всем доброе утро!
Сегодня хочу вспомнить про Microsoft Silverlight и WPF. Silverlight можно перевести с английского как серебрянный свет, это технология, которая должна была конкурировать с Macromedia/Adobe Flash и Sun/Oracle Java Applet. Вот так выглядел рекламный ролик примерно 2007-2008 гг.
Тут больше:
Чтобы создавать интерактивные приложения для веб браузеров для Microsoft Silverlight был выпущен Microsoft Expression Studio 2, и там шёл Microsoft Expression Blend 2 и Microsoft Expression Encoder 2, спомощью которых можно было создавать интерактивные приложения для веб браузеров для Microsoft Silverlight. Тут см. https://groups.germany.ru/12994140000001/f/41291130.html?C... я упомянул про Microsoft Expression Web, и Microsoft Expression Web 4, которые тоже входят в комплект с Microsoft Expression Studio. Но чтобы запустилось всё это, нужно ещё скачать Microsoft Expression Blend 2 SP1, так-же чтобы увидить интерактивное приложения для веб браузера, нужно скачать Microsoft Silverlight. Кстати в 2010 г. когда Microsoft выпустила Microsoft Windows Phone 7, см. https://ru.wikipedia.org/wiki/Windows_Phone_7 ходили слухи, что там будет поддержка Microsoft Silverlight.
Дневник тяжелобольного инвалида
Вот видео на русском про технологию Silverlight:
Дневник тяжелобольного инвалида
Давайте из болтавни в практику, т.е. поиграемся с Microsoft Silverlight:
1. Запустим Microsoft Expression Blend 2
2. Нажмём на New Project...
3. Выберим Silverlight 1 Site:
Вот наш пустой экран:
4. Дальше сделаем так:
Вот код Default.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SilverlightSite</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="Page.xaml.js"></script>
<style type="text/css">
#silverlightControlHost {
height: 480px;
width: 640px;
}
#errorLocation {
font-size: small;
color: Gray;
}
</style>
<script type="text/javascript">
function createSilverlight()
{
var scene = new SilverlightSite.Page();
Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("silverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.0"
},
events: {
onLoad: Silverlight.createDelegate(scene, scene.handleLoad),
onError: function(sender, args) {
var errorDiv = document.getElementById("errorLocation");
if (errorDiv != null) {
var errorText = args.errorType + "- " + args.errorMessage;
if (args.ErrorType == "ParserError") {
errorText += "
File: " + args.xamlFile;
errorText += ", line " + args.lineNumber;
errorText += " character " + args.charPosition;
}
else if (args.ErrorType == "RuntimeError") {
errorText += "
line " + args.lineNumber;
errorText += " character " + args.charPosition;
}
errorDiv.innerHTML = errorText;
}
}
}
});
}
if (!window.Silverlight)
Silverlight = {};
Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}
</script>
</head>
<body>
<div id="silverlightControlHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
<!-- Runtime errors from Silverlight will be displayed here.
This will contain debugging information and should be removed or
hidden when debugging is completed -->
<div id='errorLocation'></div>
</body>
</html>
Вот код Page.xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" x:Name="Page"> <TextBlock Canvas.Left="139" Canvas.Top="58" Width="175" Height="31" TextWrapping="Wrap" Foreground="#FFFF0000" Cursor="Hand" FontWeight="Bold" FontFamily="Lucida Sans Unicode" FontSize="20"><Run Text="Заголовок сайта"/> </TextBlock> </Canvas>
Вот код Page.xaml.js:
if (!window.SilverlightSite)
SilverlightSite = {};
SilverlightSite.Page = function(){}
SilverlightSite.Page.prototype =
{
handleLoad: function(control, userContext, rootElement)
{
this.control = control;
// Sample event hookup:
rootElement.addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
},
// Sample event handler
handleMouseDown: function(sender, eventArgs)
{
// The following line of code shows how to find an
// element by name and call a method on it.
// this.control.content.findName("Storyboard1").Begin();
}}
Код Silverlight.js сильно большой.
Дневник тяжелобольного инвалида
Как функционирует Microsoft Expression Encoder 2 я не могу показать, т.к. у меня не установлена программа Windows Media Encoder на виртуальной машине Windows XP, поэтому я покажу Microsoft Expression Encoder 4. Microsoft Expression Encoder позволяет аудио и видеофайлы превратить в Microsoft Silverlight:
1. Запустим Microsoft Expression Encoder 4 и выберем Silverlight Project:
2. Вот так выглядет запущенный Microsoft Expression Encoder 4
3. Импортируем видео File->Import:
4. Вставим видео в проект:
5. Вуаля!
Вот все готовые шаблоны видео и адио плееры:
Дневник тяжелобольного инвалида
Если не хотите использовать Microsoft Expression Encoder, то можно напрямую видео импортировать в проект в Microsoft Expression Blend, а из проекта на форму/страницу Microsoft Silverlight см.:
Но тогда видео будет автоматически проигрываться при входе на сайт с Silverlight контентом, а так-же не будет кнопок управления (проигрывать, пауза, стоп, перемотка, итд), а так-же будет полоска прокрутки невидимой. Поэтому Microsoft Expression Encoder упращает жизнь.
Дневник тяжелобольного инвалида
Так-же в Microsoft Expression Studio 2 входят Microsoft Expression Design 2, Microsoft Expression Media 2, и Microsoft Visual Studio 2008 Standard Edition. Про Microsoft Expression Media 2 можете узнать тут см. https://programming.mybb.ru/viewtopic.php?id=375.
В Microsoft Expression Design 2 можно создавать векторную графику, и импортировать, а так-же экспортировать в разные форматы см.:
Вот создания нового проекта:
Так выглядет интерфейс Microsoft expression Design 2:
Microsoft Expression Design 2 позволяет экспортировать разные форматы а так-же, в XAML Silverlight, в фотошоп, и PDF:
Microsoft Expression Design 2 может импортировать разные форматы а так-же фотошоп, Adobe Illustrator:
Дневник тяжелобольного инвалида
Я сейчас кушаю вот такой супчик, он и пишу в моём дневнике, oтeц или когда едем с мeдбpaтом по магазинам, покупаем замороженные овощи для супа, в супе на моей фотографии добавлена пекинская капуста, говядену покупаем в метцгерае, суп несалённый, но вкусный, запах идёт лука, я давно такие супы кушаю:
И так продолжем болтавню по Microsoft Expression Studio. В бесплатном Microsoft Expression Design 4, помимо того что могла экспортировать программа Microsoft Expression Design 2, в Microsoft Expression Design 4 можно экспортировать так-же в SVG, см.:
А. Импорт фотошоп файлов, и файлов в формате Adobe Illustrator появились в меню File:
Дневник тяжелобольного инвалида
Продолжим болтавню про Microsoft Silverlight v1. В Microsoft Silverlight v1 нужно программировать на JavaScript. Нарисуем кнопку, вот код XAML:
<Canvas Canvas.Left="40" Canvas.Top="372" Width="129" Height="50" x:Name="btn1" Cursor="Hand">
<Rectangle Stroke="#FF2880C8" RadiusX="8.5" RadiusY="8.5" Width="129" Height="50">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF326BCE" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="36.5" Canvas.Top="14.5" Width="56" Height="21" Foreground="#FFE51414" TextWrapping="Wrap"><Run Text="Кнопка"/></TextBlock>
</Canvas>
Вот так выглядет наша кнопка:
Вот код на JavaScript, чтобы сработало нажатие на кнопку:
if (!window.SilverlightSite)
SilverlightSite = {};
SilverlightSite.Page = function() {}
SilverlightSite.Page.prototype = {
handleLoad: function(control, userContext, rootElement) {
this.control = control;
this.control.content.findName("btn1").addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
},
handleMouseDown: function(sender, eventArgs) {
alert('Нажали на кпопку!');
}}Вот результат:
Дневник тяжелобольного инвалида
Продолжим болтавню. Теперь давайте сделаем простую анимацию.
Вот код Page.xaml:
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
x:Name="Page">
<Canvas.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:08.9000000" Value="168"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:08.9000000" Value="59"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF6299DC"/>
<SplineColorKeyFrame KeyTime="00:00:08.9000000" Value="#FFDCC762"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle"
Storyboard.TargetProperty="(Rectangle.RadiusX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:08.9000000" Value="31.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle"
Storyboard.TargetProperty="(Rectangle.RadiusY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:08.9000000" Value="31.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<Rectangle Fill="#FF6299DC" Stroke="#FF000000" Canvas.Left="149" Canvas.Top="39" Width="181"
Height="67" x:Name="rectangle" RenderTransformOrigin="0.5,0.5">
<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>
<Canvas Canvas.Left="142.5" Canvas.Top="437.5" Width="84" Height="32" x:Name="play" Cursor="Hand">
<Rectangle Fill="#FF30A0E0" Stroke="#FF000000" RadiusX="4.5"
RadiusY="4.5" Width="84" Height="32"/>
<TextBlock Canvas.Left="22.5" Canvas.Top="3.5" Width="39" Height="25" TextWrapping="Wrap"><Run Text="Пуск"/></TextBlock>
</Canvas>
<Canvas Canvas.Left="245.5" Canvas.Top="437.5" Cursor="Hand" x:Name="stop" Width="84" Height="32">
<Rectangle Fill="#FF30A0E0" Stroke="#FF000000" RadiusX="4.5"
RadiusY="4.5" Width="84" Height="32"/>
<TextBlock Canvas.Left="22.5" Canvas.Top="3.5" Width="39" Height="25" TextWrapping="Wrap"><Run Text="Стоп"/></TextBlock>
</Canvas>
</Canvas>
Вот код Page.xaml.js:
if (!window.SilverlightSite)
SilverlightSite = {};
SilverlightSite.Page = function() {}
SilverlightSite.Page.prototype = {
handleLoad: function(control, userContext, rootElement) {
this.control = control;
this.control.content.findName("play").addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
this.control.content.findName("stop").addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
},
handleMouseDown: function(sender, eventArgs) {
if(sender.name == 'play')
this.control.content.findName("Storyboard1").Begin();
if(sender.name == 'stop')
this.control.content.findName("Storyboard1").Stop(); }}
А вот и результат:
Дневник тяжелобольного инвалида
Давно неигрался в Silverlight. Сегодня продолжим играться. Только сегодня будем играться в Silverlight v2.0, и будем программировать не на JavaScript, а на C#. Но сначало оффтоп, недавно поел греческий йогурт:
Дневник тяжелобольного инвалида
1. Короче создадим новый проект, и выбирим Silverlight 2 Application, а язык программирования C# (Visual C#):
2. Нарисуем такие элементы:
3. У поле должно быть имя txtYourName, а у кнопки btnSayName:
4. Напишим такой код:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication3 {
public partial class Page : UserControl {
public Page() {
// Required to initialize variables
InitializeComponent();
}
private void btnSayName_Click(object sender,System.Windows.RoutedEventArgs e) {
MessageBox.Show("Привет " + this.txtYourName.Text + "!");
}
}
}5. Вуаля! Вот так работает наше простое Silverlight 2 приложение:
Дневник тяжелобольного инвалида
Сгенерируется такой код:
Default.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>
<title>SilverlightApplication3</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
}
</style>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if(sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
var errMsg = "Unhandled Error in Silverlight 2 Application " + appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if(errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if(errorType == "RuntimeError") {
if(args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
</head>
<body>
<!-- Runtime errors from Silverlight will be displayed here.
This will contain debugging information and should be removed or hidden when debugging is completed -->
<div id='errorLocation' style="font-size: small;color: Gray;"></div>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="SilverlightApplication3.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</body>
</html>
AppManifest.xaml:
<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
EntryPointAssembly="SilverlightApplication3"
EntryPointType="SilverlightApplication3.App"
RuntimeVersion="2.0.31005.0">
<Deployment.Parts>
<AssemblyPart x:Name="SilverlightApplication3" Source="SilverlightApplication3.dll" />
</Deployment.Parts>
</Deployment>
Это exe-шник, но с расширением XAP, SilverlightApplication3.xap:
Про этот EXE-шник точнее XAP можно почитать тут https://www.oreilly.com/library/view/pro-business-applicat..., машинный перевод:
Понимание файлов XAPКогда вы собираете проект Silverlight, все объединяется в один файл с расширением .XAP. Этот файл содержит сборки и любые другие файлы контента, связанные с проектом, которые объединяются и сжаты с использованием формата файла Zip. Вы можете доказать это, просто изменив расширение файла с .XAP на .zip и разобщив файл, чтобы осмотреть его содержимое. Файл XAP может быть размещен на веб -сервере, что позволяет загружать его и запускать клиентские компьютеры.
Дневник тяжелобольного инвалида
4. Напишим такой код:
Забыл, а вот и XAML-код Page.xaml:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication3.Page"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock Height="16" HorizontalAlignment="Left" Margin="16,16,0,0"
VerticalAlignment="Top" Width="112" Text="Введите ваше имя:" TextWrapping="Wrap"/>
<TextBox Height="24" HorizontalAlignment="Left" Margin="16,40,0,0"
VerticalAlignment="Top" Width="224" Text="" TextWrapping="Wrap" x:Name="txtYourName"/>
<Button Height="24" HorizontalAlignment="Left" Margin="16,80,0,0"
VerticalAlignment="Top" Width="72" Content="Скажи имя!
" x:Name="btnSayName"
Click="btnSayName_Click"/>
</Grid>
</UserControl>
App.xaml:
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication3.App">
<Application.Resources>
<!-- Resources scoped at the Application
level should be defined here. -->
</Application.Resources>
</Application>
P.S.:
Сейчас я ужинаю, ем вот такие пельмени из индейки, ням-ням!
Дневник тяжелобольного инвалида
назад
список