WPF 中 InlineUIContainer 内的图像为何占满 TextBlock 宽度？

2026-11-06数据小陈

结论

如果重新添加后，Image 仍为 100px × 100px，但红色背景扩展到 TextBlock 的 400px 宽度，应先检查外层 Border 的排列尺寸。StretchDirection="DownOnly" 控制 Image 的缩放方向，不会限制 Border 的宽度。

示例中的内联元素结构为 InlineUIContainer → Border → Image。红色背景铺满宽度，不一定说明 Image 被拉伸。可以先将 Border 设置为左对齐，检查是否是外层元素的布局造成的。

调整 Border 的水平对齐

可以在 TextBlock 的资源中为 Border 定义隐式样式：

<TextBlock x:Name="tb" Width="400">
    <TextBlock.Resources>
        <Style TargetType="Image">
            <Setter Property="StretchDirection" Value="DownOnly" />
        </Style>
        <Style TargetType="Border">
            <Setter Property="HorizontalAlignment" Value="Left" />
        </Style>
    </TextBlock.Resources>
</TextBlock>

这样可以继续通过样式设置 Image 属性，同时让内联容器中的 Border 按自身内容宽度排列，避免它沿水平方向拉伸。原示例在 TextBlock.Style 内声明了 Style.Resources。若保留这种写法，也可以在该资源字典中添加 TargetType="Border" 的样式。

检查布局尺寸

如果设置左对齐后，红色背景仍占满宽度，可以在重新添加容器后检查 Border 和 Image 的 DesiredSize 与 RenderSize，确认是哪一层取得了整行宽度。也可以暂时移除 Border，或使用不填充背景的 Border 复现问题，以区分图像尺寸和容器尺寸。

示例中的 Button_Click 会清空并重新添加同一个 InlineUIContainer。现有信息不足以确定具体的 WPF 布局原因，也无法据此断定 StretchDirection 失效。先确认占满宽度的是 Border 还是 Image，再判断是否需要进一步检查重新加入后的测量与排列。