Working with TileView in WPF Tile View
22 Mar 202313 minutes to read
This section explains different UI customization and common features available in TileViewControl control.
Populating items using TileViewItem
You can add the tileview items inside the control by adding the TileViewItem into the TileViewControl.Items
collection property.
<syncfusion:TileViewControl Name="tileViewControl">
<syncfusion:TileViewItem Content="Content 1" Header="Item 1" />
<syncfusion:TileViewItem Content="Content 2" Header="Item 2" />
<syncfusion:TileViewItem Content="Content 3" Header="Item 3" />
<syncfusion:TileViewItem Content="Content 4" Header="Item 4" />
</syncfusion:TileViewControl>
TileViewControl tileViewControl = new TileViewControl();
tileViewControl.Items.Add(new TileViewItem() { Content="Content 1",
Header = "Item 1" });
tileViewControl.Items.Add(new TileViewItem() { Content="Content 2",
Header = "Item 2" });
tileViewControl.Items.Add(new TileViewItem() { Content="Content 3",
Header = "Item 3" });
tileViewControl.Items.Add(new TileViewItem() { Content = "Content 4",
Header = "Item 4" });
NOTE
Populating items using binding
You can populate items to the TileView
control by setting the collection value to the ItemsSource
property.
NOTE
Please refer Data Binding page to know more details about binding support available in the
TileViewControl
.
Select a TileViewItem
You can select any TileViewItem
by mouse click on the specific TileViewItem
. You can get the selected item by using the SelectedItem
property. You can also get the selected value and its index by using the SelectedValue
and SelectedIndex
properties. The default value of SelectedItem
property is null
.
NOTE
You can select only one item at a time.
<syncfusion:TileViewControl Name="tileViewControl">
<syncfusion:TileViewItem Content="Content 1" Header="Item 1" />
<syncfusion:TileViewItem Content="Content 2" Header="Item 2" />
<syncfusion:TileViewItem Content="Content 3" Header="Item 3" />
<syncfusion:TileViewItem Content="Content 4" Header="Item 4" />
</syncfusion:TileViewControl>
TileViewControl tileViewControl = new TileViewControl();
tileViewControl.Items.Add(new TileViewItem() { Content="Content 1",
Header = "Item 1" });
tileViewControl.Items.Add(new TileViewItem() { Content="Content 2",
Header = "Item 2" });
tileViewControl.Items.Add(new TileViewItem() { Content="Content 3",
Header = "Item 3" });
tileViewControl.Items.Add(new TileViewItem() { Content = "Content 4",
Header = "Item 4" });
NOTE
Select TileViewItem programmatically using property
You can select a particular TileViewItem
programmatically by using the TileViewItem.IsSelected property.
<syncfusion:TileViewControl Name="tileViewControl">
<syncfusion:TileViewItem Content="Content 1" Header="Item 1" />
<syncfusion:TileViewItem IsSelected="True"
Content="Content 2" Header="Item 2" />
<syncfusion:TileViewItem Content="Content 3" Header="Item 3" />
<syncfusion:TileViewItem Content="Content 4" Header="Item 4" />
</syncfusion:TileViewControl>
TileViewControl tileViewControl = new TileViewControl();
tileViewControl.Items.Add(new TileViewItem() { Content="Content 1",
Header = "Item 1" });
tileViewControl.Items.Add(new TileViewItem() { Content="Content 2",
Header = "Item 2", IsSelected = true });
tileViewControl.Items.Add(new TileViewItem() { Content="Content 3",
Header = "Item 3" });
tileViewControl.Items.Add(new TileViewItem() { Content = "Content 4",
Header = "Item 4" });
NOTE
Selected item changed notification
The selected item changed in TileViewControl
can be examined using SelectionChanged
event. The SelectionChanged
event contains the old and newly selected item in the RemovedItems
and AddedItems
properties.
<syncfusion:TileViewControl SelectionChanged="TileViewControl_SelectionChanged"
Name="tileViewControl">
<syncfusion:TileViewItem Content="Content 1" Header="Item 1" />
<syncfusion:TileViewItem Content="Content 2" Header="Item 2" />
<syncfusion:TileViewItem Content="Content 3" Header="Item 3" />
<syncfusion:TileViewItem Content="Content 4" Header="Item 4" />
</syncfusion:TileViewControl>
tileViewControl.SelectionChanged += TileViewControl_SelectionChanged;
You can handle the event as follows,
private void TileViewControl_SelectionChanged(object sender, SelectionChangedEventArgs e) {
//Get old and new selected TileView item
var oldItem = e.RemovedItems;
var newItem = e.AddedItems;
}
Display TileViewItem splitter
If you want to display the splitter between maximized and each minimized items, use the SplitterVisibility property value as Visible
. You can also change the splitter color and thickness by using the SplitterColor and SplitterThickness properties. The default value of SplitterVisibility
is Collapsed
, SplitterColor
value is Gray
and SplitterThickness
value is 0
.
<syncfusion:TileViewControl SplitterColor="Red"
SplitterThickness="2"
SplitterVisibility="Visible"
Name="tileViewControl">
<syncfusion:TileViewItem Content="Content 1" Header="Item 1" />
<syncfusion:TileViewItem Content="Content 2" Header="Item 2" />
<syncfusion:TileViewItem Content="Content 3" Header="Item 3" />
<syncfusion:TileViewItem Content="Content 4" Header="Item 4" />
</syncfusion:TileViewControl>
tileViewControl.SplitterColor = Brushes.Red;
tileViewControl.SplitterThickness = 2;
tileViewControl.SplitterVisibility = Visibility.Visible;
NOTE
Custom UI of TileViewItem header
You can customize the appearance of TileViewItem
headers by using the HeaderTemplate property. The DataContext
of the HeaderTemplate
property is TileViewItem.Header
.
<syncfusion:TileViewControl Name="tileViewControl">
<syncfusion:TileViewItem Header="Item 1" />
<syncfusion:TileViewItem Header="Item 2" />
<syncfusion:TileViewItem Header="Item 3" />
<syncfusion:TileViewItem Header="Item 4" />
<syncfusion:TileViewControl.HeaderTemplate>
<DataTemplate x:Name="headerTemplate">
<Grid>
<TextBlock HorizontalAlignment="Center"
Text="{Binding}"
FontFamily="Verdana"
Background="Yellow"
Foreground="Red"/>
</Grid>
</DataTemplate>
</syncfusion:TileViewControl.HeaderTemplate>
</syncfusion:TileViewControl>
NOTE
Custom UI of specific TileViewItem header
You can customize the appearance of specific TileViewItem
headers by using the TileViewItem.HeaderTemplate property. The DataContext
of the TileViewItem.HeaderTemplate
property is TileViewItem.Header
.
<Window.Resources>
<DataTemplate x:Key="headerTemplate">
<Grid>
<TextBlock HorizontalAlignment="Center"
Text="{Binding}"
FontFamily="Verdana"
Background="Yellow"
Foreground="Red"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<syncfusion:TileViewControl Name="tileViewControl">
<syncfusion:TileViewItem Header="Item 1"
HeaderTemplate="{StaticResource headerTemplate }" />
<syncfusion:TileViewItem Header="Item 2" />
<syncfusion:TileViewItem Header="Item 3" />
<syncfusion:TileViewItem Header="Item 4"
HeaderTemplate="{StaticResource headerTemplate }" />
</syncfusion:TileViewControl>
</Grid>
NOTE
Custom UI of TileViewItem content
You can customize the appearance of TileViewItem
content by using the ItemTemplate property. The DataContext
of the ItemTemplate
property is TileViewItem.Content
.
<Window.Resources>
<DataTemplate x:Key="contentTemplate">
<Grid>
<TextBlock HorizontalAlignment="Center"
Text="{Binding}"
Foreground="Red"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<syncfusion:TileViewControl ItemTemplate="{StaticResource contentTemplate}"
Name="tileViewControl">
<syncfusion:TileViewItem Content="Content 1" Header="Item 1" />
<syncfusion:TileViewItem Content="Content 2" Header="Item 2" />
<syncfusion:TileViewItem Content="Content 3" Header="Item 3" />
<syncfusion:TileViewItem Content="Content 4" Header="Item 4" />
</syncfusion:TileViewControl>
</Grid>
NOTE
Custom UI of specific TileViewItem content
You can customize the appearance of specific TileViewItem
content by using the TileViewItem.ContentTemplate property. The DataContext
of the TileViewItem.ContentTemplate
property is TileViewItem.Content
.
<Window.Resources>
<DataTemplate x:Key="contentTemplate">
<Grid>
<TextBlock HorizontalAlignment="Center"
Text="{Binding}"
Foreground="Red"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<syncfusion:TileViewControl Name="tileViewControl">
<syncfusion:TileViewItem ContentTemplate="{StaticResource contentTemplate}"
Content="Content 1" Header="Item 1" />
<syncfusion:TileViewItem Content="Content 2" Header="Item 2" />
<syncfusion:TileViewItem Content="Content 3" Header="Item 3" />
<syncfusion:TileViewItem ContentTemplate="{StaticResource contentTemplate}"
Content="Content 4" Header="Item 4" />
</syncfusion:TileViewControl>
</Grid>
NOTE