Back to Devexpress

Explain Formula

wpf-405226-ai-powered-extensions-explain-formula.md

latest6.6 KB
Original Source

Explain Formula

  • Dec 05, 2024
  • 3 minutes to read

The AI-powered “Explain Formula” extension generates a detailed explanation of the formula used in a worksheet cell (to clarify its purpose and function).

Run Demo: Explain Formula

Applies To

Spreadsheet Control

How It Works

The DevExpress WPF Spreadsheet control seamlessly integrates the “Explain Formula” extension. When “Explain Formula” is activated, the AI Assistant | Explain Formula command is automatically added to a worksheet cell’s popup menu.

Activate Explain Formula

1. Install DevExpress NuGet Packages

  1. DevExpress.AIIntegration.Wpf
  2. DevExpress.Wpf

Read the following help topics for information on how to obtain the DevExpress NuGet Feed and install DevExpress NuGet packages:

2. Register AI Client

See the following help topic for information on required NuGet packages and system requirements: Register an AI Client.

The following code snippet registers an Azure OpenAI client at application startup within the AIExtensionsContainerDesktop container:

csharp
using Azure.AI.OpenAI;
using DevExpress.AIIntegration;
using DevExpress.Xpf.Core;
using Microsoft.Extensions.AI;
using System;
using System.Windows;

namespace AIAssistantApp {
    public partial class App : Application {
        static App() {
            CompatibilitySettings.UseLightweightThemes = true;
        }

        protected override void OnStartup(StartupEventArgs e) {
            base.OnStartup(e);
            ApplicationThemeHelper.ApplicationThemeName = "Win11Light";

            // For example, ModelId = "gpt-4o-mini"
            IChatClient azureChatClient = new Azure.AI.OpenAI.AzureOpenAIClient(new Uri(AzureOpenAIEndpoint),
                new System.ClientModel.ApiKeyCredential(AzureOpenAIKey)).GetChatClient(ModelId).AsIChatClient();
            AIExtensionsContainerDesktop.Default.RegisterChatClient(azureChatClient);
        }
    }
}
vb
Imports Azure.AI.OpenAI
Imports DevExpress.AIIntegration
Imports DevExpress.Xpf.Core
Imports Microsoft.Extensions.AI
Imports System
Imports System.Windows

Namespace AIAssistantApp
    Partial Public Class App
        Inherits Application

        Shared Sub New()
            CompatibilitySettings.UseLightweightThemes = True
        End Sub

        Protected Overrides Sub OnStartup(ByVal e As StartupEventArgs)
            MyBase.OnStartup(e)
            ApplicationThemeHelper.ApplicationThemeName = "Win11Light"

            ' For example, ModelId = "gpt-4o-mini"
            Dim azureChatClient As IChatClient = New AzureOpenAIClient(New Uri(AzureOpenAIEndpoint), 
                New System.ClientModel.ApiKeyCredential(AzureOpenAIKey)).GetChatClient(ModelId).AsIChatClient()
            AIExtensionsContainerDesktop.Default.RegisterChatClient(azureChatClient)
        End Sub
    End Class
End Namespace

3. Create and Configure Explain Formula Behavior

To enable the “Explain Formula” functionality in a DevExpress WPF Spreadsheet control, add mvvm and ai namespaces to the Window and attach ExplainFormulaBehavior to the Spreadsheet control:

xaml
<dx:ThemedWindow
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxsps="http://schemas.devexpress.com/winfx/2008/xaml/spreadsheet"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
    xmlns:dxai="http://schemas.devexpress.com/winfx/2008/xaml/ai"
    x:Class="AIAssistant.MainWindow"
    Title="MainWindow" Height="800" Width="800">
    <Grid>
        <dxsps:SpreadsheetControl CommandBarStyle="Ribbon" ShowStatusBar="True" ShowFormulaBar="True">
            <dxmvvm:Interaction.Behaviors>
                <dxai:ExplainFormulaBehavior x:Name="ExplainFormula"/>
            </dxmvvm:Interaction.Behaviors>
        </dxsps:SpreadsheetControl>
    </Grid>
</dx:ThemedWindow>

4. Define Shortcuts and Bind Commands

The following example defines the following shortcuts:

  • Ctrl+E: executes the Explain Formula extension.

  • Ctrl+G: executes the Generate Image Description extension.

  • XAML

xaml
<dx:ThemedWindow
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxsps="http://schemas.devexpress.com/winfx/2008/xaml/spreadsheet"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
    xmlns:dxai="http://schemas.devexpress.com/winfx/2008/xaml/ai"
    x:Class="AIAssitant.MainWindow"
    Title="MainWindow" Height="800" Width="800">
    <Grid>
        <dxsps:SpreadsheetControl CommandBarStyle="Ribbon" ShowStatusBar="True" ShowFormulaBar="True">
            <dxmvvm:Interaction.Behaviors>
                <dxai:ExplainFormulaBehavior x:Name="ExplainFormula"/>
                <dxai:GenerateImageDescriptionBehavior x:Name="GenerateImageDescription"/>
            </dxmvvm:Interaction.Behaviors>
            <dxsps:SpreadsheetControl.InputBindings>
                <KeyBinding Gesture="Ctrl+E"
                    Command="{Binding ElementName=ExplainFormula, Path=ExplainFormulaCommand}"/>
                <KeyBinding Gesture="Ctrl+G"
                    Command="{Binding ElementName=GenerateImageDescription, Path=GenerateImageDescriptionCommand}"/>
            </dxsps:SpreadsheetControl.InputBindings>
        </dxsps:SpreadsheetControl>
        <Button Content="Explain Formula"
            Command="{Binding ElementName=ExplainFormula, Path=ExplainFormulaCommand}"/>
        <Button Content="Describe Picture"
            Command="{Binding ElementName=GenerateImageDescription, Path=GenerateImageDescriptionCommand}"/>
    </Grid>
</dx:ThemedWindow>

See Also

AI-powered Extensions for WPF