WPF中如何为Image控件添加外边框，现有实现不生效如何解决

你之前的Border包裹写法没有生效，是因为只设置了BorderThickness边框厚度属性，没有设置BorderBrush边框颜色属性。WPF中Border的BorderBrush默认值为Transparent透明色，所以即使设置了厚度也看不到边框。

以下两种方案都可以实现即使Image未加载图片也正常显示边框的效果：

方案1：修正Border包裹写法 #

把布局属性（对齐、宽高、边距）移到Border上，同时添加BorderBrush属性，Border会始终保持设定的尺寸，不管Image有没有加载源，边框都会正常显示：

<Border BorderThickness="1" 
        BorderBrush="Gray"
        HorizontalAlignment="Left" 
        Height="233" 
        Margin="467,54,0,0" 
        VerticalAlignment="Top" 
        Width="272">
    <Image x:Name="Img" 
           RenderTransformOrigin="0.5,0.5"
           Stretch="Uniform">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform AngleY="0.704"/>
                <RotateTransform/>
                <TranslateTransform Y="0.614"/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
</Border>

Stretch="Uniform"用于保证图片按比例填充Border区域，你可以根据需求调整为其他填充模式。

方案2：自定义Image控件模板（无需额外套Border） #

如果需要给多个Image添加边框，可以直接定义带边框的Image样式，一次定义多处复用，不用每次手动套Border：

1. 首先将样式代码添加到窗口的Resources节点或者全局App.xaml的Resources节点中：

<Window.Resources>
    <Style x:Key="BorderedImage" TargetType="Image">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Image">
                    <Border BorderThickness="1" 
                            BorderBrush="Gray"
                            Background="Transparent">
                        <Image Source="{TemplateBinding Source}"
                               Stretch="{TemplateBinding Stretch}"
                               RenderTransform="{TemplateBinding RenderTransform}"
                               RenderTransformOrigin="{TemplateBinding RenderTransformOrigin}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

2. 使用时直接给Image指定Style即可：

<Image x:Name="Img" 
       Style="{StaticResource BorderedImage}"
       HorizontalAlignment="Left" 
       Height="233" 
       Margin="467,54,0,0" 
       VerticalAlignment="Top" 
       Width="272" 
       RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform AngleY="0.704"/>
            <RotateTransform/>
            <TranslateTransform Y="0.614"/>
        </TransformGroup>
    </Image.RenderTransform>
</Image>

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