syncfusion-winforms-tile-layout

Syncfusion WinForms での TileLayout の実装

このスキルでは、Syncfusion WinForms TileLayout コントロールの実装方法を説明します。TileLayout は Windows 8 のスタート画面に着想を得たコンテナーで、グループに整理されたタイル項目を保持し、ドラッグ＆ドロップによる並べ替え、コンテンツが切り替わるライブタイル、柔軟なレイアウトカスタマイズに対応します。

このスキルを使用する場面

ユーザーが次のようなことを必要としている場合に、このスキルを使用します。

• グループ化されたタイルを使用して、Windows 8 の Metro スタイルのタイルインターフェイスを作成する
• ドラッグ可能で並べ替え可能なタイルを備えたダッシュボードレイアウトを実装する
• ImageStreamer を使用して、画像やテキストが切り替わるライブタイル表示を構築する
• 論理カテゴリ（LayoutGroups）ごとに整理されたグループ化タイルコンテナーを設計する
• グループ内またはグループ間で、実行時にドラッグ＆ドロップでタイルを並べ替える機能を追加する
• 余白、配置、位置を備えたカスタマイズ可能なタイルレイアウトを作成する
• タイルベースのナビゲーションを備えたモダンでタッチ操作に適したインターフェイスを実装する
• タイルベースのメニューを備えたアプリケーションランチャーやスタート画面を構築する
• フォトギャラリーやメディアコレクションをタイル形式で表示する
• 複数の情報タイルを備えたステータスダッシュボードを作成する

TileLayout は、Windows 8/10 のスタート画面に似た、柔軟で視覚的なタイルベースのインターフェイスを必要とするモダンなアプリケーションに最適です。

コンポーネントの概要

TileLayout は、LayoutGroups に整理されたタイルのコレクションを管理するコンテナーコントロールです。各 LayoutGroup には、個々のタイルとして機能する ImageStreamer 項目が含まれます。このコントロールでは、次の機能を利用できます。

• LayoutGroups：タイトルを任意で設定できる、タイルの論理的なグループ化
• ImageStreamer 項目：画像やテキストを切り替えて表示できるライブタイル
• ドラッグ＆ドロップ：実行時にグループ内またはグループ間でタイルを並べ替え
• レイアウトのカスタマイズ：余白、配置、行方向の制御
• 外観オプション：テーマ、フラットな親フォーム、グループタイトルの表示
• マトリックス配置：レスポンシブなグリッドへのタイルの自動配置

主な階層構造：

TileLayout (Container)
└── LayoutGroup(s) (Groups)
    └── ImageStreamer(s) (Individual Tiles)

ドキュメントとナビゲーションガイド

はじめにと基本設定

📄 参照： references/getting-started.md

次の情報が必要な場合は、このリファレンスを参照してください。

• 必要なアセンブリ依存関係と NuGet パッケージ
• デザイナーまたはコードから TileLayout を作成する方法
• タイルを整理するための LayoutGroups の追加方法
• グループへの ImageStreamer 項目の追加方法
• 最初の実装に必要な基本設定
• 最小限の完全な動作例
• TileLayout の階層構造

レイアウトのカスタマイズ

📄 参照： references/layout-customization.md

次の情報が必要な場合は、このリファレンスを参照してください。

• Alignment プロパティ（Near、Far、Center）
• 水平方向の余白（HorzNearMargin、HorzFarMargin）
• 垂直方向の余白（TopMargin、BottomMargin）
• ReverseRows によるレイアウト方向の変更
• MainLayout プロパティの設定
• カスタムの配置と間隔
• レスポンシブなレイアウト動作

外観とスタイル

📄 参照： references/appearance-styling.md

次の情報が必要な場合は、このリファレンスを参照してください。

• フラットなフォーム外観にするための SetParentFormFlat
• グループ名を表示するための ShowGroupTitle
• カスタムの BackColor を使用するための IgnoreThemeBackground
• テーマの統合とスタイル設定
• 外観のカスタマイズオプション
• プロフェッショナルな外観の設定

