Getting Started with WinUI Barcode

9 Aug 20217 minutes to read

This section provides a quick overview for getting started with the WinUI Barcode . Walk through the entire process of creating a real world of this control.

Creating an application with WinUI Barcode

  1. Create a WinUI 3 desktop app for C# and .NET 5.
  2. Add reference to Syncfusion.Barcode.WinUI NuGet.
  3. Import the control namespace using Syncfusion.UI.Xaml.Barcode in XAML or C# code.
  4. Initialize the SfBarCode control.
<Page x:Class="syncfusion.barcodedemos.winui.GettingStartedPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:syncfusion="using:Syncfusion.UI.Xaml.Barcode"
      xmlns:local="using:syncfusion.barcodedemos.winui"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
      NavigationCacheMode="Disabled">
    <Grid>
        <syncfusion:SfBarcode x:Name="barcode" Value="48625310">
            <syncfusion:SfBarcode.Symbology>
                <syncfusion:CodabarBarcode />
            </syncfusion:SfBarcode.Symbology>
        </syncfusion:SfBarcode>
    </Grid>
</Page>
using Microsoft.UI.Xaml.Controls;
using Syncfusion.UI.Xaml.Barcode;

public sealed partial class GettingStartedPage : Page
{
    /// <summary>
    /// Interaction logic for GettingStartedPage.xaml
    /// </summary>
    public GettingStartedPage()
    {
        this.InitializeComponent();
        SfBarcode barcode = new SfBarcode();
        CodabarBarcode codabarBarcode = new CodabarBarcode();
        barcode.Symbology = codabarBarcode;
        barcode.Value = "48625310";
        Root_Grid.Children.Add(barcode);
    }
}

CodaBar Barcode

Symbology

You can set the required symbology to the barcode based on input value by initializing the respective symbology instance using Symbology property. In the following code snippet, the QR code has been set as the barcode symbology.

NOTE

Supported Symbology types in SfBarcode

<Page xmlns:syncfusion="using:Syncfusion.UI.Xaml.Barcode">
    <Grid>
        <syncfusion:SfBarcode x:Name="barcode" Value="http://www.syncfusion.com">
            <syncfusion:SfBarcode.Symbology>
                <syncfusion:QRBarcode />
            </syncfusion:SfBarcode.Symbology>
        </syncfusion:SfBarcode>
    </Grid>
</Page>

OR Barcode

Text customization

The Barcode text can be customized by using below properties,

Value

The text to be encoded can be set using the Value property. By default, this original text will be displayed at the bottom of the bar code.

<syncfusion:SfBarcode x:Name="barcode" Value="48625310" Height="150">
    <syncfusion:SfBarcode.Symbology>  
        <syncfusion:CodabarBarcode />  
    </syncfusion:SfBarcode.Symbology>  
</syncfusion:SfBarcode>

CodaBar Barcode with Value

Text spacing

The space between barcode and text can be increased/decreased by using TextSpacing property.

<syncfusion:SfBarcode x:Name="barcode" Value="10110111" Height="150" TextSpacing="7">  
    <syncfusion:SfBarcode.Symbology>  
        <syncfusion:CodabarBarcode />  
    </syncfusion:SfBarcode.Symbology>  
</syncfusion:SfBarcode>

CodaBar Barcode with Text spacing

Display value

The visibility of the Barcode text can be changed using ShowValue property in Barcode.

<syncfusion:SfBarcode x:Name="barcode" Value="10110111" Height="150" ShowValue="False">  
    <syncfusion:SfBarcode.Symbology>  
        <syncfusion:CodabarBarcode />  
    </syncfusion:SfBarcode.Symbology>  
</syncfusion:SfBarcode>

CodaBar Barcode with ShowValue set to false

HorizontalTextAlignment

The horizontal alignment of the Barcode text can be changed using HorizontalTextAlignment property in Barcode.

<syncfusion:SfBarcode x:Name="barcode" Value="10110111" Height="150" HorizontalTextAlignment="Right">  
    <syncfusion:SfBarcode.Symbology>  
        <syncfusion:CodabarBarcode />  
    </syncfusion:SfBarcode.Symbology>  
</syncfusion:SfBarcode>

HorizontalTextAlignment set to Right

VerticalTextAlignment

The vertical alignment of the Barcode text can be changed using VerticalTextAlignment property in Barcode.

<syncfusion:SfBarcode x:Name="barcode" Value="10110111" Height="150" VerticalTextAlignment="Top">  
    <syncfusion:SfBarcode.Symbology>  
        <syncfusion:CodabarBarcode />  
    </syncfusion:SfBarcode.Symbology>  
</syncfusion:SfBarcode>

VerticalTextAlignment set to Top

Customization

The Barcode can be customized using below properties,

Background

The Barcode background can be changed using Background property.

<syncfusion:SfBarcode x:Name="barcode" Background="Orange" Value="1010111011" Height="150" Width="250">  
    <syncfusion:SfBarcode.Symbology>  
        <syncfusion:CodabarBarcode />  
    </syncfusion:SfBarcode.Symbology>  
</syncfusion:SfBarcode>

Foreground

The Barcode foreground can be changed using Foreground property.

<syncfusion:SfBarcode x:Name="barcode" Foreground="White" Value="1010111011" Height="150" Width="250">  
    <syncfusion:SfBarcode.Symbology>  
        <syncfusion:CodabarBarcode />  
    </syncfusion:SfBarcode.Symbology>  
</syncfusion:SfBarcode>

Barcode_Customization

Module

The width ratio of the wide and narrow bars can be changed using Module property.

<syncfusion:SfBarcode x:Name="barcode" Module="1" Value="48625310" ShowValue="False" Height="150">  
    <syncfusion:SfBarcode.Symbology>  
        <syncfusion:CodabarBarcode />  
    </syncfusion:SfBarcode.Symbology>  
</syncfusion:SfBarcode>

Module

AutoModule

The size of QRBarcode and DataMatrixBarcode can be changed using AutoModule Property.

<syncfusion:SfBarcode x:Name="barcode" Width="400" Height="400" AutoModule="True" ShowValue="False" Value="QRBarcode">
    <syncfusion:SfBarcode.Symbology>   
        <syncfusion:QRBarcode />   
    </syncfusion:SfBarcode.Symbology>   
</syncfusion:SfBarcode>

AutoModule

Rotation Angle

The Barcode can be rotated in different angles by using RotationAngle property.

<syncfusion:SfBarcode x:Name="barcode" RotationAngle="Angle90" Value="1010111011" Height="150" Width="250">  
    <syncfusion:SfBarcode.Symbology>  
        <syncfusion:CodabarBarcode />  
    </syncfusion:SfBarcode.Symbology>  
</syncfusion:SfBarcode>

RotationAngle

NOTE

View sample in GitHub