気楽なソフト工房

プログラミングについていろいろな記事を書いています。



mykonos2008

Author:mykonos2008
システムエンジニアとして働いている30代の会社員です。
仕事や趣味でプログラムを書いている方の役に立つ記事を書いていきたいと思っています。
ご意見、ご感想はこちらまで
If you are an english speaker,Please visit my english blog.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
電光掲示板のように文字列を左から右にスクロールさせるサンプルを作ってみました。


Silverlightではアニメーションを簡単に実現できる仕組みが提供されているので、とても楽に出来ました。

まず、XAML側に、Canvasを定義し、その中にスクロールさせる文字列をTextBlockで配置します。
そしてResourceとしてStoryBoardを定義します。そして「DoubleAnimation」を使って、TextBlockの「Canvas.Left」プロパティを
変化させます。

DoubleAnimationのFromやToは、HTMLに指定されるSilverlightのサイズに、動的に合わせて変化するようにしたかったので
コード上で指定するようにしました。

以下がXAMLの内容です。

<UserControl x:Class="BulletinBoard.BoardControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Loaded="UserControl_Loaded">
    <UserControl.Resources>
        <Storyboard x:Name="_storyBoard">
            <DoubleAnimation x:Name="_animation" RepeatBehavior="Forever" Storyboard.TargetName="_boardText"
               Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:10"/>
        </Storyboard>
    </UserControl.Resources>
    <Canvas x:Name="LayoutRoot" Background="Gray">
        <TextBlock Foreground="White" FontSize="15" x:Name="_boardText">
          Silverlightで文字列を横にスクロールさせるサンプルです。
        </TextBlock>
    </Canvas>
</UserControl>

次にコードの方からDoubleAnimationのFromをSilverlight領域の幅の値に、
Toを0からTextBlockの幅をマイナスした値に設定しました。

ActualWidthとActualHeightを取得する必要があったので、
DispactherのBeginInvokeを使用して、レイアウトシステムの処理の後に取得処理が
走るようにしました。

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
        Dispatcher.BeginInvoke(() =>
        {
            //文字の縦表示位置を設定する
            Canvas.SetTop(_boardText, (this.ActualHeight - _boardText.ActualHeight) / 2);

            //文字がすべて隠れるToの位置を設定する
            _animation.To = - _boardText.ActualWidth;

            //アニメーションのFromをコントロールの幅に設定する
            _animation.From = this.ActualWidth;

            //アニメーションを開始する
            _storyBoard.Begin();
        });
    }

文字列や各種設定を外部から与えられるようにもう少し作りこんでみようと思います。

コメント

ページをリロードすると流れる文字が半分しか見えなくなるのは自分のブラウザ(FireFox)のせいでしょうか?

Re: タイトルなし

yudanさん、こんばんは。
私のFirefoxはちょっと古くて2だったのですが、それでは起きませんでした。OSはXPです。
3に更新してみたのですが、それでも起きませんでした。
なんでしょうね。。ちょっと分からないです。。


自分の環境だとIEだと再現しなかったです
OSはVistaと2008SvR2でした

FireFox3を使い、記事を見ると文字ズレは発生しません
しかし、ブログのトップで更新ボタンを押すと再現性のある文字ズレが起こるようでした

Re: タイトルなし

yudanさん、
その後、何回もやっていると私の環境でもたまに発生しました。
ただ、いつ何故起こるかわかりません。

テキストの縦位置を決定するために、ActualHeightを使用しているのですが、
タイミングによってはActualHeightが取得できないのかもしれません。

ちょっとコード上で改善の余地があるかもしれません。ご報告ありがとうございました。

コメントの投稿

管理者にだけ表示を許可する

トラックバック

http://csfun.blog49.fc2.com/tb.php/80-70f26713

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。