画像をスライド表示するWPFアプリケーションの作成

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

2013/10/30 14:00

ポスト

ダウンロードサンプルファイル（バイナリ） (1.2 MB)
ダウンロードサンプルコード（C#） (810.6 KB)
ダウンロードサンプルコード（VB） (812.9 KB)

　前回の記事「コンテンツをスライド表示するWPFアプリケーションの作成」では、テキストをスライド表示するアプリケーションを作成しました。今回は、タイルに複数の画像を組み込みスライド表示し、画像をクリックすると拡大表示するアプリケーションを作成してみます。

ポスト

タイル内の画像をスライド表示させる

画像をクリックすると拡大表示する

対象読者

　Visual Basic 2010／2012、またはVisual C# 2010／2012を使ってプログラムを作ったことがある人。

必要な環境

　Visual Basic 2010／2012、Visual C# 2010／2012、Visual Studio 2010／2012、SQL Server Expressでプログラムが作れる環境。

　なお、本プログラムは次の環境で開発・動作確認を行っています。

OS：Windows 7
開発Tool：Visual Studio 2010、.NET Framework 4

プログラム実行時の注意事項

　本稿の実行ファイル（バイナリファイル）を動かすには、zipファイルに同梱してある以下のファイルが必要になります（.NET Framework 4でのみご使用いただけます）。

ファイル名	説明
C1.WPF.4.dll	本体アセンブリ
C1.WPF.Tile.4.dll	本体アセンブリ

　このファイルを、実行プログラムと同じフォルダに格納します。

コンポーネントのインストール

　トライアル版は、グレープシティのWebページから申し込みできます。

　トライアル申込フォームが表示されますので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

　制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

　ComponentOne Studio 2013Jをインストールしたら、プロジェクトにコントロールを追加します。

　ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。

　追加するコンポーネントは、アセンブリ名が「C1.WPF.Tile.4」の「C1Tile」コントロールです。

アセンブリ名がアセンブリ名が「C1.WPF.Tile.4」の「C1Tile」コントロールを選択する

　また、プロジェクトに以下のランタイムライブラリへの参照を追加してください。

ファイル	内容
C1.WPF.4	本体アセンブリ
C1.WPF.Tile.4	本体アセンブリ

C1.WPFとC1.WPF.Tileを参照に追加

　参照を設定すると、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル	内容
C1.WPF.4.dll	本体アセンブリ
C1.WPF.Tile.4.dll	本体アセンブリ

　なお、.NET Framework 4が必要です。

C1Tileコントロールの概要

　C1Tile、C1SlideTileコントロールの概要については、前回の記事「コンテンツをスライド表示するWPFアプリケーションの作成」を参照してください。

　今回は前回と同じテクニックを用いて、ContentTemplate/BackContentTemplateプロパティ内にImageコントロールを配置し画像を表示します。

　さらに、画像をクリックすると別ウィンドウで拡大表示する機能を追加します。

GUIの作成

　では、さっそくアプリケーションを作成していきます。

　今回作成するアプリケーションは、C1TileコントロールとC1SlideTileコントロールを1つずつ使用し、画像を入れ替える表示を行うために、Imageコントロールを使用します。

　使用するコントロールは、C1Tile、C1SlideTile、Image、TextBlockの4種類のコントロールです。

フォームのレイアウト

C1Tileコントロールの作成

　最初に、C1Tileコントロールの配置を行います。

　まずは、記事冒頭で紹介しているように、C1.WPF.4/C1.WPF.Tile.4への参照を設定してください。

　① ツールボックスからC1Tileコントロールをウィンドウにドラッグ＆ドロップします。

　② XAMLの画面に移り、XAMLを修正します。まず、Contentプロパティの値が「"{x:Null}"」と設定されていますので、これをContent="この文字"に変更します。

　また、次のプロパティを設定します。

プロパティ	設定値
HorizontalContentAlignment	Stretch
VerticalContentAlignment	Stretch
Padding	0

<Grid Height="190" Width="880">
    <c1:C1Tile c1:C1TileService.PointerDownAnimation="True" Content="この文字" Height="150" HorizontalAlignment="Left" 
               Margin="12,12,0,0" Name="c1Tile1" VerticalAlignment="Top" Width="230" 
               FontSize="16" Background="White" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" 
               Padding="0">    
        </c1:C1Tile>
</Grid>

　③ ContentTemplate/BackContentTemplateプロパティを作成し、TextBlockコントロールで文字列が切り替わるアニメーションを作成します。

<c1:C1Tile.ContentTemplate>
    <DataTemplate>
        <Border Background="BurlyWood" >
            <TextBlock Text="フォトギャラリー" VerticalAlignment="Center" HorizontalAlignment="Center" />
        </Border>
    </DataTemplate>
