mcpField
S
syncfusion-wpf-tile-view

syncfusion-wpf-tile-view

github.com/syncfusion開発5160 回インストール1 週間前に更新
リポジトリ

syncfusion-wpf-tile-view について

WPF の TileViewControl でマトリックス型のタイルレイアウトを作るためのスキルです。ダッシュボードや対話型アプリ向けに、並べ替え、最大化・最小化、データバインディングを扱います。

主な機能

  1. 01マトリックス状のタイル配置
  2. 02ドラッグ＆ドロップによる並べ替え
  3. 03タイルの最大化と最小化
  4. 04タイルのクローズ対応
  5. 05データからのタイルの動的生成
  6. 06タイル外観のカスタマイズ

活用シーン

  1. 01タイル型ダッシュボードの構築
  2. 02ドラッグ＆ドロップ画面の作成
  3. 03タイル内容の展開・折りたたみ表示
  4. 04コレクションからのタイル生成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-tile-view

インストール後、Claude Code で/syncfusion-wpf-tile-viewを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
appearance-customization.md
arrangement-and-layout.md
data-binding.md
getting-started.md
tile-items-features.md

詳細

WPF TileView の実装

TileViewControl は、カスタマイズ可能なマトリックスレイアウトで TileViewItems をホストする WPF コンテナーです。自動配置、ドラッグ＆ドロップによる並べ替え、最大化／最小化機能、および豊富なカスタマイズオプションをサポートしています。

使用例

  • ダッシュボード： 柔軟なタイルグリッドで情報を整理します
  • ドラッグ＆ドロップインターフェイス： ユーザーがタイルを並べ替えられるようにします
  • 展開可能なビュー： 最大化／最小化機能を備えたタイルです
  • 豊富なカスタマイズ： ブランドに合わせたヘッダー、コンテンツ、スタイルを設定できます
  • データバインディング： コレクションからタイルを動的に生成します
  • インタラクティブアプリ： モダンで応答性の高い WPF インターフェイスを構築します

ドキュメントの案内

はじめに

📄 参照： references/getting-started.md

  • アセンブリのインストールと NuGet のセットアップ
  • デザイナー、XAML、C# を使用した TileViewControl の追加
  • 基本設定と初期セットアップ
  • 最初の TileView の作成
TileViewItem の機能

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

  • TileViewItem の構造とプロパティ
  • ヘッダーのカスタマイズとスタイル設定
  • 閉じるボタン付きの項目
  • 最大化／最小化可能な項目
  • TileViewItem の状態と動作
配置とレイアウト

📄 参照： references/arrangement-and-layout.md

  • マトリックス位置への自動配置
  • ドラッグ＆ドロップのサポートと項目の並べ替え
  • BringIntoView とスクロール機能
  • 位置設定とレイアウト管理
  • マトリックスベースのタイル配置
データバインディング

📄 参照： references/data-binding.md

  • TileView をデータソースにバインドする方法
  • 項目テンプレートとデータテンプレート
  • コレクションからタイルを動的に作成する方法
  • マスター／詳細バインディングパターン
外観とカスタマイズ

📄 参照： references/appearance-customization.md

  • TileView のスタイル設定とテーマ設定
  • 最小化／最大化状態の外観のカスタマイズ
  • コンテンツ領域のカスタマイズ
  • スクロールバーと境界線のスタイル設定
  • 外観のカスタマイズパターン

クイックスタート

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:TileViewControl Height="400" Width="600">
        <syncfusion:TileViewItem Header="Tile 1"><TextBlock>Content 1</TextBlock></syncfusion:TileViewItem>
        <syncfusion:TileViewItem Header="Tile 2"><TextBlock>Content 2</TextBlock></syncfusion:TileViewItem>
        <syncfusion:TileViewItem Header="Tile 3"><TextBlock>Content 3</TextBlock></syncfusion:TileViewItem>
    </syncfusion:TileViewControl>
</Window>

よく使われるパターン

  • 基本的なグリッド： 均一サイズのタイルを自動配置するマトリックスレイアウトです
  • 最大化／最小化可能： CanMaximize="True" と CanMinimize="True" を設定すると、選択時に展開するタイルです
  • 閉じることができるタイル： CanClose="True" を設定すると、Close="Handler" イベントとともに閉じるボタンが表示されます
  • ドラッグ＆ドロップによる並べ替え： AllowDragDrop="True" を設定すると、タイルの位置を変更できます

主なプロパティ

プロパティ型用途
HeaderObjectタイルのヘッダーコンテンツ／タイトル
ContentObjectタイルのメインコンテンツ領域
CanMaximizebool最大化機能を有効にします
CanMinimizebool最小化機能を有効にします
CanClosebool閉じるボタンを表示します
MinimizedHeight / MinimizedWidthdouble最小化時のサイズ
MaximizedHeight / MaximizedWidthdouble最大化時のサイズ
AllowDragDropboolタイルの並べ替えを許可します

次のステップ

コメント

Markdown 対応