Syncfusion WPF Controls Demos
repository·master·Indexed 43 days ago
https://github.com/syncfusion/wpf-demosComprehensive 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.
What's inside Syncfusion WPF
- 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.
Advanced formatting features in MarkdownViewer
masterThe 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 2or>>> 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.
- Superscript:
Use Mermaid diagrams in MarkdownViewer
masterMarkdownViewer supports Mermaid, a text-based diagramming language. You can embed diagrams like flowcharts, Gantt charts, or sequence diagrams by using the
mermaidlanguage 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 --> FGenerate consolidated weather data for the Weather Analysis showcase
masterTo 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:
- 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.
- Project Setup: Place the downloaded file into the
Data Storefolder within the project. - Configure City: Open
program.csand specify the city name you wish to use. - Generate JSON: Run the utility to generate consolidated data, which will be output to the
JSON Datasfolder. - Deploy Data: Copy the generated JSON file from the
JSON Datasfolder to the project's raw data directory:wpf-demos\showcase\weather analysis\DataStore\RawData.
- Download Historical Data:
Run Individual Control Demos
masterTo run a specific control demo in isolation:
- Open the folder dedicated to that control (e.g.,
datagrid). - Open the solution file for your target framework (e.g.,
syncfusion.datagriddemos.wpf_47). - Build the project to restore NuGet packages.
- Set the specific demo project (e.g.,
syncfusion.datagriddemos.wpf) as the startup project and run.
- Open the folder dedicated to that control (e.g.,
Renew Syncfusion subscriptions
masterTo renew your existing subscription, you can either:
- Use the Syncfusion sales portal.
- Contact the sales team directly via email at
salessupport@syncfusion.com.
Run the All Controls Demo
masterTo run the complete suite of demos using the Sample Browser:
- Clone or download the repository.
- Navigate to the
samplebrowserfolder. - Open the solution file corresponding to your target framework (e.g.,
syncfusion.samplebrowser.wpf_47,syncfusion.samplebrowser.wpf_45, orsyncfusion.samplebrowser.wpf_50) in Visual Studio. - Restore NuGet packages for all demo projects.
- Set
syncfusion.samplebrowser.wpfas the startup project and run.
Get support and feedback for Syncfusion WPF
masterIf you encounter issues or have questions regarding the WPF controls, you can access support through the following channels:
- Direct Support: Submit incidents via the Syncfusion support team.
- Community Forums: Post queries and interact with other developers in the community forums.
Requirements to run Syncfusion WPF demos
masterThe WPF demos support the following .NET versions:
- .NET Framework 4.5
- .NET Framework 4.7
- .NET 5.0
Tooling Requirements
- For .NET Framework: Requires Visual Studio 2010 or higher.
- For .NET 5.0: Refer to the official .NET 5.0 requirements.
Customize Excel export styling and data formatting
masterWhen exporting from
SfDataGridto 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 setBackGroundBrush,ForeGroundBrush, andFontInfo(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
UnitPriceorQuantity).
Export Cell Types
When handling these events, check the
e.CellTypeto target specific parts of the grid:ExportCellType.HeaderCell: The header row.ExportCellType.RecordCell: The data rows.
Implementation Note
Set
e.Handled = trueafter 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; } }Customize PDF export styling with event handlers
masterYou can intercept the export process using specific event handlers to apply custom branding or formatting to the PDF document.
GridPdfExportingEventArgs
Use the
ExportingEventHandlerto 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
CellsExportingEventHandlerto apply specific styles to individual cells based on column names or cell types (e.g.,ExportCellType.RecordCell).PdfHeaderFooterEventArgs
Use the
PageHeaderFooterEventHandlerto definePdfPageTemplateElementobjects for theTop(header) andBottom(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 }Important notes for downloading ZIP archives
masterIf 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.