XAMLとJavaScriptでスライドショーを作成。by Silverlight1.0
Microsoft Silverlight1.0（XAML & Javascript）でスライドショーを作ってみました。
左側に縦に並んだ３つの画像がありますね。それをクリックしてみてください。すると、左側のスペースに上から画像がスライドして現れます。
XAMLのサンプルソース
<Canvas Width="400" Height="350" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement x:Name="media" Source="sanba3.wmv" Canvas.Left="10" Opacity="0" Width="350" Height="300" AutoPlay="False" /> <TextBlock Canvas.Left="10" Canvas.Top="0" FontFamily="Verdana" FontSize="100" FontWeight="Bold">ABC<LineBreak/>DEF <TextBlock.Foreground> <VideoBrush SourceName="media" /> </TextBlock.Foreground> </TextBlock> <!-- Play --> <Canvas MouseLeftButtonDown="play" Canvas.Left="300" Canvas.Top="30"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="30" Width="55" Fill="#440000ff" /> <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> </Canvas> <!-- Pauses --> <Canvas MouseLeftButtonDown="pause" Canvas.Left="300" Canvas.Top="90"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5" Fill="slateblue" /> <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> </Canvas> <!-- Stop --> <Canvas MouseLeftButtonDown="stop" Canvas.Left="300" Canvas.Top="150"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5" Fill="#ff2288" /> <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> </Canvas> </Canvas>
Javascriptのサンプルソース
function onClicked(sender, e)
{
sender.FindName("rotate").begin();
sender.FindName("imagebox")["ImageSource"]=sender.Tag;
}