给WPF示例图形加上方便查看大小的格子之完善版本

原文:给WPF示例图形加上方便查看大小的格子之完善版本

去年10月份, 我曾写过一篇"给WPF示例图形加上方便查看大小的格子"的BLOG（http://blog.csdn.net/johnsuna/archive/2007/10/19/1832994.aspx）,这次由于需要,将它完善一下,可以有效地区别100的整数倍逻辑像素（与设备无关像素）单位的显示。

显示效果：

XAML代码：
<Canvas Width="752.009766" Height="1192.558594" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Canvas.Resources>
            <DrawingBrush x:Key="MyGridBrushResource" Viewport="0,0,100,100" ViewportUnits="Absolute" TileMode="Tile">
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <DrawingGroup.Children>
                            <!--横线-->
                            <GeometryDrawing Geometry="M0,1 L10,1 M0,2 L10,2 M0,3 L10,3 M0,4 L10,4 M0,5 L10,5 M0,6 L10,6 M0,7 L10,7 M0,8 L10,8 M0,9 L10,9">
                                <GeometryDrawing.Pen>
                                    <Pen Thickness="0.1" Brush="#CCCCFF" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                            <!-- 横线100整数倍 -->
                            <GeometryDrawing Geometry="M0,0 L10,0">
                                <GeometryDrawing.Pen>
                                    <Pen Thickness="0.1" Brush="DarkOrange" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                            <!--竖线-->
                            <GeometryDrawing Geometry="M1,0 L1,10 M2,0 L2,10 M3,0 L3,10 M4,0 L4,10 M5,0 L5,10 M6,0 L6,10 M7,0 L7,10 M8,0 L8,10 M9,0 L9,10">
                                <GeometryDrawing.Pen>
                                    <Pen Thickness="0.1" Brush="#CCCCFF" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                            <!-- 竖线100整数倍 -->
                            <GeometryDrawing Geometry="M0,0 L0,10">
                                <GeometryDrawing.Pen>
                                    <Pen Thickness="0.1" Brush="DarkOrange" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
            </DrawingBrush>

            <!-- 这里是外框线 -->
            <Style x:Key="MyGridBorderStyle">
                <Setter Property="Border.Background" Value="{StaticResource MyGridBrushResource}"/>
                <Setter Property="Border.HorizontalAlignment" Value="Center"/>
                <Setter Property="Border.VerticalAlignment" Value="Top"/>
                <Setter Property="Border.BorderBrush" Value="Black"/>
                <Setter Property="Border.BorderThickness" Value="1"/>
            </Style>
        </Canvas.Resources>

        <!-- 引用方式 -->
        <Border Style="{StaticResource MyGridBorderStyle}">
            <Canvas Width="630" Height="348">
                <Path StrokeThickness="5" Stroke="Orange" StrokeMiterLimit="1"
Data="F1 M 0.3,66.2 C 0.3,66.2 44.9,33.5 68.5,66.3 C 92.1,99.1 197.2,206.3 274.6,133.2 C 366.8,46.2 378.3,2.7 459.7,25.1"
/>
            </Canvas>
        </Border>

</Canvas>

而在此之前初始版本的演示效果为：

很明显，当前已完善版本看起来更清晰明了。