[C#] WPF 文字テロップアニメーション

C#のWPFでのテロップ表示方法について調べてみた。

<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>

<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">

<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>

<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!

以上。