Maximize TileViewItem in WPF Tile View

7 May 202111 minutes to read

You can maximize the TileViewItem and change its appearance in the TileViewControl.

Maximize the TileViewItem

You can maximize the TileViewItem by clicking on the maximize button.

XAML

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

C#

TileViewControl tileViewControl = new TileViewControl();
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 1" });
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 2" });
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 3" });
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 4" });

NOTE

View Sample in GitHub

Maximize on click the header

If you want to maximize the TileViewItem on clicking the header, use the ClickHeaderToMaximize property value as true. The default value of ClickHeaderToMaximize property is false.

XAML

<syncfusion:TileViewControl ClickHeaderToMaximize="True" Name="tileViewControl" >
    <syncfusion:TileViewItem Header="Item 1" />
    <syncfusion:TileViewItem Header="Item 2" />
    <syncfusion:TileViewItem Header="Item 3" />
    <syncfusion:TileViewItem Header="Item 4" />
</syncfusion:TileViewControl>

C#

tileViewControl.ClickHeaderToMaximize = true;

NOTE

View Sample in GitHub

Show maximize button only on mouse hover

If you want to show the maximize button only by mouse hover on the particular TileViewItem, use the IsMinMaxButtonOnMouseOverOnly property value as true. The default value of IsMinMaxButtonOnMouseOverOnly property is false.

XAML

<syncfusion:TileViewControl IsMinMaxButtonOnMouseOverOnly="True" Name="tileViewControl" >
    <syncfusion:TileViewItem Header="Item 1" />
    <syncfusion:TileViewItem Header="Item 2" />
    <syncfusion:TileViewItem Header="Item 3" />
    <syncfusion:TileViewItem Header="Item 4" />
</syncfusion:TileViewControl>

C#

tileViewControl.IsMinMaxButtonOnMouseOverOnly = true;

NOTE

View Sample in GitHub

Hide maximize button

You can hide the maximize button for the specific TileViewItem by using the TileViewItem.MinMaxButtonVisibility property value as Collapsed. The default value of TileViewItem.MinMaxButtonVisibility property is Visible.

XAML

<syncfusion:TileViewControl Name="tileViewControl" >
    <syncfusion:TileViewItem Header="Item 1" />
    <syncfusion:TileViewItem Header="Item 2" 
                             MinMaxButtonVisibility="Collapsed" />
    <syncfusion:TileViewItem Header="Item 3" 
                             MinMaxButtonVisibility="Collapsed"/>
    <syncfusion:TileViewItem Header="Item 4" />
</syncfusion:TileViewControl>

C#

TileViewControl tileViewControl = new TileViewControl();
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 1" });
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 2", 
    MinMaxButtonVisibility= Visibility.Collapsed });
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 3", 
    MinMaxButtonVisibility = Visibility.Collapsed });
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 4" });

NOTE

View Sample in GitHub

Custom UI of the maximize button

You can customize the appearance of particular TileViewItem’s maximize button by using the MinMaxButtonStyle property. You can also change the margin of the TileViewItem maximize button by using the MinMaxButtonMargin property. The DataContext of the MinMaxButtonStyle property is TileViewItemMinMaxButton.

XAML

<Window.Resources>
    <Style x:Key="tileViewItemMinMaxButton"
           TargetType="syncfusion:TileViewItemMinMaxButton">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Width" Value="20"/>
        <Setter Property="Height" Value="20"/>
        <Setter Property="Content">
            <Setter.Value>
                <Border Background="Red">
                    <Image Source="/maximize.png" />
                </Border>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <syncfusion:TileViewControl Name="tileViewControl">
        <syncfusion:TileViewItem Header="Item 1" 
                                 MinMaxButtonMargin="2"
                                 MinMaxButtonStyle="{StaticResource tileViewItemMinMaxButton}"/>
        <syncfusion:TileViewItem Header="Item 2"/>
        <syncfusion:TileViewItem Header="Item 3"/>
        <syncfusion:TileViewItem Header="Item 4"/>
    </syncfusion:TileViewControl>
</Grid>

NOTE

View Sample in GitHub

Change maximized TileViewItem content

By default, TileViewItem.Content property values displayed as TileViewItem content on maximized state. If you want to change the content of the TileViewItem on maximized state, use the MaximizedItemContent property. The default value of MaximizedItemContent property is null.

XAML

<syncfusion:TileViewControl  Name="tileViewControl">
    <syncfusion:TileViewItem Header="Item1" Content="Content1"
                             MaximizedItemContent="Max Content1" />
    <syncfusion:TileViewItem Header="Item2" Content="Content2"
                             MaximizedItemContent="Max Content2" />
    <syncfusion:TileViewItem Header="Item3" Content="Content3"
                             MaximizedItemContent="Max Content3" />
    <syncfusion:TileViewItem Header="Item4" Content="Content4"
                             MaximizedItemContent="Max Content4" />
</syncfusion:TileViewControl>

C#

TileViewControl tileViewControl = new TileViewControl();
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 1", 
    Content = "Content1", MaximizedItemContent = "Max Content1" });
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 2",
    Content = "Content2", MaximizedItemContent = "Max Content2" });
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 3",
    Content = "Content3", MaximizedItemContent = "Max Content3" });
tileViewControl.Items.Add(new TileViewItem() { Header = "Item 4",
    Content = "Content4", MaximizedItemContent = "Max Content4" });

NOTE

View Sample in GitHub

Custom UI of maximized TileViewItem content

You can customize the appearance of maximized TileViewItem content by using the MaximizedItemTemplate property. The DataContext of the MaximizedItemTemplate property is TileViewItem.MaximizedItemContent.

XAML

<syncfusion:TileViewControl Name="tileViewControl">
    <syncfusion:TileViewItem Header="Item1" Content="Content1"
                             MaximizedItemContent="Max Content1" />
    <syncfusion:TileViewItem Header="Item2" Content="Content2"
                             MaximizedItemContent="Max Content2" />
    <syncfusion:TileViewItem Header="Item3" Content="Content3"
                             MaximizedItemContent="Max Content3" />
    <syncfusion:TileViewItem Header="Item4" Content="Content4"
                             MaximizedItemContent="Max Content4" />
    <syncfusion:TileViewControl.MaximizedItemTemplate>
        <DataTemplate x:Name="MaxTemplate">
            <Grid>
                <TextBlock HorizontalAlignment="Center"
                           Text="{Binding}" 
                           FontFamily="Verdana"
                           Foreground="Red"/>
            </Grid>
        </DataTemplate>
    </syncfusion:TileViewControl.MaximizedItemTemplate>
</syncfusion:TileViewControl>

NOTE

View Sample in GitHub

Change maximized TileViewItem header

If you want to change the header of the TileViewItem on maximized state, use the MaximizedHeader property. The default value of MaximizedHeader property is null.

NOTE

Please refer Maximized TileViewItem header topic to know more details about maximized TileViewItem header and its customization available in the TileViewControl.

Maximized state changed notification

The TileViewControl notifies that the maximized state changed in the TileViewItem by using Maximized event. You can get the maximized item by using the Source property. You can also use the OldState and NewState properties to get the old and new state of TileViewItem.

XAML

<syncfusion:TileViewControl Maximized="TileViewControl_Maximized"
                            Name="tileViewControl" />

C#

tileViewControl.Maximized += TileViewControl_Maximized;

You can handle the event as follows:

C#

private void TileViewControl_Maximized(object sender, TileViewEventArgs args) {
    var maximizedItem = args.Source;
    var oldState = args.OldState;
    var newState = args.NewState;
}