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

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

xamlによるxamCarouselPanelコントロールの作成

　では、実際にxamCarouselPanelコントロールをWindowsアプリケーションに組み込んでみましょう。

　はじめてNetAdvantage for WPFを使ったプロジェクトを作成する場合は、新しいプロジェクトを選ぶテンプレートで［WPFアプリケーション］を選びます。

テンプレートで「WPFアプリケーション」を選ぶ

　そして、NetAdvantage for WPFのxamCarouselPanelコントロールを使用するために、次の手順でプロジェクトに参照を追加します。

　ソリューションエクスプローラでプロジェクト名を右クリックし、ショートカットメニューの［参照の追加］を選びます。ダイアログボックスが表示されたら、「.NET」タブページにある「コンポーネント名」のリストから、次のコンポーネントを選択します。

• Infragistics3.Wpf.v8.1.dll
• Infragistics3.Wpf.Editors.v8.1.dll

「コンポーネント名」のリストからこれらのコンポーネントを選択する

　プロジェクトには、デフォルトで「Window1.xaml」というxamlファイルが挿入されています。

　ここに、次のようにxamCarouselPanelコントロールの名前空間の宣言「xmlns:igWindows="http://infragistics.com/Windows"」を追加します。

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

　次に、xamCarouselPanelコントロールのインスタンスを作成し、画像ファイルを読み込むコードを、「Grid」コンテナ内に記述します。

　xamCarouselPanelコントロールは、Backgroundプロパティを使用すると、背景色を設定できます。値は、HTMLの色の名前が使用できます。

　画像ファイルは、ドライブCのフォルダ「images」に10枚格納されていますので、それぞれImageタグで作成します。

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

　パネルに文字をかぶせたい場合は、次の行にCanvasを使って文字を設定します。

<Canvas Margin="0,0,0,0">
  <TextBlock Name="results"
    Canvas.Left="50"
    Foreground="Blue"
    FontSize="24">アルペンガーデンやまくさ の花たち </TextBlock>
</Canvas>

　ここまでで、基本的なxamCarouselPanelコントロールの実装が作成できます。

　プログラムを実行し、ナビゲーションボタンを押すと、画像が楕円を描くようにくるくると移動します。しかも、ただ回転するだけではなく、上のほうに移動した画像は徐々にフェードアウトして消えていきます。

　たったこれだけで、画像をアニメーションで表示させるプログラムが作れます。

でき上がったアプリケーションの実行画面