How can I adjust the margin of the QR code and handle text positioning when using the QRCodeGenerator in Syncfusion?

To customize the appearance of a QR code and its text in Syncfusion’s QRCodeGenerator, you can modify the QR code margin and adjust the text position as needed.

1.Adjust QR Code Margin

The Margin property allows you to set the margin around the QR code.

Example:

<QRMargin Left="0" Top="0" Right="0" Bottom="0"></QRMargin> 

2.Position and Margin of Display Text

The QRCodeTextMargin property controls the margin for the text displayed next to the QR code. You can specify margins for the Left, Top, Right, and Bottom sides.

Example:

<QRCodeTextMargin Left="0" Top="0" Right="0" Bottom="10"></QRCodeTextMargin> 

In this example, the text margin at the bottom of the QR code is set to 10px.

3.Visibility of Display Text

The Visibility property of QRCodeGeneratorDisplayText determines whether the text is visible. You can set it to true or false to show or hide the text.

4.Text Positioning

You can also set the position of the text relative to the QR code using the Position property. Options include Top, Bottom, Left, and Right.

Example:

<QRCodeGeneratorDisplayText Text="Sync-123" Font="monospace" Size="14" Alignment="Alignment.Center" Position="TextPosition.Bottom" Visibility="true">
   <QRCodeTextMargin Left="0" Top="0" Right="0" Bottom="10"></QRCodeTextMargin>
</QRCodeGeneratorDisplayText> 

Complete Example:

@using Syncfusion.Blazor.BarcodeGenerator

<SfQRCodeGenerator Width="100px" Height="100px"  Value="65213323" BackgroundColor="white" ForeColor="Red">
   <QRCodeGeneratorDisplayText Text="Sync-123" Font="monospace" Size="14" Alignment="Alignment.Center" Position="TextPosition.Bottom" Visibility="true">
       <QRCodeTextMargin Left="0" Top="0" Right="0" Bottom="10"></QRCodeTextMargin>
   </QRCodeGeneratorDisplayText>
   <QRMargin Left="0" Top="0" Right="0" Bottom="0"></QRMargin>
</SfQRCodeGenerator> 

In this example:

• The QR code has no margin.
• The text “Sync-123” is positioned at the bottom of the QR code, with a 10px margin at the bottom.

You can download a complete working sample here.

Conclusion:

This Blazor application demonstrates How can I adjust the margin of the QR code and handle text positioning when using the QRCodeGenerator in Syncfusion.

You can refer to our Blazor Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!