3Dアニメーションで画像を表示する
WPFアプリケーション／Webページの作成

NetAdvantage for WPFのxamCarouselPanelコントロールを使ったWPFアプリケーションの作成

2008/12/16 17:25

ポスト

ダウンロード実行ファイル（デスクトップアプリ） (858.3 KB)
ダウンロード実行ファイル（Webアプリ） (375.2 KB)
ダウンロードソースファイル（VB） (78.7 KB)
ダウンロードソースファイル（C#） (417.1 KB)

アニメーションをカスタマイズする

　このアニメーションをベースに、少しカスタマイズします。

パスの継続設定

　デフォルトのアニメーションでは、最後の画像に移動するとそこで移動が停止し、逆回転させないと画像を移動できないようになっています。そこで、最後から最初に移動してループできるように変更します。これは、「IsListContinuous」プロパティをTrueにセットします。

　記述位置は、</igWindows:XamCarouselPanel>タグの前、<Image Width="80" Height="80" Source="c:/images/image10.jpg"/>の下です。

<Image Width="80" Height="80" Source="c:/images/image10.jpg"/>

<igWindows:XamCarouselPanel.ViewSettings>
                <igWindows:CarouselViewSettings IsListContinuous="True"

一度に表示する画像の変更

　デフォルトでは、一度に表示できる画像は5個になっています。これを6個に変更します。

　この操作は、ItemsPerPageプロパティを使用します。値は、一度に表示したい画像の数です。

ItemsPerPage="6"

　これで、一度に6枚の画像が表示され、ナビゲーターのボタンを押すことで10枚の画像が順番に表示されていきます。

表示画像のスケールを変更する

　デフォルトでは、表示する画像のサイズはみな均一になっています。サイズは、Imageタグで指定したWidthとHeightで決められますが、表示するスケールを変えることができます。

　まず、CarouselViewSettingsオブジェクトのUseScalingプロパティをTrueに設定することによってスケーリングを有効にします。次に、ScalingEffectStopDirectionプロパティを UseItemPathに設定します。

UseScaling = "True"
ScalingEffectStopDirection="UseItemPath">

　次に、ScalingEffectStopsオブジェクトのScalingEffectStopsプロパティを設定します。

　このプロパティは、簡単に言うとアニメーションのそれぞれの位置の画像の、拡大・縮小率を設定するプロパティです。

　プロパティには2つのパラメータがあり、「Offset」が水平方向の位置、「Value」が拡大・縮小率を設定します。

　Offsetの位置は、図のようにコンポーネントの左側を0、右側を1とした0から1までの小数で指定します。

Offsetの位置は左側を0、右側を1とした0から1までの小数のパーセントで指定する

　ここでは、4か所のスケールを変更し、左側に来た時に一番大きく表示されるようにしました。

<igWindows:CarouselViewSettings.ScalingEffectStops>
    <igWindows:ScalingEffectStopCollection>
        <igWindows:ScalingEffectStop Offset="0" Value="1" />
        <igWindows:ScalingEffectStop Offset="0.1" Value="2.5" />
        <igWindows:ScalingEffectStop Offset="0.5" Value="1" />
        <igWindows:ScalingEffectStop Offset="1" Value="0.5" />
    </igWindows:ScalingEffectStopCollection>
</igWindows:CarouselViewSettings.ScalingEffectStops>

画像の位置によって表示倍率が変化する

　これで、画像がサイズを変えながら回転し、フェードアウトして消えてはまた次の画像が表示される、というアニメーションができ上がります。

XAMLのコード全文

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:igWindows="http://infragistics.com/Windows"

    Title="カルーセルパネル" Height="500" Width="800">

    <Grid>
        <igWindows:XamCarouselPanel x:Name="XamCarouselPanel1" Background="AquaMarine" >
            <Image Width="80" Height="80" Source="c:/images/image1.jpg"/>
            <Image Width="80" Height="80" Source="c:/images/image2.ipg"/>
            <Image Width="80" Height="80" Source="c:/images/image3.jpg"/>
            <Image Width="80" Height="80" Source="c:/images/image4.jpg"/>
            <Image Width="80" Height="80" Source="c:/images/image5.jpg"/>
            <Image Width="80" Height="80" Source="c:/images/image6.jpg"/>
            <Image Width="80" Height="80" Source="c:/images/image7.jpg"/>
            <Image Width="80" Height="80" Source="c:/images/image8.jpg"/>
            <Image Width="80" Height="80" Source="c:/images/image9.jpg"/>
            <Image Width="80" Height="80" Source="c:/images/image10.jpg"/>
            
            <igWindows:XamCarouselPanel.ViewSettings>
                <igWindows:CarouselViewSettings IsListContinuous="True"
                                ItemsPerPage="6"
                                UseScaling = "True"
                                ScalingEffectStopDirection="UseItemPath">
                    <igWindows:CarouselViewSettings.ScalingEffectStops>
                        <igWindows:ScalingEffectStopCollection>
                            <igWindows:ScalingEffectStop Offset="0" Value="1" />
                            <igWindows:ScalingEffectStop Offset="0.1" Value="2.5" />
                            <igWindows:ScalingEffectStop Offset="0.5" Value="1" />
                            <igWindows:ScalingEffectStop Offset="1" Value="0.5" />
                        </igWindows:ScalingEffectStopCollection>
                    </igWindows:CarouselViewSettings.ScalingEffectStops>
                </igWindows:CarouselViewSettings>
            </igWindows:XamCarouselPanel.ViewSettings>
        </igWindows:XamCarouselPanel>
        
        <Canvas Margin="0,0,0,0">
          <TextBlock Name="results"
            Canvas.Left="50"
            Foreground="Blue"
            FontSize="24">アルペンガーデンやまくさ の花たち </TextBlock>
        </Canvas>
        
    </Grid>
