Skip to content

Commit f0210a9

Browse files
995186-Resolve the ReadMe file length issue in this sample repository
1 parent a1d6252 commit f0210a9

File tree

1 file changed

+30
-3
lines changed

1 file changed

+30
-3
lines changed

README.md

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,31 @@
1-
# How-to-set-margin-between-TileViewItem-in-WPF-TileView-control
2-
This repository contains the sample that how to set the margin between TileViewItem in WPF TileView control.
1+
# Margin Between TileViewItem in WPF TileViewControl
2+
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.
33

4-
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)
4+
## Features
5+
- Set uniform outer spacing for each TileViewItem via ItemContainerStyle
6+
- Different margins for Normal and Maximized states if desired
7+
- Works with ItemsSource or direct child items
8+
- Compatible with themes and custom templates
9+
- Simple and MVVM-friendly approach
10+
11+
## Getting Started
12+
1. Create a new WPF project in Visual Studio.
13+
2. Install the NuGet package: Syncfusion.Tools.WPF.
14+
3. Add the Syncfusion XML namespace in XAML:
15+
- xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
16+
4. Place a TileViewControl in your Window/Page.
17+
5. Apply an ItemContainerStyle that sets the Margin on TileViewItem.
18+
6. Optionally apply a theme using syncfusion:SkinStorage.VisualStyle.
19+
20+
## How It Works
21+
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.
22+
23+
## Usage Tips
24+
- Use Margin on the TileViewItem for outer spacing; use Padding inside your item template for inner spacing.
25+
- Keep margins modest (e.g., 6–12) to avoid excessive whitespace and preserve layout balance.
26+
- If you need different spacing when a tile is maximized, use triggers on TileViewItem.State to adjust Margin conditionally.
27+
- Combine with Grid or UniformGrid-like sizing inside the item template to create consistent inner layouts.
28+
- Theme with syncfusion:SkinStorage.VisualStyle to match your application’s branding.
29+
30+
## About the Sample
31+
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.

0 commit comments

Comments
 (0)