RadBarCodeQr - 根据图像大小与图像保持相同的距离

Question

我可以控制 RadBarCodeQR，并且我希望它与绑定到它的任何文本保持与父级的间距相等。

当RadBarCodeQR绑定到空字符串时：

当RadBarCodeQR绑定到“sssssssssssssssss”时：

我的代码：

<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

我认为不可能在控件周围保持相等的间距。 QR 码有不同的大小，并且有 documentation 中规定的强制性边距。这是按规范给出的，不维护它会导致二维码不可读。

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: [...]

控件将呈现 QR 码的图像，如您在控件模板中所见。此图像包含一个白色边距，其厚度根据 QR 码大小而变化。 Margin 和 Padding 对此没有影响。也就是说，您对控件模板的更改 - 设置 Margin="15" - 破坏了默认绘图行为，该行为至少绘制了规范所需的边距。

因此，您应该删除自定义控件模板。布局舍入应该不是必需的，因为该控件已优化以无论如何显示 QR 码。 UpdateSourceTrigger 只有真正改变源的控件才需要属性，这个控件不需要，它只读取值。

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

您似乎在使用旧的 RadBarcodeQR，即 deprecated. You can use RadBarcode：

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

如果你想多一个fixed-sizespace，你可以加一个Padding。

RadBarCodeQr - 根据图像大小与图像保持相同的距离

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

wpf

xaml

barcode

telerik

controltemplate