How to: Customize Cell Appearance Using WPF Templates

Jun 07, 2019
2 minutes to read

WPF templates allow you to replace the look and feel of visual elements while maintaining existing behavior. The WPF Spreadsheet provides a cell template that enables you to paint the cells in a desired manner.

Use the SpreadsheetControl.CellTemplate property to specify a cell template.

The image and sample code below demonstrate how to use a custom cell template to display a cell formula in a callout at the top right corner of the cell.

MainWindow.xaml
MainWindow.xaml.cs
MainWindow.xaml.vb
Application.xaml
Application.xaml.vb

xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxsps="http://schemas.devexpress.com/winfx/2008/xaml/spreadsheet" 
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
    x:Class="CellTemplateExample.MainWindow"
    dx:ThemeManager.ThemeName="Office2013"
        Title="MainWindow" Height="600" Width="800">
    <Window.Resources>
        <DataTemplate x:Key="FormulaTemplate" DataType="{x:Type dxsps:CellData}">
            <Grid>
                <Canvas HorizontalAlignment="Right">
                    <Grid Canvas.Left="0" Canvas.Top="-20" Height="26">
                        <Border Background="Lavender" Height="14" VerticalAlignment="Top">
                            <TextBlock Margin="10,0" Text="{Binding Path=Cell.Formula}" 
                                       FontWeight="Bold" Foreground="Brown" VerticalAlignment="Center"/>
                        </Border>
                        <Path VerticalAlignment="Top" Margin="0,14,0,0" HorizontalAlignment="Left" 
                              Data="M 0,0 0,10 7,0" Fill="Lavender" />
                    </Grid>
                </Canvas>
                <TextBlock Text="{Binding TextSettings.Text}" TextWrapping="{Binding TextSettings.TextWrapping}" 
                           FontFamily="{Binding TextSettings.FontFamily}"
                           FontStyle="{Binding TextSettings.FontStyle}" FontSize="{Binding TextSettings.FontSize}" 
                           FontWeight="{Binding TextSettings.FontWeight}" 
                           TextAlignment="{Binding TextSettings.TextAlignment}" 
                           Foreground="Black" Margin="0,0,0,2" Clip="{Binding Clip}"/>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <dxsps:SpreadsheetControl x:Name="spreadsheetControl1"/>
    </Grid>
</Window>

csharp

using System.Windows;

namespace CellTemplateExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            spreadsheetControl1.LoadDocument("vlookup.xlsx");
            #region #celltemplate_code
            spreadsheetControl1.CellTemplate = 
                spreadsheetControl1.TryFindResource("FormulaTemplate") as DataTemplate;
            #endregion #celltemplate_code
        }
    }
}

Imports Microsoft.VisualBasic
Imports System.Windows

Namespace CellTemplateExample
    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
            spreadsheetControl1.LoadDocument("vlookup.xlsx")
' #Region "#celltemplate_code"
            spreadsheetControl1.CellTemplate = TryCast(spreadsheetControl1.TryFindResource("FormulaTemplate"), DataTemplate)
' #End Region ' #celltemplate_code
        End Sub
    End Class
End Namespace

xaml

<Application x:Class="CellTemplateExample.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Threading.Tasks
Imports System.Windows

Namespace CellTemplateExample
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application
    End Class
End Namespace