Skip to main content

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

View Example

        Title="MainWindow" Height="600" Width="800">
        <DataTemplate x:Key="FormulaTemplate" DataType="{x:Type dxsps:CellData}">
                <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"/>
                        <Path VerticalAlignment="Top" Margin="0,14,0,0" HorizontalAlignment="Left" 
                              Data="M 0,0 0,10 7,0"  Fill="Lavender" />
                <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}"/>
        <dxsps:SpreadsheetControl x:Name="spreadsheetControl1"/>