Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 16 additions & 10 deletions wpf/Barcode/Barcode-Customization.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,40 @@
---
layout: post
title: Barcode Customization in WPF Barcode control | Syncfusion
description: Learn here all about Barcode Customization support in Syncfusion WPF Barcode (SfBarcode) control and more.
description: Learn how to customize barcodes in the Syncfusion WPF SfBarcode control, including appearance, styling, and configuration options.
platform: wpf
control: SfBarcode
documentation: ug
---

# Barcode Customization in WPF Barcode (SfBarcode)

The color of the barcode can be customized by modifying the DarkBarBrush and LightBarBrush properties of the barcode control.
## Overview

{% highlight html %}
The color of the barcode can be customized by modifying the `DarkBarBrush` and `LightBarBrush` properties of the barcode control. The `DarkBarBrush` represents the color of the dark bar (Black color usually) and the `LightBarBrush` represents the color of the gap between two adjacent dark bars (White color usually).

<sync:SfBarcode x:Name="barcode" Text="82698640929" DarkBarBrush=”Red” LightBarBrush="Blue” Symbology="QRBarcode"/>
## Customizing the barcode colors

{% endhighlight %}
The following code example shows how to set the dark and light bar colors.

{% highlight xml %}

The DarkBarBrush represents the color of the dark bar (Black color usually) and the LightBarBrush represents the color of the gap between two adjacent black bars (White color usually).
<sync:SfBarcode x:Name="barcode" Text="82698640929" DarkBarBrush="Red" LightBarBrush="Blue" Symbology="Code128"/>

{% endhighlight %}

The following images illustrate the barcode rendered with different color combinations.

![WPF-Barcode-Red-Color-Combination](Barcode-Customization_images/wpf-barcode-red-color-combination.png)

Barcode color combinations- Red
Barcode color combinations – Red
{:.caption}


![WPF-Barcode-Blue-Color-Combination](Barcode-Customization_images/wpf-barcode-blue-color-combination.png)

Barcode color combinations- Blue
Barcode color combinations – Blue
{:.caption}

N> The DarkBarBrush and LightBarBrush customizations are applicable only for one dimensional barcodes. In order for a barcode symbol to be recognized by a scanner, there must be an adequate contrast between the dark bars and the light spaces and not all the barcode scanners have support for colored barcodes.
## Limitations

N> The `DarkBarBrush` and `LightBarBrush` customizations are applicable only for one-dimensional barcodes. For a barcode symbol to be recognized by a scanner, there must be adequate contrast between the dark bars and the light spaces. Additionally, not all barcode scanners support colored barcodes.
35 changes: 15 additions & 20 deletions wpf/Barcode/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,33 @@
---
layout: post
title: Getting Started with WPF Barcode control | Syncfusion
description: Learn here about getting started with Syncfusion WPF Barcode (SfBarcode) control, its elements and more details.
description: Learn how to get started with the Syncfusion WPF SfBarcode control, including setup, basic usage, and key barcode elements.
platform: wpf
control: SfBarcode
documentation: ug
---

# Getting Started with WPF Barcode (SfBarcode)

## Add Barcode control to an Application
## Add the Barcode control to an application

The following assembly reference is required for deploying Barcode.
The following assembly reference is required for deploying the Barcode control.

