MCPInstall

syncfusion-winui-barcode

Implement Syncfusion WinUI Barcode (SfBarcode) control to generate and display machine-readable barcodes in desktop applications. Use this when working with barcodes, QR codes, or product labeling systems. This skill covers symbology types (DataMatrix, Code39, Code128, Codabar, UPC), barcode customization, text alignment, rotation, and visual encoding for WinUI applications.

Installs
48
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/winui-ui-components-skills --skill syncfusion-winui-barcode
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads syncfusion-winui-barcode automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing Barcodes (SfBarcode)

The Syncfusion WinUI Barcode control (SfBarcode) generates and displays data in machine-readable barcode formats. It supports both one-dimensional (linear) and two-dimensional barcodes with extensive customization options for appearance, text display, and symbology-specific settings.

When to Use This Skill

Use this skill when you need to:

  • Generate barcodes or QR codes in WinUI applications
  • Encode text, numbers, or data into machine-readable formats
  • Display product codes, inventory labels, or shipping information
  • Create scannable codes for mobile devices (QR, DataMatrix)
  • Implement barcode printing functionality
  • Customize barcode appearance (colors, rotation, text display)
  • Choose appropriate symbology for specific data types
  • Configure symbology-specific settings (error correction, encoding, checksums)

Component Overview

Key Capabilities:

  • 15 Symbology Types: 12 one-dimensional + 3 two-dimensional barcode formats
  • Flexible Text Display: Customizable alignment, spacing, and visibility
  • Visual Customization: Colors, bar widths, rotation angles
  • Symbology Settings: Type-specific configurations (checksums, encoding, error correction)
  • XAML and Code-Behind Support: Declarative and programmatic implementation

