RadBarCodeQr - Maintain the same distance from the image according to the image size

Question

I have control of RadBarCodeQR and I want that it maintains an equal spacing from its parent for any text bound to it.

When RadBarCodeQR is bound to an empty string:

And when RadBarCodeQRbound to "ssssssssssssssssss":

My Code:

<Grid>
    <StackPanel VerticalAlignment="Center">
        <TextBox 
            Text="{Binding QrCode, UpdateSourceTrigger=PropertyChanged}" 
            Width="300" 
            Height="30" 
            Margin="20"/>
        <telerik:RadBarcodeQR
            Height="100" 
            Width="100"
            Text="{Binding QrCode, UpdateSourceTrigger=PropertyChanged}"
            Foreground="Black"
            UseLayoutRounding="True">
            <telerik:RadBarcodeQR.Style>
                <Style TargetType="telerik:RadBarcodeQR">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="telerik:RadBarcodeQR">
                                <Grid 
                                    x:Name="PART_RadBarcodeQR" 
                                    Background="White" 
                                    Margin="15">
                                    <Image 
                                        x:Name="ImageQrCode" 
                                        HorizontalAlignment="Center" 
                                        VerticalAlignment="Center"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </telerik:RadBarcodeQR.Style>
        </telerik:RadBarcodeQR>
    </StackPanel>
</Grid> 

Answer 1

I do not think that it is possible to maintain an equal spacing around the control. The QR code comes in different sizes and has a mandatory margin as stated in the documentation. This is given the by specification and not maintaining it can lead to unreadable QR codes.

There are a total of 40 versions available in the QRCode, from 21 by 21 modules to 177 by 177 modules, increasing in steps of 4 modules per side. Naturally, higher versions are used to encode larger amounts of data: [...]

Additionally, around each QR code, there is an obligatory 4-modules-wide white space area: [...]

The control will render an image of the QR code, as you can see from the control template. This image contains a white margin varying in thickness depending on the QR code size. The Margin and Padding do not affect this. That being said, your change to the control template - setting Margin="15" - breaks the default drawing behavior that at least draws the margin required by the specification.

Consequently, you should remove your custom control template. Layout rounding should not be necessary, as the control is optimized to display a QR code anyway. The UpdateSourceTrigger is only needed for controls that actually change the source property, this control does not, it only reads the value.

<telerik:RadBarcodeQR
   Text="{Binding QrCode}" 
   Foreground="Black"
   Background="White"
   Height="100"
   Width="100"/>

You seem to be using the old RadBarcodeQR which is deprecated. You can use RadBarcode instead:

<telerik:RadBarcode Value="{Binding QrCode}"
                    Height="100" 
                    Width="100"> 
   <telerik:RadBarcode.Symbology> 
      <telerik:QRCode /> 
   </telerik:RadBarcode.Symbology> 
</telerik:RadBarcode> 

If you want to have an additional fixed-size space, you can add a Padding to it.