syncfusion-winforms-hub-tile

HubTiles の実装

このスキルを使用するタイミング

ユーザーが Windows Forms アプリケーションに Syncfusion HubTile コントロールを実装する必要がある場合に、このスキルを使用します。HubTile は、Windows 8 や Windows Phone のようなアニメーション付きトランジションを備えたライブタイル機能を提供します。

主な使用例

1. ダッシュボードタイル - コンテンツがアニメーション付きで更新されるダッシュボードパネル
2. アプリケーションランチャー - Windows 8 スタイルのスタート画面タイル
3. ステータス表示 - トランジション付きのアニメーションステータスインジケーター
4. ライブ通知 - スライド／回転／パルス効果で更新されるコンテンツタイル
5. メディアライブラリ - パルスアニメーション付きの音楽／動画タイル
6. ニュースフィード - コンテンツの更新に合わせて切り替わるタイル
7. KPI パネル - アニメーション付きで更新される重要業績評価指標
8. ナビゲーションメニュー - Windows Phone に似た、タイルベースのインタラクティブなナビゲーション

使用しない場合： アニメーションが不要な静的ボタンやパネルには、標準の Button または Panel コントロールを使用してください。データグリッドやテーブルには、DataGridView または Syncfusion GridControl を使用してください。

コンポーネントの概要

Syncfusion HubTile は、自動アニメーションを備えたライブタイルとして機能するコンテンツコントロールです。コンテンツの更新は、Windows 8 や Windows Phone のライブタイルに似たさまざまなトランジション効果で表示されます。

主なコンポーネント：

• タイトル領域（上部）
• コンテンツ／画像領域（中央）
• フッター領域（下部）
• オプションのバナーオーバーレイ

タイルの種類

HubTile は3 種類のアニメーションスタイルに対応しています。

1. DefaultTile

スライドトランジション効果（下から上、上から下、左から右、右から左）で通知を表示します。

次の場合に使用します：

• 順次更新されるコンテンツの表示
• ニュースまたはステータスフィード
• 特定の方向に流れるコンテンツ

2. RotateTile

タイルを水平方向または垂直方向に回転させ、反転して別のコンテンツを表示します。

次の場合に使用します：

• 表裏のコンテンツの表示（例：質問／回答）
• 2 つの状態を表示する場合
• フリップアニメーションが効果的なコンテンツ

3. PulsingTile

Windows Phone の音楽タイルや動画タイルに似た、ズームイン／ズームアウト効果を作成します。

次の場合に使用します：

• メディアコンテンツ（音楽、動画、写真）
• コンテンツに注目を集める場合
• 動的な視覚効果を作成する場合

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

インストールとセットアップ

📄 参照： references/getting-started.md

初めて HubTile をセットアップする必要がある場合に参照してください。以下を説明します。

• アセンブリ参照（Syncfusion.Tools.Windows.dll、Syncfusion.Shared.Base.dll）
• NuGet パッケージのインストール
• 名前空間のインポート（Syncfusion.Windows.Forms.Tools）
• デザイナーとコードによるセットアップ
• 基本的なタイルの作成
• 画像、タイトル、フッターの追加
• フレームワークのサポート（.NET Framework 4.5 以降、.NET 6.0～8.0）

DefaultTile（スライドトランジション）

📄 参照： references/default-tile.md

スライドトランジション効果を備えたタイルが必要な場合に参照してください。以下を説明します。

• DefaultTile の設定
• Title、Footer、ImageSource プロパティ
• トランジション効果（BottomToTop、TopToBottom、LeftToRight、RightToLeft）
• SlideTransition プロパティ
• ImageTransitionSpeed の制御
• TurnLiveTileOn プロパティ
• トランジションの完全な例

RotateTile（フリップアニメーション）

📄 参照： references/rotate-tile.md

回転／フリップするタイルが必要な場合に参照してください。以下を説明します。

• RotateTile の設定
• 水平方向および垂直方向の回転
• RotationTransition プロパティ
• TileFlipDirection（Horizontal、Vertical）
• RotationTransitionSpeed の制御
• 表裏のコンテンツの設定
• 回転の完全な例

PulsingTile（ズーム効果）

📄 参照： references/pulsing-tile.md

ズームアニメーションを備えたタイルが必要な場合に参照してください。以下を説明します。

• PulsingTile の設定
• ズームイン／ズームアウト効果
• PulseDuration プロパティ（間隔の制御）
• PulseScale プロパティ（ズームレベル）
• 画像の移動効果
• メディアタイルのスタイル設定
• パルス効果の完全な例

