アニメーションの速度と画像をクリックした時の処理
GUIができ上がったら、画像をクリックした時にその画像を別ウィンドウで表示する処理を、Image_MouseDownイベントハンドラに作成します。
① 最初に、アニメーションの動作速度を設定する処理を、初期化処理の中に記述します(詳細は前回の記事を参照してください)。
C1TileService.UpdateInterval = TimeSpan.FromSeconds(2)
② 作成したイベントハンドラ「Image_MouseDown」に、マウスボタンを押した画像を別ウィンドウで表示する処理を作成します。
まず、新しいWindowクラスとImageクラスのインスタンスを作成します。
次に、イベントハンドラの引数「sender」にはマウスボタンが押されたImageコントロールへの参照が格納されていますので、Sourceプロパティを参照してImageコントロールに設定されている画像のファイル名を取得します。
そして、それを新たに作成したImageオブジェクトのSourceプロパティに代入し、WindowオブジェクトのContentプロパティに設定し、Showメソッドでウィンドウを表示します。
イベントハンドラの引数「Source」から画像を識別しますので、どの画像をクリックしてもその画像が別ウィンドウで表示されます。
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などと組み合わせることによって、いくつものコントロールを組み込んでいろいろなバリエーションのレイアウトを作成することができます。
今回はテキストや画像を表示するアプリケーションを作成しましたが、ボタンやチェックボックスなどの動作系コントロールを使って、ランチャーアプリケーションを作成することも可能です。
アイデア次第で、視覚効果が高く操作性に優れたアプリケーションを作成することができるコントロールといえるでしょう。
- 画像提供:アルペンガーデン やまくさ
記事およびサンプルプログラムに含まれる画像データを、許可なく複製・転載・転売することを固く禁止します。

 
              
               
                          
                           
                          
                           
                          
                           
                          
                           
                          
                           
                          
                           
                          
                           
                          
                           
                          
                           
                          
                           
                          
                           
                          
                           
                              
                               
                              
                               
                              
                               
                              
                               
                              
                               
                      
                     
                      
                     
                      
                     
                      
                     
                      
                     
                      
                     
                      
                     
															
														 
															
														.png) 
     
     
     
     
     
													 
													 
													 
													 
													 
										
									
 
                    