Customizing Maximized Item in UWP Tile View (SfTileView)

10 May 20212 minutes to read

SfTileView provides several properties for customizing the maximized item.

Changing maximized item height

MaximizedItemHeight property is used to set height for the maximized item.

XAML

<layout:SfTileView x:Name="tileView" MaximizedItemHeight="400">

</layout:SfTileView>

C#

tileView.MaximizedItemHeight = 400.0;

VB.NET

tileView.MaximizedItemHeight = 400.0

Changing maximized item width

MaximizedItemWidth property is used to set width for the maximized item.

XAML

<layout:SfTileView x:Name="tileView" MaximizedItemWidth="400">

</layout:SfTileView>

C#

tileView.MaximizedItemWidth = 400.0;

VB.NET

tileView.MaximizedItemWidth = 400.0

Animating maximized content

MaximizedContentTransitions property is used to apply a set of transitions when an item is maximized.

XAML

<layout:SfTileView x:Name="tileView">

<layout:SfTileView.MaximizedContentTransitions>

<TransitionCollection>

<PopupThemeTransition/>

</TransitionCollection>

</layout:SfTileView.MaximizedContentTransitions>

</layout:SfTileView>

C#

tileView.MaximizedItemHeight = 400.0;

tileView.Transitions = new TransitionCollection();

tileView.Transitions.Add(new PopupThemeTransition());

VB.NET

tileView.MaximizedItemHeight = 400.0

tileView.Transitions = New TransitionCollection()

tileView.Transitions.Add(New PopupThemeTransition())

Customizing maximized item

MaximizedItemContainerStyle property is used to set style for the ContentControl that holds the MaximizedContent. It can be set as follows:

XAML

<layout:SfTileView>

<layout:SfTileView.MaximizedItemContainerStyle>

<Style TargetType="ContentControl">

<Setter Property="Foreground" Value="Red"/>

</Style>

</layout:SfTileView.MaximizedItemContainerStyle>

<layout:SfTileViewItem Background="LightBlue" Content="PaulVent" MaximizedContent="Description about Paul"/>

<layout:SfTileViewItem Background="LightBlue" Content="James" MaximizedContent="Description about James"/>

<layout:SfTileViewItem Background="LightBlue" Content="Carl" MaximizedContent="Description about Carl"/>

<layout:SfTileViewItem Background="LightBlue" Content="Niko" MaximizedContent="Description about Niko"/>

</layout:SfTileView>