</Window>

Webページ－WPFブラウザアプリケーションの作成

　WPFブラウザアプリケーションも、WPFアプリケーションと同じ方法でプログラムを組むことができます。

　コードを修正するのは、画像ファイルを読み込むファイルパスの部分で、ローカルディスクから読み込むのではなく、画像ファイルを保管しているサイトにアクセスするようにしています。

WPFブラウザアプリケーションのXAMLコード全文

<Page x:Class="wpf_carousel_web_cs.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:igWindows="http://infragistics.com/Windows"

    Title="カルーセルパネル" Height="500" Width="800">

    <Grid>
        <igWindows:XamCarouselPanel x:Name="XamCarouselPanel1" Background="plum" >
            <Image Width="80" Height="80" Source="http://www.big.or.jp/~seto/images/image1.jpg"/>
            <Image Width="80" Height="80" Source="http://www.big.or.jp/~seto/images/image2.ipg"/>
            <Image Width="80" Height="80" Source="http://www.big.or.jp/~seto/images/image3.jpg"/>
            <Image Width="80" Height="80" Source="http://www.big.or.jp/~seto/images/image4.jpg"/>
            <Image Width="80" Height="80" Source="http://www.big.or.jp/~seto/images/image5.jpg"/>
            <Image Width="80" Height="80" Source="http://www.big.or.jp/~seto/images/image6.jpg"/>
            <Image Width="80" Height="80" Source="http://www.big.or.jp/~seto/images/image7.jpg"/>
            <Image Width="80" Height="80" Source="http://www.big.or.jp/~seto/images/image8.jpg"/>
            <Image Width="80" Height="80" Source="http://www.big.or.jp/~seto/images/image9.jpg"/>
            <Image Width="80" Height="80" Source="http://www.big.or.jp/~seto/images/image10.jpg"/>
            
            <igWindows:XamCarouselPanel.ViewSettings>
                <igWindows:CarouselViewSettings IsListContinuous="True"
                                ItemsPerPage="6"
                                UseScaling = "True"
                                ScalingEffectStopDirection="UseItemPath">
                    <igWindows:CarouselViewSettings.ScalingEffectStops>
                        <igWindows:ScalingEffectStopCollection>
                            <igWindows:ScalingEffectStop Offset="0" Value="1" />
                            <igWindows:ScalingEffectStop Offset="0.1" Value="2.5" />
                            <igWindows:ScalingEffectStop Offset="0.5" Value="1" />
                            <igWindows:ScalingEffectStop Offset="1" Value="0.5" />
                        </igWindows:ScalingEffectStopCollection>
                    </igWindows:CarouselViewSettings.ScalingEffectStops>
                </igWindows:CarouselViewSettings>
            </igWindows:XamCarouselPanel.ViewSettings>
        </igWindows:XamCarouselPanel>
        
        <Canvas Margin="0,0,0,0">
          <TextBlock Name="results"
            Canvas.Left="50"
            Foreground="Blue"
            FontSize="24">アルペンガーデンやまくさ の花たち </TextBlock>
        </Canvas>
    </Grid>

</Page>

まとめ

　xamCarouselPanelコントロールは、VS標準のコントロールだけではすぐに作れない画像表示機能を簡単に実装できる、とても優れたコンポーネントです。

　しかも、実装作業は簡単で、少ないコードでこの機能を組み込むことができます。

　特に、Webページではこのコンポーネントをコンテンツのデザインに加えると、一段と洗練されたページに仕上げることができると思います。

画像提供協力：アルペンガーデンやまくさ
実行ファイルに同梱している10枚の花の画像は、あくまでもサンプルプログラムの動作確認のために提供するものであり、本記事内に掲載している画像とともに無断で転用・転売することを固く禁止します。

この記事は参考になりましたか？

印刷用を表示

ポスト

Infragistics NetAdvantageチュートリアル連載記事一覧: HTML5対応チャートコンポーネントを利用したデータ視覚化入門その2 - さまざまな機能...

HTML5対応チャートコンポーネントを利用したデータ視覚化入門その1 - チャートを表示...

jQueryで地震分布図を作成しよう

もっと読む

この記事の著者: 瀬戸遥（セトハルカ）

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事