在silverlight中实现Marquee效果
今天在网上看到了这样一篇文章:
Silverlight With Java Script Tutorial 12 - Silverlight Marquee Text
教你实现Marquee效果,其主要代码是对StoryBoard的使用,本人在原文其中上又加了“向右,
向上,向下”滚动文字的效果(当然也可以滚动图片)。
下面就是其演示效果(silverlight2 beta2):
其xaml代码如下:
Silverlight With Java Script Tutorial 12 - Silverlight Marquee Text
教你实现Marquee效果,其主要代码是对StoryBoard的使用,本人在原文其中上又加了“向右,
向上,向下”滚动文字的效果(当然也可以滚动图片)。
下面就是其演示效果(silverlight2 beta2):
其xaml代码如下:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded" >
<BeginStoryboard>
<Storyboard x:Name="animation" RepeatBehavior="Forever" >
<DoubleAnimation Storyboard.TargetName="ScrollingRight"
Storyboard.TargetProperty="(Canvas.Left)" From="10" To="360" Duration="0:0:10" />
<DoubleAnimation Storyboard.TargetName="ScrollingLeft"
Storyboard.TargetProperty="(Canvas.Left)" From="360" To="-100" Duration="0:0:10" />
<DoubleAnimation Storyboard.TargetName="ScrollingUp"
Storyboard.TargetProperty="(Canvas.Top)" From="300" To="-60" Duration="0:0:10" />
<DoubleAnimation Storyboard.TargetName="ScrollingDown"
Storyboard.TargetProperty="(Canvas.Top)" From="-30" To="360" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<TextBlock x:Name="ScrollingRight" FontFamily="Comic Sans MS" FontSize="36" Foreground="Green"
Text="向右" Canvas.Top="0" />
<TextBlock x:Name="ScrollingLeft" FontFamily="Comic Sans MS" FontSize="36" Foreground="Red"
Text="向左" Canvas.Top="50"/>
<TextBlock x:Name="ScrollingUp" FontFamily="Comic Sans MS" FontSize="36" Foreground="Blue"
Text="向上" Canvas.Left="80" />
<TextBlock x:Name="ScrollingDown" FontFamily="Comic Sans MS" FontSize="36" Foreground="Black"
Text="向下" Canvas.Left="200" />
</Canvas>
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded" >
<BeginStoryboard>
<Storyboard x:Name="animation" RepeatBehavior="Forever" >
<DoubleAnimation Storyboard.TargetName="ScrollingRight"
Storyboard.TargetProperty="(Canvas.Left)" From="10" To="360" Duration="0:0:10" />
<DoubleAnimation Storyboard.TargetName="ScrollingLeft"
Storyboard.TargetProperty="(Canvas.Left)" From="360" To="-100" Duration="0:0:10" />
<DoubleAnimation Storyboard.TargetName="ScrollingUp"
Storyboard.TargetProperty="(Canvas.Top)" From="300" To="-60" Duration="0:0:10" />
<DoubleAnimation Storyboard.TargetName="ScrollingDown"
Storyboard.TargetProperty="(Canvas.Top)" From="-30" To="360" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<TextBlock x:Name="ScrollingRight" FontFamily="Comic Sans MS" FontSize="36" Foreground="Green"
Text="向右" Canvas.Top="0" />
<TextBlock x:Name="ScrollingLeft" FontFamily="Comic Sans MS" FontSize="36" Foreground="Red"
Text="向左" Canvas.Top="50"/>
<TextBlock x:Name="ScrollingUp" FontFamily="Comic Sans MS" FontSize="36" Foreground="Blue"
Text="向上" Canvas.Left="80" />
<TextBlock x:Name="ScrollingDown" FontFamily="Comic Sans MS" FontSize="36" Foreground="Black"
Text="向下" Canvas.Left="200" />
</Canvas>