如何在WPF（C#）中为图像绘制带刻度条的网格？

嘿，这个需求完全可以用纯XAML搞定，不用写任何后台代码或者依赖属性～我给你分享个简单直接的实现方案：

我们可以利用Grid的布局特性，通过列比例来匹配刻度间隔，让网格和刻度自动跟随图像尺寸变化：

<!-- 记得添加sys命名空间引用：xmlns:sys="clr-namespace:System;assembly=mscorlib" -->
<Grid>
    <!-- 目标图像：根据需求设置Stretch属性，这里用None保持原始尺寸，也可以用Fill让图像适配Grid -->
    <Image x:Name="TargetImage" Source="your-image-path" Stretch="None" />
    
    <!-- 叠加在图像上的网格与刻度层 -->
    <Grid>
        <!-- 列宽度比例对应刻度间隔：总范围是450-230=220，每个间隔30，最后一段到450的宽度为10 -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30*"/>
            <ColumnDefinition Width="30*"/>
            <ColumnDefinition Width="30*"/>
            <ColumnDefinition Width="30*"/>
            <ColumnDefinition Width="30*"/>
            <ColumnDefinition Width="30*"/>
            <ColumnDefinition Width="30*"/>
            <ColumnDefinition Width="10*"/>
        </Grid.ColumnDefinitions>
        
        <!-- 垂直网格线：每个列的右侧添加灰色边框，贯穿整个图像高度 -->
        <Border Grid.Column="0" BorderThickness="0 0 1 0" BorderBrush="#808080" Height="{Binding ActualHeight, ElementName=TargetImage}"/>
        <Border Grid.Column="1" BorderThickness="0 0 1 0" BorderBrush="#808080" Height="{Binding ActualHeight, ElementName=TargetImage}"/>
        <Border Grid.Column="2" BorderThickness="0 0 1 0" BorderBrush="#808080" Height="{Binding ActualHeight, ElementName=TargetImage}"/>
        <Border Grid.Column="3" BorderThickness="0 0 1 0" BorderBrush="#808080" Height="{Binding ActualHeight, ElementName=TargetImage}"/>
        <Border Grid.Column="4" BorderThickness="0 0 1 0" BorderBrush="#808080" Height="{Binding ActualHeight, ElementName=TargetImage}"/>
        <Border Grid.Column="5" BorderThickness="0 0 1 0" BorderBrush="#808080" Height="{Binding ActualHeight, ElementName=TargetImage}"/>
        <Border Grid.Column="6" BorderThickness="0 0 1 0" BorderBrush="#808080" Height="{Binding ActualHeight, ElementName=TargetImage}"/>
        <Border Grid.Column="7" BorderThickness="0 0 1 0" BorderBrush="#808080" Height="{Binding ActualHeight, ElementName=TargetImage}"/>
        
        <!-- 刻度数字：放在每个列的右下角，对齐网格线末端 -->
        <TextBlock Grid.Column="0" Text="230" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 5 5" Foreground="#333333"/>
        <TextBlock Grid.Column="1" Text="260" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 5 5" Foreground="#333333"/>
        <TextBlock Grid.Column="2" Text="290" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 5 5" Foreground="#333333"/>
        <TextBlock Grid.Column="3" Text="320" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 5 5" Foreground="#333333"/>
        <TextBlock Grid.Column="4" Text="350" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 5 5" Foreground="#333333"/>
        <TextBlock Grid.Column="5" Text="380" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 5 5" Foreground="#333333"/>
        <TextBlock Grid.Column="6" Text="410" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 5 5" Foreground="#333333"/>
        <TextBlock Grid.Column="7" Text="450" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 5 5" Foreground="#333333"/>
    </Grid>
</Grid>

方案说明 #

• 网格线通过Border实现，高度绑定到图像的实际高度，确保贯穿整个图像
• 列宽度的星号比例严格对应刻度间隔，保证刻度位置和网格线的分布符合230到450、间隔30的要求
• 刻度数字直接放在对应列的右下角，完美对齐网格线末端
• 整个布局完全依赖XAML，没有任何后台代码或依赖属性，完全符合你的要求

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