WPF中如何实现TextBox内图片居左、文字居右的布局？

嘿，我来帮你搞定这个布局问题！从你提供的代码片段来看，你当前用的是默认的垂直方向StackPanel，所以元素会从上到下排列，这就是为什么图片和文字没有左右分布的原因。下面给你两种简单有效的调整方案：

方案1：使用水平方向的StackPanel #

这是最直接的方式，只需要把承载图片和文字的StackPanel的Orientation属性设置为Horizontal，就能让元素从左到右排列：

<Border Background="#f0f4f7">
    <StackPanel Background="#f5f6fa" Margin="10,10,10,370">
        <TextBlock Text="1397-1398"/>
        <Border VerticalAlignment="Center" Background="#edf0f5" BorderThickness="5">
            <!-- 关键修改：设置Orientation为Horizontal -->
            <StackPanel Background="#ffffff" Height="30" Orientation="Horizontal">
                <!-- 图片控件放在左侧 -->
                <Image Source="你的图片路径" Width="20" Height="20" Margin="5,0" VerticalAlignment="Center"/>
                <!-- 文字控件放在右侧 -->
                <TextBlock Text="你的目标文字内容" VerticalAlignment="Center" Margin="5,0"/>
            </StackPanel>
        </Border>
    </StackPanel>
</Border>

关键说明： #

• Orientation="Horizontal"：让StackPanel内部元素从左到右水平排列
• VerticalAlignment="Center"：保证图片和文字在垂直方向上居中对齐，视觉更协调
• Margin：调整图片和文字之间的间距，避免过于拥挤

方案2：使用Grid（更灵活的布局选择） #

如果后续需要更精细的空间分配（比如文字需要占满剩余宽度），Grid会是更好的选择：

<Border Background="#f0f4f7">
    <StackPanel Background="#f5f6fa" Margin="10,10,10,370">
        <TextBlock Text="1397-1398"/>
        <Border VerticalAlignment="Center" Background="#edf0f5" BorderThickness="5">
            <Grid Background="#ffffff" Height="30">
                <!-- 定义两列：第一列适配图片宽度，第二列占满剩余空间 -->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <!-- 图片放在第一列 -->
                <Image Grid.Column="0" Source="你的图片路径" Width="20" Height="20" Margin="5,0" VerticalAlignment="Center"/>
                <!-- 文字放在第二列 -->
                <TextBlock Grid.Column="1" Text="你的目标文字内容" VerticalAlignment="Center" Margin="5,0"/>
            </Grid>
        </Border>
    </StackPanel>
</Border>

关键说明： #

• Grid.ColumnDefinitions：通过Auto和*分配列宽，Auto适配图片大小，*让文字列占满剩余空间
• Grid.Column：指定元素放在哪一列，实现左右分布

你可以根据自己的需求选择其中一种方案，两种都能实现图片左、文字右的布局效果~

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