</c1:C1Tile.ContentTemplate>
<c1:C1Tile.BackContentTemplate>
    <DataTemplate>
        <Border Background="DarkSeaGreen" >
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                <TextBlock Text="画像をクリックすると" Foreground="White" HorizontalAlignment="Center"/>
                <TextBlock Text="拡大表示します" Foreground="White" HorizontalAlignment="Center"/>
            </StackPanel>
        </Border>
    </DataTemplate>
</c1:C1Tile.BackContentTemplate>

C1SlideTileコントロールの作成

　次に、C1SlideTileコントロールを作成します。このコントロールには、ContentTemplate/BackContentTemplateプロパティ内にグリッドを用いて、Imageコントロールを3つずつ配置します。

　① ツールボックスからC1SlideTileコントロールをグリッド内にドラッグ＆ドロップします。

　ここでも、Contentプロパティは「"{x:Null}"」とnullになっていますので、プロパティ値を「"イメージギャラリー"」に変更します。

　この値を設定しておかないと、アニメーションは正常に動作しません。

Content="イメージギャラリー"

　また、C1Tileコントロールと同様に次のプロパティを設定します。

プロパティ	設定値
HorizontalContentAlignment	Stretch
VerticalContentAlignment	Stretch
Padding	0

<c1:C1SlideTile c1:C1TileService.PointerDownAnimation="True" Content="イメージギャラリー" Height="150" HorizontalAlignment="Left" 
                Margin="252,12,0,0" Name="c1SlideTile1" VerticalAlignment="Top" Width="600" HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Stretch" Padding="0" >
</c1:C1SlideTile>

　④ ContentTemplate/BackContentTemplateプロパティを作成し、その中にグリッドを作成します。グリッドは列を3つ作成しておきます。

<c1:C1SlideTile.ContentTemplate>
     <DataTemplate>
        <Border>
            <Grid HorizontalAlignment="Left" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  Width="200"  />
                    <ColumnDefinition  Width="200" />
                    <ColumnDefinition  Width="200" />
                </Grid.ColumnDefinitions>
            </Grid>
        </Border>
    </DataTemplate>
</c1:C1SlideTile.ContentTemplate>

<c1:C1Tile.BackContentTemplate>
    <DataTemplate>
        <Border>
            <Grid HorizontalAlignment="Left" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  Width="200"  />
                    <ColumnDefinition  Width="200" />
                    <ColumnDefinition  Width="200" />
                </Grid.ColumnDefinitions>
            </Grid>
        </Border>
    </DataTemplate>
</c1:C1Tile.BackContentTemplate>

　⑤ Imageコントロールを配置し、C1SlideTileコントロール内に収まる形にします。そして、サンプル画像「flower-1.jpg」を設定します。プロジェクト内に「Images」フォルダが作成されそこに画像が格納されると共に、ImageコントロールのSourceプロパティにも設定されます。

<Image Height="150" HorizontalAlignment="Left" Margin="252,12,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" 
               Width="200" Source="/Tile_img_WPF_cs;component/Images/flower-1.jpg" />

　⑥ このImage要素をContentTemplateプロパティの<Grid>要素内に移動します。そして、グリッドの最初の列を指定します。

Grid.Column="0"

　⑦ イベントハンドラ「MouseDown」を作成し、名称を「Image_MouseDown」にします。このイベントハンドラはすべてのImageコントロールに共通して設定し、Imageコントロール上でマウスボタンを押した時点で呼び出され、その画像を別ウィンドウで表示する処理を実行します。

MouseDown="Image_MouseDown"

<Image Height="150" Grid.Column="0" HorizontalAlignment="Left" Name="Image1" Stretch="Fill" VerticalAlignment="Top" 
       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-1.jpg" MouseDown="Image_MouseDown" />

　⑧ 同様の方法で、あと2つImageコントロールを作成しグリッド内に移動します。

<c1:C1SlideTile.ContentTemplate>
    <DataTemplate>
        <Border>
            <Grid HorizontalAlignment="Left" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  Width="200"  />
                    <ColumnDefinition  Width="200" />
                    <ColumnDefinition  Width="200" />
                </Grid.ColumnDefinitions>
                <Image Height="150" Grid.Column="0" HorizontalAlignment="Left" Name="Image1" Stretch="Fill" VerticalAlignment="Top" 
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-1.jpg" MouseDown="Image_MouseDown" />
                <Image Height="150" Grid.Column="1" HorizontalAlignment="Left" Name="Image2" Stretch="Fill" VerticalAlignment="Top" 
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-2.jpg" MouseDown="Image_MouseDown" />
                <Image Height="150" Grid.Column="2" HorizontalAlignment="Left" Name="Image3" Stretch="Fill" VerticalAlignment="Top"
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-3.jpg" MouseDown="Image_MouseDown" />
            </Grid>
        </Border>
    </DataTemplate>
