Syncfusion WPF Controls Demos

repository·master·Indexed 43 days ago

https://github.com/syncfusion/wpf-demos

Comprehensive demonstration samples for Syncfusion WPF controls, providing practical references for API usage and implementation patterns. Supports .NET Framework 4.5, 4.7, and .NET 5.0. Includes demos for Grids (SfDataGrid), Charts, Data Visualization, Layout, Navigation, Menus, Input Controls, Calendar, Notification, File Formats (PDF, XlsIO, DocIO), and Business Intelligence components.

Tokens
14.2K
Snippets
43
Records
55
Agent score
54%

What's inside Syncfusion WPF

  1. What is MarkdownViewer?

    master
    MarkdownViewer is a WPF UI component designed to display Markdown (.md) content within an application. It parses Markdown syntax and renders it into formatted visual elements such as headings, tables, code blocks, and diagrams. It is intended for use in documentation panels, help screens, developer tools, and in-app editors where HTML is not desired.
  2. Advanced formatting features in MarkdownViewer

    master

    The MarkdownViewer supports several advanced formatting syntaxes to enhance technical documentation:

    1. Superscript and Subscript

    Used for mathematical formulas, chemical expressions, and footnotes using <sup> and <sub> tags.

    • Superscript: E = mc<sup>2</sup>
    • Subscript: H<sub>2</sub>O

    2. Blockquotes

    Used to highlight notes or warnings. Supports nesting levels.

    • Standard: > text
    • Nested: >> level 2 or >>> level 3

    3. Fenced Code Blocks

    Supports syntax highlighting for various programming languages using triple backticks.

    4. Mermaid Diagrams

    Supports embedding text-based diagrams (flowcharts, sequence diagrams, etc.) directly within the Markdown content.

  3. Use Mermaid diagrams in MarkdownViewer

    master

    MarkdownViewer supports Mermaid, a text-based diagramming language. You can embed diagrams like flowcharts, Gantt charts, or sequence diagrams by using the mermaid language identifier in a fenced code block. This allows you to generate complex visual charts directly from simple text definitions.

    flowchart TD
        A[User Opens App] --> B[MarkdownViewer Loads]
        B --> C{Contains Mermaid?}
        C -->|Yes| D[Render Diagram]
        C -->|No| E[Render Plain Markdown]
        D --> F[Display Enhanced Output]
        E --> F
  4. Generate consolidated weather data for the Weather Analysis showcase

    master

    To visualize weather data in the Weather Analysis showcase demo, you must provide historical weather data in a specific JSON format. Follow these steps to prepare the data:

    1. Download Historical Data:
      • Visit Visual Crossing Weather Data Services.
      • Enter a location and select a date range.
      • Under "Query options", select the desired weather information and choose "Daily" weather data.
      • Download the data.
    2. Project Setup: Place the downloaded file into the Data Store folder within the project.
    3. Configure City: Open program.cs and specify the city name you wish to use.
    4. Generate JSON: Run the utility to generate consolidated data, which will be output to the JSON Datas folder.
    5. Deploy Data: Copy the generated JSON file from the JSON Datas folder to the project's raw data directory: wpf-demos\showcase\weather analysis\DataStore\RawData.
  5. Run Individual Control Demos

    master

    To run a specific control demo in isolation:

    1. Open the folder dedicated to that control (e.g., datagrid).
    2. Open the solution file for your target framework (e.g., syncfusion.datagriddemos.wpf_47).
    3. Build the project to restore NuGet packages.
    4. Set the specific demo project (e.g., syncfusion.datagriddemos.wpf) as the startup project and run.
  6. Run the All Controls Demo

    master

    To run the complete suite of demos using the Sample Browser:

    1. Clone or download the repository.
    2. Navigate to the samplebrowser folder.
    3. Open the solution file corresponding to your target framework (e.g., syncfusion.samplebrowser.wpf_47, syncfusion.samplebrowser.wpf_45, or syncfusion.samplebrowser.wpf_50) in Visual Studio.
    4. Restore NuGet packages for all demo projects.
    5. Set syncfusion.samplebrowser.wpf as the startup project and run.
  7. Customize Excel export styling and data formatting

    master

    When exporting from SfDataGrid to Excel, you can intercept the export process using event handlers to apply custom styles or format specific cell values.

    Exporting Event Handlers

    • ExportingEventHandler: Used to apply styles to entire rows or headers. In the provided implementation, this can be used to set BackGroundBrush, ForeGroundBrush, and FontInfo (Bold, Size, FontName).
    • CellsExportingEventHandler: Used for fine-grained control over individual cells. This is ideal for:
      • Setting specific font sizes or names for a range.
      • Formatting specific columns (e.g., converting string values to numeric types for columns like UnitPrice or Quantity).

    Export Cell Types

    When handling these events, check the e.CellType to target specific parts of the grid:

    • ExportCellType.HeaderCell: The header row.
    • ExportCellType.RecordCell: The data rows.

    Implementation Note

    Set e.Handled = true after applying custom logic to prevent the default export behavior from overwriting your changes.

    // Example of customizing cell exporting
    private static void CellExportingHandler(object sender, GridCellExcelExportingEventArgs e)
    {
        // Apply font styles to the range
        e.Range.CellStyle.Font.Size = 12;
        e.Range.CellStyle.Font.FontName = "Segoe UI";
    
        // Target specific columns for numeric formatting
        if (e.ColumnName == "UnitPrice" || e.ColumnName == "Quantity")
        {
            if (e.CellType == ExportCellType.HeaderCell) return;
    
            if (double.TryParse(e.CellValue.ToString(), out double value))
            {
                e.Range.Number = value;
            }
            e.Handled = true;
        }
    }
  8. Customize PDF export styling with event handlers

    master

    You can intercept the export process using specific event handlers to apply custom branding or formatting to the PDF document.

    GridPdfExportingEventArgs

    Use the ExportingEventHandler to apply background colors to different cell types:

    • ExportCellType.HeaderCell: Typically used for column headers.
    • ExportCellType.GroupCaptionCell: Used for group headers.
    • ExportCellType.GroupSummaryCell: Used for summaries within a group.
    • ExportCellType.TableSummaryCell: Used for the final table summary.

    GridCellPdfExportingEventArgs

    Use the CellsExportingEventHandler to apply specific styles to individual cells based on column names or cell types (e.g., ExportCellType.RecordCell).

    PdfHeaderFooterEventArgs

    Use the PageHeaderFooterEventHandler to define PdfPageTemplateElement objects for the Top (header) and Bottom (footer) of each page. This is commonly used to draw images or text at the top and bottom of the document.

    // Example: Styling headers in the ExportingEventHandler
    static void GridPdfExportingEventhandler(object sender, GridPdfExportingEventArgs e)
    {
        if (e.CellType == ExportCellType.HeaderCell)
        {
            e.CellStyle.BackgroundBrush = PdfBrushes.LightSteelBlue;
        }
        // ... other cell types
    }
  9. Important notes for downloading ZIP archives

    master

    If you are downloading the repository as a ZIP file instead of cloning via Git, follow these steps to ensure the demos build correctly:

    • Unblock the archive: Before unzipping, right-click the ZIP file, select Properties, and check Unblock.
    • Unzip the entire archive: Do not unzip individual demos separately. The demos rely on a common folder within the archive. Unzipping only specific folders will cause build failures due to missing references.