Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Customize Cell Appearance Using WPF Templates

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

Cell Template Example

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