syncfusion-wpf-hub-tile

WPF タイルコントロールの実装

Syncfusion® WPF タイルコントロール（SfHubTile と SfPulsingTile）を実装するためのガイドです。これらのコントロールでは、アニメーション付きの遷移、コンテンツの切り替え、グループ化、アニメーションの一時停止に対応した、Windows デスクトップ風のライブタイル UI を作成できます。

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

次のような場合に、このスキルを使用してください。

• Windows デスクトップまたは Windows Phone のスタート画面に似たライブタイル UIを作成する
• SfHubTile を実装する — スライド／フェード遷移でメインコンテンツとサブコンテンツを切り替えるタイル
• SfPulsingTile を実装する — コンテンツを継続的に拡大・縮小、移動させるタイル（音楽／動画タイル風）
• タイルのヘッダー、タイトル、画像の表示を設定する
• 遷移アニメーションと間隔を設定する
• プログラムから、または HubTileService を使ってタイルをグループ化し、アニメーションを一時停止／再開する
• スタイル、テンプレート、テーマを使って外観をカスタマイズする

コンポーネントの概要

コントロール	スタイル	主な機能
SfHubTile	ライブタイル	スライド／フェード遷移でメインコンテンツとサブコンテンツを切り替えます
SfPulsingTile	音楽／動画タイル	PulseScale、RadiusX、RadiusY を使ってコンテンツを継続的に拡大・縮小、移動させます

どちらも HubTileBase を継承し、Header、Title、ImageSource、IsFrozen、GroupName、ScaleDepth、TilePressDuration、Click、Command を共有します。

必須アセンブリ：

• Syncfusion.SfHubTile.WPF
• Syncfusion.SfShared.WPF

XAML 名前空間：

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
xmlns:shared="clr-namespace:Syncfusion.Windows.Controls;assembly=Syncfusion.SfShared.Wpf"

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

はじめに

📄 参照： references/getting-started.md

• アセンブリの参照と NuGet の設定
• デザイナー、XAML、C# を使ったタイルの追加
• Header、Title、ImageSource の設定
• 基本的なクリックイベントと MVVM コマンドのバインド
• 組み込みテーマの適用

Hub Tile の機能

📄 参照： references/hub-tile-features.md

• サブコンテンツ（画像、テキスト、またはコントロール）
• HubTileTransitions を使ったスライド／フェード遷移
• 遷移間隔と HubTileTransitionCompleted イベント
• 押下時のアニメーション（ScaleDepth、TilePressDuration）
• MVVM コマンドのバインド

Pulsing Tile の機能

📄 参照： references/pulsing-tile-features.md

• 拡大縮小アニメーション（PulseScale、PulseDuration）
• 水平／垂直方向の移動（RadiusX、RadiusY、TranslateDuration）
• 押下時のアニメーション（ScaleDepth、TilePressDuration）
• OverrideDefaultStates に関する注意事項
• MVVM コマンドのバインド

グループ化と一時停止／再開

📄 参照： references/grouping-and-freeze.md

• タイルをグループ化する GroupName プロパティ
• ListView と ItemTemplate を使ったデータバインディングによるグループ化（MVVM）
• 1 つのタイルのアニメーションを一時停止／再開する IsFrozen プロパティ
• インスタンスまたはグループ名を指定する HubTileService.Freeze / UnFreeze
• System.Windows.Interactivity の依存関係に関する注意事項

外観とテーマ

📄 参照： references/appearance-and-themes.md

• HeaderStyle と HeaderTemplate のカスタマイズ
• TitleStyle のカスタマイズ
• SecondaryContent と SecondaryContentTemplate（HubTile）
• SfSkinManager を使った組み込みテーマの適用
• ThemeStudio を使ったカスタムテーマの作成

クイックスタート

SfHubTile（遷移付きのライブタイル）

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        xmlns:shared="clr-namespace:Syncfusion.Windows.Controls;assembly=Syncfusion.SfShared.Wpf">
  <Grid>
    <syncfusion:SfHubTile Header="Mail"
                          Title="You have 5 new messages"
                          ImageSource="/Assets/mail.png"
                          Foreground="White"
                          Interval="00:00:03">
      <syncfusion:SfHubTile.HubTileTransitions>
        <shared:SlideTransition/>
      </syncfusion:SfHubTile.HubTileTransitions>
      <syncfusion:SfHubTile.SecondaryContent>
        <Image Source="/Assets/mail-preview.png" Stretch="UniformToFill" Margin="-1"/>
      </syncfusion:SfHubTile.SecondaryContent>
    </syncfusion:SfHubTile>
  </Grid>
</Window>

SfPulsingTile（拡大・縮小／移動アニメーション）

<syncfusion:SfPulsingTile Header="Music"
                           Title="Now Playing - Song Name"
                           ImageSource="/Assets/album.jpg"
                           Foreground="White"
                           PulseScale="2"
                           PulseDuration="00:00:03"
                           RadiusX="50"
                           RadiusY="50">
  <Image Source="/Assets/album.jpg" Stretch="UniformToFill"/>
</syncfusion:SfPulsingTile>

C# コードビハインド

using Syncfusion.Windows.Controls.Notification;

SfHubTile hubTile = new SfHubTile();
hubTile.Header = "Mail";
hubTile.Title = "You have 5 new messages";
hubTile.Foreground = Brushes.White;
hubTile.ImageSource = new BitmapImage(new Uri(@"/Assets/mail.png", UriKind.RelativeOrAbsolute));
hubTile.HubTileTransitions.Add(new SlideTransition());
hubTile.Interval = TimeSpan.FromSeconds(3.0);
grid.Children.Add(hubTile);

よく使われるパターン

適切なタイルの種類を選ぶ

• コンテンツを切り替えるライブタイルが必要な場合 → SecondaryContent と遷移を設定した SfHubTile を使用します
• 背景を継続的にアニメーションさせたい場合（音楽／動画風） → PulseScale と RadiusX／RadiusY を設定した SfPulsingTile を使用します
• 両方が必要な場合 → それぞれ独立しているため、同じレイアウト内で組み合わせて使用できます

必要に応じてタイルを一時停止する

// Freeze single tile
hubTile.IsFrozen = true;

// Freeze entire group
HubTileService.Freeze("GroupName");

// Unfreeze entire group
HubTileService.UnFreeze("GroupName");

MVVM：コレクションからタイルをバインドする

ObservableCollection<Model> を ListView にバインドし、ItemTemplate で SfHubTile を使用します。各モデルには Header、ImageSource、Interval の各プロパティを定義します。MVVM の完全な例については、references/grouping-and-freeze.md を参照してください。

主なプロパティ

プロパティ	コントロール	用途
Header	両方	タイル下部に表示されるラベル
Title	両方	タイル上部の通知テキスト
ImageSource	両方	メイン画像のパス
Foreground	両方	テキストの色（暗いタイルでは White に設定）
IsFrozen	両方	アニメーションの停止／開始
GroupName	両方	タイルをグループ化して一括で停止／再開
Interval	SfHubTile	切り替えまでの時間
SecondaryContent	SfHubTile	切り替え中に表示されるコンテンツ
HubTileTransitions	SfHubTile	切り替え効果（Slide、Fade）
PulseScale	SfPulsingTile	ズームの大きさ
PulseDuration	SfPulsingTile	1 回のズームサイクルの時間
RadiusX / RadiusY	SfPulsingTile	X／Y 軸上の移動範囲
TranslateDuration	SfPulsingTile	1 回の移動サイクルの時間
ScaleDepth	両方	押下アニメーションのズームの深さ
TilePressDuration	両方	押下アニメーションの時間