外観とスタイル設定

📄 参照： references/appearance-styling.md

タイルの外観をカスタマイズする場合に参照してください。内容：

• バナーの表示とカスタマイズ
• バナーのテキスト、アイコン、色
• 選択マーカー（Windows 8 スタイル）
• SelectionMarkerColor プロパティ
• ホバー時の枠線の色
• EnableHoverColor プロパティ
• ホバー時に展開する機能
• タイルを押したときの動作（スライド効果）
• EnableTileSlideEffect プロパティ
• スタイル設定の完全な例

アニメーションの停止と制御

📄 参照： references/freezing-control.md

タイルのアニメーションを一時停止／再開する場合に参照してください。内容：

• IsFrozen プロパティ
• プログラムによるアニメーションの停止
• 動的な停止／再開
• アニメーションを停止するユースケース（読み込み、ユーザー操作）
• 状態管理
• 制御の完全な例

クイックスタートの例

スライド遷移を使った DefaultTile

using Syncfusion.Windows.Forms.Tools;

// Create HubTile
HubTile newsTile = new HubTile();
newsTile.Size = new Size(200, 200);
newsTile.Location = new Point(20, 20);

// Set tile type
newsTile.TileType = HubTileType.DefaultTile;

// Configure content
newsTile.Title.Text = "Breaking News";
newsTile.Title.TextColor = Color.White;
newsTile.Footer.Text = "CNN";
newsTile.Footer.TextColor = Color.White;
newsTile.BackColor = Color.FromArgb(17, 158, 218);

// Set background image
newsTile.ImageSource = Image.FromFile("news.jpg");

// Enable live tile with transition
newsTile.TurnLiveTileOn = true;
newsTile.SlideTransition = TransitionDirection.BottomToTop;
newsTile.ImageTransitionSpeed = 3;

// Add to form
this.Controls.Add(newsTile);

フリップアニメーションを使った RotateTile

// Create rotating tile
HubTile rotateTile = new HubTile();
rotateTile.Size = new Size(200, 200);
rotateTile.Location = new Point(240, 20);

// Set tile type
rotateTile.TileType = HubTileType.RotateTile;

// Configure content
rotateTile.Title.Text = "Weather";
rotateTile.Title.TextColor = Color.White;
rotateTile.Footer.Text = "72°F Sunny";
rotateTile.Footer.TextColor = Color.White;
rotateTile.BackColor = Color.FromArgb(255, 140, 0);

// Configure rotation
rotateTile.TurnLiveTileOn = true;
rotateTile.RotationTransition = TileFlipDirection.Horizontal;
rotateTile.RotationTransitionSpeed = 2;

// Add image
rotateTile.ImageSource = Image.FromFile("weather.jpg");

this.Controls.Add(rotateTile);

メディア向けの PulsingTile

// Create pulsing tile
HubTile mediaTile = new HubTile();
mediaTile.Size = new Size(200, 200);
mediaTile.Location = new Point(460, 20);

// Set tile type
mediaTile.TileType = HubTileType.PulsingTile;

// Configure content
mediaTile.Title.Text = "Now Playing";
mediaTile.Title.TextColor = Color.White;
mediaTile.Footer.Text = "Music";
mediaTile.Footer.TextColor = Color.White;
mediaTile.BackColor = Color.FromArgb(139, 0, 139);

// Configure pulsing effect
mediaTile.TurnLiveTileOn = true;
mediaTile.PulseDuration = 2;
mediaTile.PulseScale = 1.5f;

// Add album art
mediaTile.ImageSource = Image.FromFile("album.jpg");

this.Controls.Add(mediaTile);

タイルの種類の選択ガイド

ニーズ	使用する種類	理由
コンテンツを順次更新する	DefaultTile	滑らかなスライド遷移で進行状況を表示します
方向性のある流れ（ニュースフィード）	DefaultTile (BottomToTop)	更新内容を自然な読み順で表示します
2つの状態のコンテンツ	RotateTile	フリップで別の情報を表示します
表面と裏面のコンテンツ	RotateTile	質問／回答、情報／詳細の表示に最適です
メディアコンテンツの表示	PulsingTile	Windows Phone の音楽／動画スタイルに合います
注目を集める	PulsingTile	ズーム効果で視覚的な関心を引きます
静的なアニメーションタイル	IsFrozen = false を指定した任意の種類	アニメーションが自動で実行されます
インタラクティブなタイル	DefaultTile + EnableTileSlideEffect	押したときのフィードバック効果

