Getting Started with WinUI Barcode

9 Jul 20267 minutes to read

This section provides a quick overview of how to get started with the WinUI Barcode. Walk through the entire process of creating a real-world application with this control.

Creating an application with WinUI Barcode

  1. Create a WinUI 3 desktop app for C# and .NET 5.
  2. Add a reference to the Syncfusion.Barcode.WinUI NuGet package.
  3. Import the control namespace using Syncfusion.UI.Xaml.Barcode in the 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 for the Barcode based on the input value by initializing the respective symbology instance using the Symbology property. In the following code sample, 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 the following 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 barcode.

<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 or decreased by using the 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 the 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 the 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 the 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 the following properties:

Background

The Barcode background can be changed using the 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 the 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 the 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 the 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 various angles by using the 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