Common Use Cases:

  • Product labeling (UPC, EAN codes)
  • Inventory management (Code39, Code128)
  • Shipping labels (GS1-128, DataMatrix)
  • QR codes for URLs, contact info, Wi-Fi credentials
  • Document tracking (Code93, PDF417)
  • Healthcare labels (Code32 pharmaceuticals)

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Use this when you need to:

  • Install the Syncfusion.Barcode.WinUI NuGet package
  • Set up a new WinUI project with barcode control
  • Add namespace imports (XAML: using:Syncfusion.UI.Xaml.Barcode, C#: using Syncfusion.UI.Xaml.Barcode)
  • Create your first barcode with basic configuration
  • Understand the minimal code required (Value + Symbology)

Topics Covered:

  • Creating WinUI 3 desktop application
  • NuGet package installation
  • Namespace configuration in XAML and C#
  • Basic SfBarcode declaration
  • Setting symbology (CodabarBarcode example)
  • Initial working example

Symbology Types

📄 Read: references/symbology-types.md

Use this when you need to:

  • Choose the correct barcode type for your data
  • Understand differences between 1D and 2D barcodes
  • Learn which characters each symbology supports
  • Implement specific barcode types (Codabar, Code39, Code128, QR, DataMatrix, etc.)
  • Encode different data types (numeric-only, alphanumeric, full ASCII, binary)

Covered Symbologies:

  • 1D Barcodes: Codabar, Code11, Code32, Code39, Code39Extended, Code93, Code93Extended, Code128A/B/C, UPC, GS1Code128
  • 2D Barcodes: QRBarcode, DataMatrixBarcode, Pdf417Barcode
  • Character set tables for each type
  • Industry-specific use cases

Text Customization

📄 Read: references/text-customization.md

Use this when you need to:

  • Show or hide the encoded text below the barcode
  • Adjust spacing between barcode and text
  • Align text horizontally (Left, Center, Right)
  • Align text vertically (Top, Bottom)
  • Control text visibility with ShowValue property

Customization Options:

  • Value property (encoded text)
  • ShowValue (display toggle)
  • TextSpacing (gap between bars and text)
  • HorizontalTextAlignment
  • VerticalTextAlignment

Visual Customization

📄 Read: references/visual-customization.md

Use this when you need to:

  • Change barcode colors (Background, Foreground)
  • Adjust bar width ratios (Module property)
  • Enable auto-sizing for QR and DataMatrix codes
  • Rotate barcodes (0°, 90°, 180°, 270°)
  • Ensure scanner readability with proper contrast

Customization Features:

  • Background and Foreground colors
  • Module width for 1D barcodes
  • AutoModule for 2D barcodes
  • RotationAngle with BarcodeRotation enum
  • Scanner contrast considerations

Symbology-Specific Settings

📄 Read: references/symbology-settings.md

Use this when you need to:

  • Configure checksum options for 1D barcodes
  • Set encoding format for DataMatrix barcodes
  • Choose matrix size for DataMatrix
  • Configure QR code version and error correction level
  • Set input mode for QR codes
  • Add start/stop symbols for barcode readers

Configuration Options:

  • 1D Settings: EnableCheckSum, ShowCheckSum, EncodeStartStopSymbols
  • DataMatrix: Encoding (ASCII/ASCIINumeric/Auto/Base256), MatrixSize (30+ size options)
  • QR Code: QRVersion (1-40 or Auto), ErrorCorrectionLevel (Low/Medium/Quartile/High), InputMode (Numeric/AlphaNumeric/Binary)

Quick Start

Minimal Barcode Implementation

XAML:

<Page xmlns:syncfusion="using:Syncfusion.UI.Xaml.Barcode">
    <Grid>
        <syncfusion:SfBarcode x:Name="barcode" 
                               Value="48625310"
                               Height="150">
            <syncfusion:SfBarcode.Symbology>
                <syncfusion:CodabarBarcode />
            </syncfusion:SfBarcode.Symbology>
        </syncfusion:SfBarcode>
    </Grid>
</Page>

C#:

using Syncfusion.UI.Xaml.Barcode;

SfBarcode barcode = new SfBarcode();
barcode.Value = "48625310";
barcode.Height = 150;
barcode.Symbology = new CodabarBarcode();
Root_Grid.Children.Add(barcode);

QR Code for URL

<syncfusion:SfBarcode x:Name="qrCode" 
                       Value="http://www.syncfusion.com"
                       Height="200"
                       Width="200">
    <syncfusion:SfBarcode.Symbology>
        <syncfusion:QRBarcode />
    </syncfusion:SfBarcode.Symbology>
</syncfusion:SfBarcode>

Common Patterns

Pattern 1: Product Label Barcode (UPC)

<syncfusion:SfBarcode Value="012345678905" 
                       Height="150" 
                       Width="300"
                       HorizontalTextAlignment="Center">
    <syncfusion:SfBarcode.Symbology>
        <syncfusion:UpcBarcode />
    </syncfusion:SfBarcode.Symbology>
</syncfusion:SfBarcode>

Pattern 2: Inventory Code (Code39 with Checksum)

<syncfusion:SfBarcode Value="ITEM12345" Height="120">
    <syncfusion:SfBarcode.Symbology>
        <syncfusion:Code39Barcode EnableCheckSum="True" 
                                   ShowCheckSum="True" />
    </syncfusion:SfBarcode.Symbology>
</syncfusion:SfBarcode>

Pattern 3: Shipping Label (DataMatrix)

<syncfusion:SfBarcode Value="SHIP2024-A45678" 
                       Width="200" 
                       Height="200"
                       ShowValue="False"
                       AutoModule="True">
    <syncfusion:SfBarcode.Symbology>
        <syncfusion:DataMatrixBarcode Encoding="Auto" 
                                       MatrixSize="Auto" />
    </syncfusion:SfBarcode.Symbology>
</syncfusion:SfBarcode>

Pattern 4: Rotated Barcode for Vertical Labels

<syncfusion:SfBarcode Value="VERTICAL123" 
                       RotationAngle="Angle90"
                       Height="250" 
                       Width="150">
    <syncfusion:SfBarcode.Symbology>
        <syncfusion:Code128BBarcode />
    </syncfusion:SfBarcode.Symbology>
</syncfusion:SfBarcode>

Pattern 5: QR Code with Error Correction

<syncfusion:SfBarcode Value="https://example.com/product/12345" 
                       Width="250" 
                       Height="250"
                       ShowValue="False">
    <syncfusion:SfBarcode.Symbology>
        <syncfusion:QRBarcode ErrorCorrectionLevel="High" 
                               QRVersion="Auto" />
    </syncfusion:SfBarcode.Symbology>
</syncfusion:SfBarcode>

Pattern 6: Custom Colored Barcode

<syncfusion:SfBarcode Value="COLORED123" 
                       Background="LightYellow"
                       Foreground="DarkBlue"
                       Height="150">
    <syncfusion:SfBarcode.Symbology>
        <syncfusion:Code128CBarcode />
    </syncfusion:SfBarcode.Symbology>
</syncfusion:SfBarcode>

Key Properties

Core Properties

PropertyTypeDescription
ValuestringThe text/data to encode in the barcode
SymbologyBarcodeBaseThe barcode type (Codabar, QR, DataMatrix, etc.)
ShowValueboolDisplay encoded text below barcode (default: true)
ModuledoubleBar width ratio for 1D barcodes
AutoModuleboolAuto-size 2D barcodes based on control size
RotationAngleBarcodeRotationRotate barcode (Angle0/90/180/270)
BackgroundBrushBarcode background color
ForegroundBrushBarcode bars/dots color
TextSpacingdoubleSpace between barcode and text
HorizontalTextAlignmentTextAlignmentText horizontal alignment (Left/Center/Right)
VerticalTextAlignmentBarcodeTextAlignmentText vertical position (Top/Bottom)

Symbology Selection Guide

For numeric-only data:

  • Code11, Code32, UpcBarcode, Code128C

For alphanumeric data:

  • Code39, Code93, Code128A/B

For full ASCII characters:

  • Code39Extended, Code93Extended

For compact 2D codes:

  • QRBarcode (URLs, text)
  • DataMatrixBarcode (small labels)

For high-capacity data:

  • Pdf417Barcode (IDs, transport)

For international products:

  • UpcBarcode, GS1Code128Barcode

Common Use Cases

Use Case 1: Product Packaging

Generate UPC barcodes for retail products with centered text display.

When: Creating product labels, retail packaging, price tags
Symbology: UpcBarcode
References: getting-started.md, symbology-types.md

Use Case 2: Warehouse Inventory

Create scannable codes for inventory tracking with alphanumeric identifiers.

When: Asset tracking, warehouse management, stock control
Symbology: Code39, Code128
References: symbology-types.md, symbology-settings.md

Use Case 3: QR Codes for Mobile Scanning

Generate QR codes for URLs, contact information, or Wi-Fi credentials.

When: Marketing materials, business cards, product authentication
Symbology: QRBarcode
References: symbology-types.md, symbology-settings.md

Use Case 4: Shipping Labels

Create compact DataMatrix codes for shipping and logistics.

When: Package tracking, postal services, logistics
Symbology: DataMatrixBarcode, GS1Code128Barcode
References: symbology-types.md, symbology-settings.md

Use Case 5: Pharmaceutical Labels

Generate Code32 barcodes for medication packaging and tracking.

When: Healthcare, pharmaceutical industry, prescription labels
Symbology: Code32Barcode
References: symbology-types.md

Use Case 6: Document Management

Encode document IDs with PDF417 for archiving and retrieval systems.

When: Document tracking, archival systems, identification cards
Symbology: Pdf417Barcode
References: symbology-types.md

Additional Resources

FAQ

What does the syncfusion-winui-barcode skill do?

Implement Syncfusion WinUI Barcode (SfBarcode) control to generate and display machine-readable barcodes in desktop applications. Use this when working with barcodes, QR codes, or product labeling systems. This skill covers symbology types (DataMatrix, Code39, Code128, Codabar, UPC), barcode customization, text alignment, rotation, and visual encoding for WinUI applications.

How do I install syncfusion-winui-barcode?

Run npx skills add https://github.com/syncfusion/winui-ui-components-skills --skill syncfusion-winui-barcode in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-winui-barcode/ (personal) or .claude/skills/syncfusion-winui-barcode/ (project).

Which AI agents can use syncfusion-winui-barcode?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-winui-barcode safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-winui-barcode?

It is published by syncfusion in syncfusion/winui-ui-components-skills. It has 48 recorded installs.

More from syncfusion/winui-ui-components-skills

View all →

syncfusion-winui-getting-started

syncfusion/winui-ui-components-skills

Comprehensive guide for setting up Syncfusion WinUI components, including license registration, NuGet package installation, system requirements verification, and troubleshooting. Use this skill when users need help with Syncfusion licensing, installation, WinUI component configuration, theme setup, or resolving installation errors.

syncfusion-winui-badge

syncfusion/winui-ui-components-skills

Open the skill to read its SKILL.md instructions.

syncfusion-winui-datagrid

syncfusion/winui-ui-components-skills

Open the skill to read its SKILL.md instructions.

syncfusion-winui-treeview

syncfusion/winui-ui-components-skills

Comprehensive guide for implementing Syncfusion WinUI TreeView (SfTreeView) control in desktop applications. Use this skill when working with hierarchical data display, tree structures, or node-based navigation. Covers TreeView implementation for file explorers, organization charts, category browsers, and expandable/collapsible data visualization in WinUI applications.

syncfusion-winui-autocomplete

syncfusion/winui-ui-components-skills

Open the skill to read its SKILL.md instructions.

syncfusion-winui-polar-charts

syncfusion/winui-ui-components-skills

Open the skill to read its SKILL.md instructions.

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs