syncfusion-wpf-tile-view

Name: syncfusion-wpf-tile-view
Author: syncfusion

github.com/syncfusionDevelopment5160 installsUpdated 1w ago

About syncfusion-wpf-tile-view

A skill for building matrix-based tile layouts with TileViewControl in WPF. It covers dashboards and interactive apps, including tile reordering, maximizing, minimizing, and data binding.

Key features

01Arrange tiles in a matrix
02Reorder items with drag and drop
03Maximize and minimize tiles
04Support closable tiles
05Create tiles dynamically from data
06Customize tile appearance

Use cases

01Build tile-based dashboards
02Create drag-and-drop interfaces
03Expand and collapse tile content views
04Generate tiles from collections

Install

Copy the command and run it in a terminal.

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

After installing, type/syncfusion-wpf-tile-viewin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

appearance-customization.md

arrangement-and-layout.md

data-binding.md

getting-started.md

tile-items-features.md

Details

From the project README

WPF TileView Implementation

The TileViewControl is a WPF container that hosts TileViewItems in a customizable matrix layout. It supports auto-arrangement, drag-drop reordering, maximize/minimize functionality, and rich customization options.

Use Cases

Dashboards: Organize information in flexible tile grids
Drag-drop interfaces: Allow users to rearrange tiles
Expandable views: Tiles with maximize/minimize functionality
Rich customization: Branded headers, content, and styling
Data binding: Dynamic tile population from collections
Interactive apps: Modern, responsive WPF interfaces

Documentation Navigation

Getting Started

📄 Read: references/getting-started.md

Assembly installation and NuGet setup
Adding TileViewControl via designer, XAML, and C#
Basic configuration and initial setup
Creating your first TileView

TileViewItem Features

📄 Read: references/tile-items-features.md

TileViewItem structure and properties
Header customization and styling
Closable items with close buttons
Maximizable and minimizable items
TileViewItem states and behavior

Arrangement and Layout

📄 Read: references/arrangement-and-layout.md

Auto-arrangement in matrix positions
Drag-drop support and item reordering
BringIntoView and scroll functionality
Positioning and layout management
Matrix-based tile placement

Data Binding

📄 Read: references/data-binding.md

Binding TileView to data sources
Item templates and data templates
Dynamic tile creation from collections
Master-detail binding patterns

Appearance and Customization

📄 Read: references/appearance-customization.md

Styling and theming TileView
Custom appearance for minimized/maximized states
Content area customization
Scroll bar and border styling
Visual customization patterns

Quick Start

<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>

Common Patterns

Basic grid: Matrix layout with auto-arranged tiles of uniform size
Maximizable/minimizable: Tiles with CanMaximize="True" and CanMinimize="True" that expand on selection
Closable tiles: Set CanClose="True" to show close button with Close="Handler" event
Drag-drop reordering: Set AllowDragDrop="True" to enable tile repositioning

Key Properties

Property	Type	Purpose
`Header`	Object	Tile header content/title
`Content`	Object	Main tile content area
`CanMaximize`	bool	Enable maximize functionality
`CanMinimize`	bool	Enable minimize functionality
`CanClose`	bool	Show close button
`MinimizedHeight` / `MinimizedWidth`	double	Size when minimized
`MaximizedHeight` / `MaximizedWidth`	double	Size when maximized
`AllowDragDrop`	bool	Allow tile reordering

Next Steps

New to TileView? Start with Getting Started
Need specific item features? See TileViewItem Features
Building custom layouts? Read Arrangement and Layout
Working with data? Check Data Binding
Styling tiles? Explore Appearance and Customization

Comments

Markdown supported

Details

Author: syncfusion
Repository: syncfusion/wpf-ui-components-skills
Category: Development
Installs: 160
GitHub stars: 5

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

858.0k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.