为何XAML中Border控件无法显示指定图片？

一、解决BorderBrush中图片在设计界面不显示的问题 #

以下是针对性的排查和解决步骤：

• 检查图片生成属性：右键两张图片→属性，确认Build Action设置为Resource，这是WPF嵌入资源的正确配置，设计器才能正确解析路径。
• 补全BorderThickness属性：默认Border的BorderThickness为0，会导致BorderBrush完全不可见，这很可能是你看不到图片的核心原因。给使用BorderBrush的Border添加该属性，示例：

<Border x:Name="box_Interior_PalletGroup_Color" Height="20" Width="20" Grid.Row="1" Grid.Column="0" BorderThickness="1">
    <Border.BorderBrush>
        <ImageBrush ImageSource="/Product.Customer.Client;component/Views/views/All_Colours.png" />
    </Border.BorderBrush>
</Border>

• 调整图片路径格式：尝试使用完整Pack URI格式，设计器对这类路径的识别更稳定：

<ImageBrush ImageSource="pack://application:,,,/Product.Customer.Client;component/Views/views/All_Colours.png" />

• 清理重建项目：执行Build→Clean Solution，再Build→Rebuild Solution，重启Visual Studio设计器，清除缓存导致的显示异常。

二、更优的透明效果实现方式 #

无需依赖外部图片，直接用WPF原生方式实现可定制的棋盘格透明背景：

方法1：VisualBrush绘制棋盘格（灵活易定制） #

<Border x:Name="box_Interior_Transparant" Height="20" Width="20" Grid.Row="3" Grid.Column="0" BorderThickness="1" BorderBrush="Black">
    <Border.Background>
        <VisualBrush TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute" Viewbox="0,0,10,10" ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Grid Width="10" Height="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition Width="5"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="5"/>
                        <RowDefinition Height="5"/>
                    </Grid.RowDefinitions>
                    <Rectangle Fill="#EEEEEE" Grid.Row="0" Grid.Column="0"/>
                    <Rectangle Fill="#FFFFFF" Grid.Row="0" Grid.Column="1"/>
                    <Rectangle Fill="#FFFFFF" Grid.Row="1" Grid.Column="0"/>
                    <Rectangle Fill="#EEEEEE" Grid.Row="1" Grid.Column="1"/>
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.Background>
</Border>

可通过修改方格大小、颜色值，自定义棋盘格样式，设计器和运行时均能正常显示。

方法2：DrawingBrush实现棋盘格（性能更优） #

<Border x:Name="box_Interior_Transparant" Height="20" Width="20" Grid.Row="3" Grid.Column="0" BorderThickness="1" BorderBrush="Black">
    <Border.Background>
        <DrawingBrush TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute">
            <DrawingBrush.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                            <RectangleGeometry Rect="0,0,5,5"/>
                            <RectangleGeometry Rect="5,5,5,5"/>
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                    <GeometryDrawing.Brush>
                        <SolidColorBrush Color="#EEEEEE"/>
                    </GeometryDrawing.Brush>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Border.Background>
</Border>

仅绘制需要的色块，资源占用更低，同样能模拟标准透明棋盘格效果。

内容的提问来源于stack exchange，提问作者Dominique