よくあるパターン

パターン 1：複数のタイルの種類を使ったダッシュボード

// Create dashboard layout
FlowLayoutPanel dashboard = new FlowLayoutPanel();
dashboard.Dock = DockStyle.Fill;
dashboard.BackColor = Color.FromArgb(30, 30, 30);
dashboard.Padding = new Padding(10);

// News tile (DefaultTile with slide)
HubTile newsTile = CreateDefaultTile("News", "Latest Updates", Color.FromArgb(17, 158, 218));
newsTile.SlideTransition = TransitionDirection.BottomToTop;
dashboard.Controls.Add(newsTile);

// Weather tile (RotateTile with flip)
HubTile weatherTile = CreateRotateTile("Weather", "72°F", Color.FromArgb(255, 140, 0));
weatherTile.RotationTransition = TileFlipDirection.Horizontal;
dashboard.Controls.Add(weatherTile);

// Media tile (PulsingTile with zoom)
HubTile mediaTile = CreatePulsingTile("Music", "Now Playing", Color.FromArgb(139, 0, 139));
mediaTile.PulseScale = 1.3f;
dashboard.Controls.Add(mediaTile);

this.Controls.Add(dashboard);

パターン 2：バナー通知付きのタイル

HubTile notificationTile = new HubTile();
notificationTile.TileType = HubTileType.DefaultTile;
notificationTile.Size = new Size(200, 200);

// Main content
notificationTile.Title.Text = "Messages";
notificationTile.Footer.Text = "Inbox";
notificationTile.BackColor = Color.FromArgb(0, 120, 215);

// Enable banner
notificationTile.ShowBanner = true;
notificationTile.Banner.Text = "5 new messages";
notificationTile.Banner.TextColor = Color.White;
notificationTile.BannerColor = Color.FromArgb(255, 0, 0);

// Optional banner icon
notificationTile.ShowBannerIcon = true;
notificationTile.BannerIcon = Image.FromFile("notification.png");

// Enable transition
notificationTile.TurnLiveTileOn = true;
notificationTile.SlideTransition = TransitionDirection.LeftToRight;

パターン 3：ホバー効果付きのインタラクティブなタイル

HubTile interactiveTile = new HubTile();
interactiveTile.TileType = HubTileType.DefaultTile;
interactiveTile.Size = new Size(200, 200);

// Content
interactiveTile.Title.Text = "Documents";
interactiveTile.Footer.Text = "Recent Files";
interactiveTile.BackColor = Color.FromArgb(0, 150, 136);

// Enable hover effects
interactiveTile.EnableHoverColor = true;
interactiveTile.HoveredBorderColor = Color.White;
interactiveTile.ExpandOnHover = true;

// Enable press effect
interactiveTile.EnableTileSlideEffect = true;

// Selection marker
interactiveTile.IsSelectionMarked = true;
interactiveTile.SelectionMarkerColor = Color.Yellow;

// Click handler
interactiveTile.Click += (s, e) => {
    MessageBox.Show("Tile clicked!");
};

パターン 4：操作時にアニメーションを停止／再開する

HubTile controlledTile = new HubTile();
controlledTile.TileType = HubTileType.RotateTile;
controlledTile.TurnLiveTileOn = true;

// Freeze on mouse enter
controlledTile.MouseEnter += (s, e) => {
    controlledTile.IsFrozen = true;
};

// Unfreeze on mouse leave
controlledTile.MouseLeave += (s, e) => {
    controlledTile.IsFrozen = false;
};

主なプロパティ

共通プロパティ（すべてのタイルの種類）

プロパティ	型	説明
TileType	HubTileType	DefaultTile、RotateTile、または PulsingTile
TurnLiveTileOn	bool	アニメーションを有効／無効にします
IsFrozen	bool	アニメーションを一時的に停止します
Title.Text	string	タイトルのテキスト（タイル上部）
Title.TextColor	Color	タイトルのテキスト色
Footer.Text	string	フッターのテキスト（タイル下部）
Footer.TextColor	Color	フッターのテキスト色
ImageSource	Image	背景画像
BackColor	Color	タイルの背景色

DefaultTile のプロパティ

