Getting Started with WinUI Barcode

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

Creating an application with WinUI Barcode

  1. Create a simple project using the instructions given in the Getting Started with your first WinUI app documentation.
  2. Add reference to Syncfusion.Barcode.WinUI NuGet.
  3. Import the control namespace using Syncfusion.UI.Xaml.Controls.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.Controls.Barcode"
                xmlns:local="using:syncfusion.barcodedemos.winui"
                Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                NavigationCacheMode="Disabled">
                <Grid>
                        <syncfusion:SfBarcode x:Name="barcode" Value="48625310"/>
                </Grid>

</Page>
using Microsoft.UI.Xaml.Controls;
using Syncfusion.UI.Xaml.Controls.Barcode;

public sealed partial class GettingStartedPage : Page
{
    /// <summary>
    /// Interaction logic for GettingStartedPage.xaml
    /// </summary>
    public GettingStartedPage()
    {
        this.InitializeComponent();
        SfBarcode barcode = new SfBarcode();
        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.

<Page xmlns:syncfusion="using:Syncfusion.UI.Xaml.Controls.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"/>

CodaBar Barcode with Value

TextSpacing

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"/>

CodaBar Barcode with Text spacing

ShowValue

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"/>

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" />

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" />

VerticalTextAlignment set to Top

NOTE

View sample in GitHub