ImageStreamer ライブタイル

📄 参照： references/image-streamer-tiles.md

次の情報が必要な場合は、このリファレンスを参照してください。

• ImageStreamer タイルへの画像の追加
• アニメーションのための SlideShow と SliderSpeed
• ナビゲーションコントロールのための ShowNavigator
• ImageStreamDirection（5 方向：LeftToRight、RightToLeft、TopToBottom、BottomToTop、HorizontalFlip）
• ImageStreamerType（Normal と DoubleHorizontal）
• タイルの背景色のための InternalBackColor
• 画像やテキストが切り替わるライブタイルの作成
• タイルのアニメーションとトランジションの設定

ドラッグ＆ドロップ

📄 参照： references/drag-and-drop.md

次の用途では、このリファレンスをお読みください：

• LayoutGroup 内でのドラッグ＆ドロップ
• 異なるグループ間でのドラッグ＆ドロップ
• ユーザーによる実行時のタイル並べ替え
• ユーザー操作のパターン
• 制限事項とベストプラクティス

クイックスタートの例

2 つのグループとライブタイルを持つ TileLayout を作成する最小限の例を紹介します。

using Syncfusion.Windows.Forms.Tools;
using System;
using System.Drawing;
using System.Windows.Forms;

public class TileLayoutExample : Form
{
    private TileLayout tileLayout1;
    private LayoutGroup layoutGroup1;
    private LayoutGroup layoutGroup2;
    private ImageStreamer imageStreamer1;
    private ImageStreamer imageStreamer2;
    
    public TileLayoutExample()
    {
        // Create TileLayout
        tileLayout1 = new TileLayout();
        tileLayout1.Dock = DockStyle.Fill;
        tileLayout1.ShowGroupTitle = true;
        
        // Create first LayoutGroup
        layoutGroup1 = new LayoutGroup();
        layoutGroup1.Text = "Photos";
        layoutGroup1.BackColor = ColorTranslator.FromHtml("#8C6FF5");
        
        // Create second LayoutGroup
        layoutGroup2 = new LayoutGroup();
        layoutGroup2.Text = "Documents";
        layoutGroup1.BackColor = ColorTranslator.FromHtml("#8C6FF5");
        
        // Create ImageStreamer tiles with images
        imageStreamer1 = new ImageStreamer();
        imageStreamer1.SlideShow = true;
        imageStreamer1.SliderSpeed = 100;
        imageStreamer1.Images.Add(Image.FromFile("image1.jpg"));
        imageStreamer1.Images.Add(Image.FromFile("image2.jpg"));
        
        imageStreamer2 = new ImageStreamer();
        imageStreamer2.InternalBackColor = Color.LightBlue;
        imageStreamer2.Images.Add(Image.FromFile("doc1.png"));
        
        // Add ImageStreamers to LayoutGroups
        layoutGroup1.Controls.Add(imageStreamer1);
        layoutGroup2.Controls.Add(imageStreamer2);
        
        // Add LayoutGroups to TileLayout
        tileLayout1.Controls.Add(layoutGroup1);
        tileLayout1.Controls.Add(layoutGroup2);
        
        // Add TileLayout to form
        this.Controls.Add(tileLayout1);
        this.Size = new Size(800, 600);
        this.Text = "TileLayout Example";
    }
}

結果： 2 つのグループ（「Photos」と「Documents」）を持ち、それぞれに画像が切り替わるライブタイルが含まれるタイルレイアウトです。

よくあるパターン

複数のタイルグループを持つダッシュボード

パターン： コンテンツの種類ごとに複数のグループ化されたセクションを持つダッシュボードを作成します。

// Create main TileLayout
var tileLayout = new TileLayout();
tileLayout.Dock = DockStyle.Fill;
tileLayout.ShowGroupTitle = true;
tileLayout.MainLayout.TopMargin = 20;
tileLayout.MainLayout.HorzNearMargin = 20;

