C#のWPFでのテロップ表示方法について調べてみた。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApplication1" mc:Ignorable="d" Title="MainWindow" Height="200" Width="400"> <Grid VerticalAlignment="Center" HorizontalAlignment="Center"> <!-- 枠線 --> <Border Width="300" Height="36" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" VerticalAlignment="Top"> <Canvas Width="Auto" Height="Auto" ClipToBounds="True"> <TextBlock Name="SampleMarqeeText" Width="Auto" Height="Auto" FontSize="24" FontWeight="Bold" Foreground="Blue" Text="Sample Text Xxxxxxxxxxxx."> <!-- アニメーションイベント. --> <TextBlock.Triggers> <EventTrigger RoutedEvent="TextBlock.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="SampleMarqeeText" Storyboard.TargetProperty="(Canvas.Left)" From="300.0" To="-300.0" Duration="0:0:5" AutoReverse="False" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger> </TextBlock.Triggers> </TextBlock> </Canvas> </Border> </Grid> </Window> |
<canvas>タグの属性「ClipToBounds=”true”」ではみ出た要素を切り取る設定らしい。なるほど☆
Silverlightでは、「ClipToBounds」属性が使用できないので、独自につくる必要があるようだ!
Silverlight ClipToBounds – Can I Clip It?, Yes You Can!
以上。