プロパティ	型	説明
SlideTransition	TransitionDirection	BottomToTop、TopToBottom、LeftToRight、RightToLeft
ImageTransitionSpeed	int	遷移速度（1～10。数値が大きいほど速くなります）
ShowBanner	bool	バナーオーバーレイを表示します
Banner.Text	string	バナー通知のテキスト
BannerColor	Color	バナーの背景色
ShowBannerIcon	bool	バナー内にアイコンを表示します
BannerIcon	Image	バナーのアイコン画像
IsSelectionMarked	bool	選択マーカーを表示します（Windows 8 スタイル）
SelectionMarkerColor	Color	選択マーカーの枠線の色
EnableHoverColor	bool	ホバー時の枠線の強調表示を有効にします
HoveredBorderColor	Color	ホバー時の枠線の色
ExpandOnHover	bool	マウスのホバー時にタイルを展開します
EnableTileSlideEffect	bool	マウスでタイルを押したときのスライド効果

RotateTile のプロパティ

プロパティ	型	説明
RotationTransition	TileFlipDirection	水平方向または垂直方向の回転
RotationTransitionSpeed	int	回転速度（1～10。数値が大きいほど速くなります）

PulsingTile のプロパティ

プロパティ	型	説明
PulseDuration	int	拡大・縮小の間隔（秒）
PulseScale	float	拡大率（1.0 = 100%、2.0 = 200%）

一般的な使用例

1. アプリケーションダッシュボード

シナリオ： 複数のアプリタイルを配置した Windows 8 スタイルのスタート画面
解決策： FlowLayoutPanel に、異なるタイルタイプとトランジションを使用した複数の HubTiles を配置します。

2. ライブニュースフィード

シナリオ： 下からスライドインする更新情報を表示するニュースタイル
解決策： BottomToTop トランジションを設定した DefaultTile を使用し、タイマー経由でコンテンツを定期的に更新します。

3. メディアライブラリ

シナリオ： パルスアニメーションを表示する音楽・動画タイル
解決策： 適切な PulseScale とアルバム・動画アートを設定した PulsingTile を使用します。

4. ステータスモニター

シナリオ： 詳細を表示するために回転するシステムステータスタイル
解決策： 表面にステータスアイコン、裏面に詳細なメトリクスを表示する RotateTile を使用します。

5. 通知センター

シナリオ： アラート用のバナー通知を表示するタイル
解決策： ShowBanner を有効にした DefaultTile を使用し、Banner.Text を動的に更新します。

6. インタラクティブメニュー

シナリオ： タッチ操作に適したナビゲーションタイル
解決策： EnableTileSlideEffect、ExpandOnHover、クリックハンドラーを設定した DefaultTile を使用します。

ベストプラクティス

1. 適切なタイルタイプを選択する - 順次コンテンツには DefaultTile、2つの状態には RotateTile、メディアには PulsingTile を使用します。
2. 適切なトランジション速度を設定する - Speed 2～4 にすると、目障りにならず滑らかなアニメーションになります。
3. サイズを統一する - Windows 8 の標準タイルは 150x150、310x150、または 310x310 です。
4. 統一感のある配色を適用する - 同じカテゴリのタイルには関連する色を使用します。
5. ライブタイルは必要なものだけ有効にする - 気が散らないよう、すべてのタイルを同時にアニメーションさせないでください。
6. タイトルとフッターを明確にする - ユーザーがタイルの目的をひと目で把握できるようにします。
7. 緊急の通知にはバナーを使用する - 重要な更新情報のためにバナーの領域を確保します。
8. 操作中は停止する - 気が散らないよう、ユーザーがタイルにカーソルを合わせたときにタイルを停止することを検討します。
9. トランジションの方向をテストする - スライド方向がコンテンツの流れと一致することを確認します。
10. クリックイベントを処理する - 意味のあるクリック操作でタイルをインタラクティブにします。

タイルのスタイル設定ガイドライン

Windows 8 のカラーパレット

// Microsoft-inspired colors
Color TealBlue = Color.FromArgb(0, 120, 215);      // Default blue
Color LimeGreen = Color.FromArgb(16, 137, 62);     // Success/positive
Color OrangeRed = Color.FromArgb(202, 80, 16);     // Warning
Color CrimsonRed = Color.FromArgb(232, 17, 35);    // Error/urgent
Color Purple = Color.FromArgb(107, 105, 214);      // Media/entertainment
Color Teal = Color.FromArgb(0, 153, 188);          // Information

サイズの推奨事項

// Small tile (single)
Size smallTile = new Size(150, 150);

// Wide tile (horizontal)
Size wideTile = new Size(310, 150);

// Large tile
Size largeTile = new Size(310, 310);