// Create groups for different categories
var socialGroup = new LayoutGroup { Text = "Social" };
var newsGroup = new LayoutGroup { Text = "News" };
var mediaGroup = new LayoutGroup { Text = "Media" };

// Add multiple tiles to each group
for (int i = 0; i < 4; i++)
{
    var tile = new ImageStreamer();
    tile.Images.Add(GetImage($"social{i}.png"));
    tile.SlideShow = true;
    socialGroup.Controls.Add(tile);
}

tileLayout.Controls.Add(socialGroup);
tileLayout.Controls.Add(newsGroup);
tileLayout.Controls.Add(mediaGroup);

用途： 複数のカテゴリのタイルを整理したダッシュボードが必要な場合です。

カスタムアニメーションを使用したライブタイル

パターン： ImageStreamer タイルを設定し、コンテンツを切り替えながら、アニメーションの方向をカスタマイズします。

// Create live tile with multiple images
var liveTile = new ImageStreamer();
liveTile.SlideShow = true;
liveTile.SliderSpeed = 150; // Slower animation
liveTile.ShowNavigator = true; // Show navigation arrows
liveTile.ImageStreamDirection = ImageStreamer.StreamDirection.BottomToTop;

// Add multiple images for rotation
liveTile.Images.Add(Image.FromFile("slide1.png"));
liveTile.Images.Add(Image.FromFile("slide2.png"));
liveTile.Images.Add(Image.FromFile("slide3.png"));
liveTile.InternalBackColor = Color.FromArgb(0, 120, 215); // Modern blue

layoutGroup.Controls.Add(liveTile);

用途： コンテンツ（ニュースフィード、フォトギャラリー、ステータス表示など）が自動的に切り替わるタイルが必要な場合です。

レイアウト位置のカスタマイズ

パターン： 余白と配置をカスタマイズして、タイルレイアウトを制御します。

// Configure MainLayout for custom positioning
tileLayout.MainLayout.Alignment = FlowAlignment.Center;
tileLayout.MainLayout.HorzNearMargin = 50;  // Left margin
tileLayout.MainLayout.HorzFarMargin = 50;   // Right margin
tileLayout.MainLayout.TopMargin = 30;       // Top margin
tileLayout.MainLayout.BottomMargin = 30;    // Bottom margin
tileLayout.MainLayout.ReverseRows = false;  // Standard flow

用途： 中央揃えのレイアウト、カスタム間隔、または特定の位置設定が必要な場合です。

主なプロパティ

TileLayout のプロパティ

プロパティ	型	説明	使用する場面
ShowGroupTitle	bool	グループタイトルの表示／非表示を切り替えます	グループの上にカテゴリ名を表示する
SetParentFormFlat	bool	親フォームにフラットな外観を適用します	モダンでミニマルな外観にする
IgnoreThemeBackground	bool	テーマではなく BackColor を使用します	背景色をカスタマイズする
MainLayout.Alignment	FlowAlignment	Near、Center、Far の配置	タイルグループの位置を制御する
MainLayout.HorzNearMargin	int	左マージン（ピクセル）	左側の間隔をカスタマイズする
MainLayout.HorzFarMargin	int	右マージン（ピクセル）	右側の間隔をカスタマイズする
MainLayout.TopMargin	int	上マージン（ピクセル）	上側の間隔をカスタマイズする
MainLayout.BottomMargin	int	下マージン（ピクセル）	下側の間隔をカスタマイズする
MainLayout.ReverseRows	bool	レイアウトの方向を反転します	右から左、または下から上に並べる

LayoutGroup のプロパティ

プロパティ	型	説明	使用する場面
Text	string	グループタイトルのテキスト	タイルカテゴリのラベル
BackColor	Color	グループの背景色	グループを視覚的に区別する
Items	Collection	グループ内の ImageStreamer アイテム	グループ内のタイルにアクセス／管理する

ImageStreamer（タイル）のプロパティ