</c1:C1SlideTile.ContentTemplate>

　⑨ 続いて、同様の方法でBackContentTemplateプロパティにもグリッドを設定し、その中にImageコントロールを追加します。

　Imageコントロールは、グリッドの列位置を指定しMouseDownイベントハンドラを作成しておきます。

<c1:C1Tile.BackContentTemplate>
    <DataTemplate>
        <Border>
            <Grid HorizontalAlignment="Left" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  Width="200"  />
                    <ColumnDefinition  Width="200" />
                    <ColumnDefinition  Width="200" />
                </Grid.ColumnDefinitions>
                <Image Height="150" Grid.Column="0" HorizontalAlignment="Left" Name="Image4" Stretch="Fill" VerticalAlignment="Top" 
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-4.jpg" MouseDown="Image_MouseDown" />
                <Image Height="150" Grid.Column="1" HorizontalAlignment="Left" Name="Image5" Stretch="Fill" VerticalAlignment="Top" 
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-5.jpg" MouseDown="Image_MouseDown" />
                <Image Height="150" Grid.Column="2" HorizontalAlignment="Left" Name="Image6" Stretch="Fill" VerticalAlignment="Top" 
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-6.jpg" MouseDown="Image_MouseDown" />
            </Grid>
        </Border>
    </DataTemplate>
</c1:C1Tile.BackContentTemplate>

　⑩ コードウィンドウを表示し、MouseDownイベントハンドラを作成します。この時点ではまだ中身はありませんが、このイベントハンドラを作成しておかないとアプリケーションの動作確認ができませんので、中身は空のままイベントハンドラだけ作成しておきます。

Visual Basic

Private Sub Image_MouseDown(sender As Image, e As System.Windows.Input.MouseButtonEventArgs)
End Sub

private void Image_MouseDown(object sender, MouseButtonEventArgs e)
{
}

　⑪ ここで一度アプリケーションを実行し、タイルのアニメーションが動作することを確認します。

アニメーションの速度と画像をクリックした時の処理

　GUIができ上がったら、画像をクリックした時にその画像を別ウィンドウで表示する処理を、Image_MouseDownイベントハンドラに作成します。

　① 最初に、アニメーションの動作速度を設定する処理を、初期化処理の中に記述します（詳細は前回の記事を参照してください）。

C1TileService.UpdateInterval = TimeSpan.FromSeconds(2)

　② 作成したイベントハンドラ「Image_MouseDown」に、マウスボタンを押した画像を別ウィンドウで表示する処理を作成します。

　まず、新しいWindowクラスとImageクラスのインスタンスを作成します。

　次に、イベントハンドラの引数「sender」にはマウスボタンが押されたImageコントロールへの参照が格納されていますので、Sourceプロパティを参照してImageコントロールに設定されている画像のファイル名を取得します。

　そして、それを新たに作成したImageオブジェクトのSourceプロパティに代入し、WindowオブジェクトのContentプロパティに設定し、Showメソッドでウィンドウを表示します。

　イベントハンドラの引数「Source」から画像を識別しますので、どの画像をクリックしてもその画像が別ウィンドウで表示されます。

Visual Basic

Imports C1.WPF.Tile

Class MainWindow

    Sub New()

        ' この呼び出しはデザイナーで必要です。
        InitializeComponent()

        ' InitializeComponent() 呼び出しの後で初期化を追加します。
        C1TileService.UpdateInterval = TimeSpan.FromSeconds(2)
    End Sub

    Private Sub Image_MouseDown(sender As Image, e As System.Windows.Input.MouseButtonEventArgs)
        Dim newwnd As Window = New Window()
        Dim img As Image = New Image()
        img.Source = sender.Source
        newwnd.Content = img
        newwnd.Show()
    End Sub
End Class

using C1.WPF.Tile;
namespace Tile_img_WPF_cs
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            C1TileService.UpdateInterval = TimeSpan.FromSeconds(1);
        }

        private void Image_MouseDown(object sender, MouseButtonEventArgs e)
        {
            var window = new Window();
            var image = new Image();
            image.Source = (sender as Image).Source;
            window.Content = image;
            window.Show();
        }
    }
}

まとめ

　このように、C1Tile/C1SlideTileコントロールは、ContentTemplate/BackContentTemplateプロパティ内にGrid・StackPanelなどと組み合わせることによって、いくつものコントロールを組み込んでいろいろなバリエーションのレイアウトを作成することができます。

　今回はテキストや画像を表示するアプリケーションを作成しましたが、ボタンやチェックボックスなどの動作系コントロールを使って、ランチャーアプリケーションを作成することも可能です。

　アイデア次第で、視覚効果が高く操作性に優れたアプリケーションを作成することができるコントロールといえるでしょう。