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

Question

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

当 RadBarCodeQR 绑定到空字符串时：

当 RadBarCodeQR 绑定到“ssssssssssssssssss”时：

我的代码：

<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 码有不同的大小，并具有强制边距，如 文档。这是由规范给出的，不维护它可能会导致二维码不可读。

QRCode 共有 40 个版本，从 21 x 21 模块到 177 x 177 模块，以每侧 4 个模块的步长增加。当然，更高版本用于编码更大量的数据：[...]

此外，每个二维码周围都有一个强制性的 4 个模块宽的空白区域：[...]

控件将渲染以下图像： QR 码，正如您从控件模板中看到的那样。该图像包含白色边缘，其厚度根据 QR 码尺寸而变化。 Margin 和 Padding 不会影响这一点。话虽这么说，您对控件模板的更改 - 设置 Margin="15" - 破坏了至少绘制规范所需的边距的默认绘制行为。

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

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

您似乎正在使用旧的 RadBarcodeQR ，即 已弃用。您可以使用 RadBarcode相反：

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

如果您想要额外的固定大小的空间，您可以为其添加一个 Padding 。