プロパティ	型	説明	使用する場面
Images	ImageCollection	表示する画像のコレクション	ライブタイルに画像を追加する
SlideShow	bool	画像の切り替えを有効にします	複数の画像でタイルをアニメーション表示する
SliderSpeed	int	アニメーション速度（ms）	切り替え速度を制御する
ShowNavigator	bool	ナビゲーション矢印を表示します	画像を手動で切り替えられるようにする
ImageStreamDirection	StreamDirection	アニメーションの方向	スライドの方向を制御する
Type	ImageStreamerType	Normal または DoubleHorizontal	画像を 1 枚または 2 枚表示する
InternalBackColor	Color	タイルの背景色	個々のタイルの色をカスタマイズする

よくあるユースケース

アプリケーションランチャー

Windows 8 スタイルのスタート画面を、アプリタイルで作成します：

• アプリをカテゴリ別にグループ化します（生産性、メディア、ゲーム）
• 各タイルにアプリアイコンを表示します
• タイルをクリックしてアプリケーションを起動します
• ドラッグ＆ドロップでお気に入りを並べ替えます

フォトギャラリーダッシュボード

写真コレクションをタイル形式で表示します：

• アルバム／日付別に写真をグループ化します
• ImageStreamer で写真を切り替えて表示します
• 自動切り替えには SlideShow を使用します
• クリックして画像をフルサイズで表示します

ステータス監視ダッシュボード

ライブタイルでリアルタイムのステータスを表示します：

• システム／サービスの種類別にグループ化します
• タイルに現在のステータス／メトリクスを表示します
• 新しいデータで自動更新します
• ステータスに応じてタイルを色分けします（緑／黄／赤）

ニュース／ソーシャルフィードアグリゲーター

複数のコンテンツフィードを表示します。

• フィードソース（News、Twitter、RSS）ごとにグループ化します
• タイルを最近の項目に順次切り替えます
• タイルをクリックすると記事全体を開きます
• 一定間隔で自動更新します

実装チェックリスト

TileLayout を実装する際は、以下を確認してください。

• ✅ 必要なアセンブリが参照されている（Syncfusion.Tools.Windows.dll など）
• ✅ TileLayout が作成され、フォームに追加されている（通常はドッキング）
• ✅ LayoutGroups が追加され、タイルがカテゴリごとに整理されている
• ✅ ImageStreamer 項目がタイルとして LayoutGroups に追加されている
• ✅ 画像が ImageStreamer.Images コレクションに読み込まれている
• ✅ ライブタイル用に SlideShow/SliderSpeed が設定されている
• ✅ 必要に応じて レイアウトの余白／配置がカスタマイズされている
• ✅ グループタイトルが適切に表示／非表示に設定されている
• ✅ ドラッグアンドドロップが有効になっている（デフォルトの動作）
• ✅ 必要に応じてタイルクリック用の イベントハンドラーが追加されている

トラブルシューティング早見表

問題： タイルが表示されない

• ImageStreamer.Images コレクションに画像が少なくとも 1 つあることを確認してください
• LayoutGroup.Controls に ImageStreamer インスタンスが含まれていることを確認してください
• TileLayout.Controls に LayoutGroups が含まれていることを確認してください

問題： SlideShow がアニメーションしない

• ImageStreamer.SlideShow = true を設定してください
• Images コレクションに複数の画像があることを確認してください
• SliderSpeed が適切な値（50～200 ms）であることを確認してください

問題： ドラッグアンドドロップが機能しない

• ドラッグアンドドロップはデフォルトで有効です
• 競合するマウスイベントを処理していないことを確認してください
• タイルが他の種類のコントロールではなく、ImageStreamer コントロールであることを確認してください

問題： レイアウトが適切に中央揃え／配置されない

• MainLayout.Alignment プロパティを使用してください
• 水平方向の位置を調整するには HorzNearMargin/HorzFarMargin を調整してください
• 垂直方向の間隔を設定するには TopMargin/BottomMargin を設定してください

問題： テーマの背景がカスタムカラーを上書きする

• IgnoreThemeBackground = true を設定してください
• その後、TileLayout/LayoutGroups にカスタムの BackColor を適用してください