{% highlight c# %}
* **Namespace**: `Syncfusion.UI.Xaml.Controls.Barcode`
* **Assembly**: `Syncfusion.SfBarcode.WPF`

Namespace: Syncfusion.UI.Xaml.Controls.Barcode
To create the `SfBarcode` control in Visual Studio:

Assembly: Syncfusion.SfBarcode.WPF
1. Create a new WPF project.

{% endhighlight %}
2. Drag the `SfBarcode` control from the **Toolbox** window to the Design view to create an instance of the control.

To create the SfBarcode control in Visual Studio:
![WPF Barcode Control](Getting-Started_images/wpf-barcode-control.png)

1. Create a new WPF project.
The SfBarcode control after being dragged to the Design view
{:.caption}

2. Drag the SfBarcode control from the Toolbox window to the Design View. An instance of the SfBarcode control is created in the Design view.

![WPF Barcode Control](Getting-Started_images/wpf-barcode-control.png)

SfBarcode Control after Dragging to Design View
{:.caption}

The following code example shows how to create the Barcode control from XAML:
The following code example shows how to create the Barcode control using XAML:

{% highlight xaml %}

Expand All @@ -58,14 +53,14 @@ The following code example shows how to create the Barcode control from XAML:

## Text

The text to be encoded can be set using the Text property. By default, this original text will be displayed at the bottom of the bar code. The location of the text can be toggled between top and bottom using TextLocation property. The horizontal alignment of the text can be set using TextAlignment. The text brush and other various font customization can also be done using the built-in font properties. Optionally, the user can hide the barcode text by setting the DisplayText property to false.
The text to be encoded can be set using the `Text` property. By default, this text is displayed at the bottom of the barcode. The location of the text can be toggled between **Top** and **Bottom** using the `TextLocation` property, and its horizontal alignment can be set using the `TextAlignment` property. The text color and font can also be customized using the built-in font properties. To hide the barcode text, set the `DisplayText` property to `false`.

{% highlight xaml %}

<sync:SfBarcode x:Name="barcode" Text="http://www.syncfusion.com" DisplayText="False” Symbology="QRBarcode"/>
<sync:SfBarcode x:Name="barcode" Text="http://www.syncfusion.com" DisplayText="False" Symbology="QRBarcode"/>

{% endhighlight %}

## Rotation

Barcode control can be rotated to save space by using the Rotation property. The barcode can be rotated to 90, 180 and 270 degrees.
The Barcode control can be rotated to save space using the `Rotation` property. The barcode can be rotated to 90, 180, and 270 degrees.
10 changes: 5 additions & 5 deletions wpf/Barcode/Overview.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
---
layout: post
title: About WPF Barcode control | Syncfusion
description: Learn here all about introduction of Syncfusion WPF Barcode (SfBarcode) control, its elements and more details.
description: Learn about the introduction to the Syncfusion WPF Barcode (SfBarcode) control, its elements, and more details.
platform: wpf
control: SfBarcode
documentation: ug
---

# WPF Barcode (SfBarcode) Overview

The Barcode control helps rendering bar codes in desktop (WPF) application. The control can be merged with into any desktop application and easy to encode text using the supported symbol types. The basic structure of a bar code consists of a leading and trailing quiet zone, a start pattern, one or more data characters, optionally one or two check characters, and a stop pattern.
The Barcode control helps render barcodes in desktop (WPF) applications. The control can be merged into any desktop application and makes it easy to encode text using the supported symbol types. The basic structure of a barcode consists of a leading and trailing quiet zone, a start pattern, one or more data characters, optionally one or two check characters, and a stop pattern.

![WPF One Dimensional Barcode](Overview_images/wpf-one-dimensional-barcode.png)

Barcode control rendering 1D bar code
Barcode control rendering a 1D barcode
{:.caption}


![WPF Two Dimensional Barcode](Overview_images/wpf-two-dimensional-barcode.png)


Barcode control rendering 2D bar code
Barcode control rendering a 2D barcode
{:.caption}

## Structure of the Control
## Structure of the control

![WPF Barcode Structure](Overview_images/wpf-barcode-structure.png)

Expand Down
8 changes: 4 additions & 4 deletions wpf/Barcode/Supported-Barcode-types.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Supported Barcode types in WPF Barcode control | Syncfusion
description: Learn here all about Supported Barcode types support in Syncfusion WPF Barcode (SfBarcode) control and more.
description: Learn about the barcode types supported in the Syncfusion WPF SfBarcode control, including 1D and 2D barcode symbologies.
platform: wpf
control: SfBarcode
documentation: ug
---

# Supported Barcode types in WPF Barcode (SfBarcode)

The following table contains the supported types and associated valid characters.
The following table lists the supported barcode types and their associated valid characters.

<table>
<tr>
<th>Symbol</th>
<th>Enum Value</th>
<th>Enum value</th>
<th>Supported characters</th>
<th>Length</th>
</tr>
Expand Down Expand Up @@ -82,7 +82,7 @@ variable</td></tr>
<td>
{{'[Code 128B](https://en.wikipedia.org/wiki/Code_128)'| markdownify }}</td><td>
Code128B</td><td>
[0-9]; [A-Z]; [a-z]; [SPACE (0x20) ! " # $ % & ' ( ) * + , - . / :; &lt; = &gt; ? @ [ / ]^ _ ` { | } ~ DEL (•) ]</td><td>
[0-9]; [A-Z]; [a-z]; [SPACE (0x20) ! " # $ % & ' ( ) * + , - . / : &lt; = &gt; ? @ [ / ]^ _ ` { | } ~ DEL (•) ]</td><td>
variable</td></tr>
<tr>
<td>
Expand Down
60 changes: 30 additions & 30 deletions wpf/Barcode/Symbology-Settings.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
---
layout: post
title: Symbology Settings in WPF Barcode control | Syncfusion
description: Learn here all about Symbology Settings support in Syncfusion WPF Barcode (SfBarcode) control and more.
description: Learn about Symbology Settings in the Syncfusion WPF SfBarcode control and configure barcode-specific encoding options.
platform: wpf
control: SfBarcode
documentation: ug
---

# Symbology Settings in WPF Barcode (SfBarcode)

Each Barcode symbol can be associated with optional settings that may affect that specific bar code. The code sample below shows the settings of a code39 Barcode.
Each Barcode symbol can be associated with optional settings that may affect that specific barcode. The code sample below shows the settings of a Code39 barcode.

{% highlight html %}
{% highlight xaml %}

<sync:SfBarcode.SymbologySettings>

<sync:Code39Setting BarHeight="45" EnableCheckDigit="False" EncodeStartStopSymbols="True" NarrowBarWidth="1" ShowCheckDigit="False"/>

</sync:SfBarcode.SymbologySettings>

{% endhighlight %}
{% endhighlight %}

## 1D Barcode settings

The one dimensional barcodes have some of the settings in common, such as BarHeight which modifies the height of the bars and NarrowBarWidth which modifies the width ratio of the wide and narrow bars.
The one-dimensional barcodes share some common settings, such as `BarHeight`, which modifies the height of the bars, and `NarrowBarWidth`, which modifies the width ratio of the wide and narrow bars.

{% highlight html %}
{% highlight xaml %}

<sync:SfBarcode.SymbologySettings>

Expand All @@ -34,13 +34,13 @@ The one dimensional barcodes have some of the settings in common, such as BarHei
</sync:SfBarcode.SymbologySettings>


{% endhighlight %}
{% endhighlight %}

The one dimensional barcodes also has the error detection settings. The EnableCheckDigit property enables the redundancy check using a check digit, the decimal equivalent of a binary parity bit. It consists of a single digit computed from the other digits in the message. The check digit can be shown in the barcode or kept hidden by using the ShowCheckDigit property.
The one-dimensional barcodes also have error detection settings. The `EnableCheckDigit` property enables the redundancy check using a check digit, the decimal equivalent of a binary parity bit. It consists of a single digit computed from the other digits in the message. The check digit can be shown in the barcode or kept hidden by using the `ShowCheckDigit` property.

The EncodeStartStopSymbols property adds Start and Stop symbols to signal a bar code reader that a bar code has been scanned.
The `EncodeStartStopSymbols` property adds Start and Stop symbols to signal a barcode reader that a barcode has been scanned.

{% highlight html %}
{% highlight xaml %}

<sync:SfBarcode.SymbologySettings>

Expand All @@ -52,25 +52,25 @@ The EncodeStartStopSymbols property adds Start and Stop symbols to signal a bar

## 2D Barcode Settings

The two dimensional barcodes have a common XDimension property which modifies the block size of a two dimensional barcode.
The two-dimensional barcodes share a common `XDimension` property, which modifies the block size of a two-dimensional barcode.

### DataMatrix Barcode settings

The DataMatrix barcode settings has the properties to modify the encoding and size of the DataMatrix barcode.
The DataMatrix barcode settings include properties to modify the encoding and size of the DataMatrix barcode.

{% highlight html %}
{% highlight xaml %}

<sync:SfBarcode.SymbologySettings>

<sync:DataMatrixSetting XDimension="8" Encoding="ASCIINumeric” Size="Size104x104" />
<sync:DataMatrixSetting XDimension="8" Encoding="ASCIINumeric" Size="Size104x104" />

</sync:SfBarcode.SymbologySettings>

{% endhighlight %}
{% endhighlight %}

### Encoding

The encoding of the DataMatrix barcode can be modified using the ‘Encoding’ property. The DataMatrixEncoding enumeration has the following four encoding schemes.
The encoding of the DataMatrix barcode can be modified using the `Encoding` property. The `DataMatrixEncoding` enumeration has the following four encoding schemes.

* ASCII
* ASCIINumeric
Expand All @@ -79,9 +79,9 @@ The encoding of the DataMatrix barcode can be modified using the ‘Encoding’

### Size

The DataMatrix Barcode settings allow the user to specify the size of the barcode from a set of predefined sizes available in the DataMatrixSize enumeration.
The DataMatrix barcode settings allow the user to specify the size of the barcode from a set of predefined sizes available in the `DataMatrixSize` enumeration.

Data Matrix size Table
Data Matrix size table

<table>
<tr>
Expand Down Expand Up @@ -217,28 +217,28 @@ Rectangular matrix with 16 rows and 48 columns.</td></tr>

### QRBarcode settings

The QRBarcode settings has properties to modify the version, error correction level and Input mode of the QRBarcode.
The QRBarcode settings include properties to modify the version, error correction level, and input mode of the QRBarcode.

{% highlight html %}
{% highlight xaml %}

<sync:SfBarcode.SymbologySettings>

<sync:QRBarcodeSetting XDimension="8" ErrorCorrectionLevel="High” InputMode="BinaryMode” Version="Auto" />
<sync:QRBarcodeSetting XDimension="8" ErrorCorrectionLevel="High" InputMode="BinaryMode" Version="Auto" />

</sync:SfBarcode.SymbologySettings>

{% endhighlight %}
{% endhighlight %}


## Version

The QR Barcode uses version from 1 to 40.Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules and so on increasing in steps of 4 modules per side up to Version 40 which measures 177 modules x 177 modules. Each version has its own capacity. By default the QR Version is Auto, which will automatically set the version according to the input text length.
The QR Barcode uses versions from 1 to 40. Version 1 measures 21 modules × 21 modules, Version 2 measures 25 modules × 25 modules, and so on, increasing in steps of 4 modules per side up to Version 40, which measures 177 modules × 177 modules. Each version has its own capacity. By default, the QR Version is `Auto`, which automatically sets the version according to the input text length.

## Error correction level

The QR Barcode employs error correction to generate a series of error correction codewords which are added to the data code word sequence in order to enable the symbol to withstand damage without loss of data. There are four user–selectable levels of error correction, as shown in the table, offering the capability of recovery from the following amounts of damage. By default the Error correction level is Low.
The QR Barcode employs error correction to generate a series of error correction codewords that are added to the data codeword sequence to enable the symbol to withstand damage without loss of data. There are four user-selectable levels of error correction, as shown in the table, offering the capability of recovery from the following amounts of damage. By default, the error correction level is **Low**.

Error Correction Level Table
Error correction level table

<table>
<tr>
Expand All @@ -265,23 +265,23 @@ H</td><td>

## Input mode

There are three modes for the input as defined in the table. Each mode supports the specific set of Input characters. User may select the most suitable input mode. By default the Input mode is Binary Mode.
There are three input modes, as defined in the table. Each mode supports a specific set of input characters. The user may select the most suitable input mode. By default, the input mode is **Binary Mode**.

Input Mode Table
Input mode table

<table>
<tr>
<th>
Input Mode</th><th>
Input mode</th><th>
Possible characters</th></tr>
<tr>
<td>
Numeric Mode</td><td>
0,1,2,3,4,5,6,7,8,9</td></tr>
0, 1, 2, 3, 4, 5, 6, 7, 8, 9</td></tr>
<tr>
<td>
Alphanumeric Mode</td><td>
0–9, A–Z (upper-case only), space, $, %, *, +, -,., /, :</td></tr>
0–9, A–Z (upper-case only), space, $, %, *, +, -, ., /, :</td></tr>
<tr>
<td>
Binary Mode</td><td>
Expand Down
Loading