Skip to content

995186-Resolve the ReadMe file length issue in this sample repository #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Raghav-Sudhakar wants to merge 1 commit into
base: main
Choose a base branch
from
Open

995186-Resolve the ReadMe file length issue in this sample repository #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 30 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,31 @@
# How-to-set-margin-between-TileViewItem-in-WPF-TileView-control
This repository contains the sample that how to set the margin between TileViewItem in WPF TileView control.
# Margin Between TileViewItem in WPF TileViewControl
This sample shows how to add consistent spacing between items in a Syncfusion WPF TileViewControl by styling the TileViewItem container. You’ll learn how to apply margins via ItemContainerStyle, tune layout spacing in both Normal and Maximized states, and theme the control.

KB article - [How-to-set-margin-between-TileViewItem-in-WPF-TileView-control](https://www.syncfusion.com/kb/8840/how-to-set-margin-between-each-tileviewitem-in-tileviewcontrol)
## Features
- Set uniform outer spacing for each TileViewItem via ItemContainerStyle
- Different margins for Normal and Maximized states if desired
- Works with ItemsSource or direct child items
- Compatible with themes and custom templates
- Simple and MVVM-friendly approach

## Getting Started
1. Create a new WPF project in Visual Studio.
2. Install the NuGet package: Syncfusion.Tools.WPF.
3. Add the Syncfusion XML namespace in XAML:
- xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
4. Place a TileViewControl in your Window/Page.
5. Apply an ItemContainerStyle that sets the Margin on TileViewItem.
6. Optionally apply a theme using syncfusion:SkinStorage.VisualStyle.

## How It Works
TileViewControl generates TileViewItem containers for each item. By setting an ItemContainerStyle that targets TileViewItem and assigns the Margin property, you create visual gaps between tiles. This does not alter the inner content’s padding; use Padding inside your item template if you also want spacing within a tile.

## Usage Tips
- Use Margin on the TileViewItem for outer spacing; use Padding inside your item template for inner spacing.
- Keep margins modest (e.g., 6–12) to avoid excessive whitespace and preserve layout balance.
- If you need different spacing when a tile is maximized, use triggers on TileViewItem.State to adjust Margin conditionally.
- Combine with Grid or UniformGrid-like sizing inside the item template to create consistent inner layouts.
- Theme with syncfusion:SkinStorage.VisualStyle to match your application’s branding.

## About the Sample
This sample focuses on spacing between tiles in the Syncfusion WPF TileViewControl, providing a clean, readable layout with simple styling that works well in MVVM scenarios. Extend it by adding commands, richer item templates, and responsive sizing behavior.