Windows 8 应用商店应用开发 之 轮廓样式

8.4 轮廓样式

在前面介绍绘制图形时，已经涉及到了Stroke属性和StrokeThickness属性，这两个属性分别用来设置轮廓颜色和轮廓粗细，本节将在这两个属性的基础上进一步介绍如何设置图形的轮廓样式，使绘制的图形变的美观。

（1）线的两端效果

在绘制粗线时，使用StrokeStartLineCap和StrokeEndLineCap属性能修改线形的起始端和末端，这两个属性的可选值是PenLineCap枚举类型的成员：Flat、Round、Square和Triangle。其中Flat是默认值，Flat并没有特殊效果；Round值表示在线形的末端添加一个直径等于线粗细的半圆；Square值表示在线形的末端添加一个高度等于直线粗细、长度等于直线粗细一半的矩形；Triangle值表示在线形的末端添加一个底边长度等于直线粗细的等腰直角三角形。下面通过一个具体的示例展示如何设置线的两端效果。

在一个打开的Windows应用商店项目中新建一个空白页，并命名为LineCapPage，双击打开此页面的LineCapPage.xaml文件，在Grid元素中添加如下代码。

<Polyline

    Stroke="Chocolate"

    StrokeThickness="20"

    StrokeStartLineCap="Triangle"

    StrokeEndLineCap="Round"

    Points="100,200 300,300 100,300">

</Polyline>

上面的代码添加了一个Polyline控件，并设置Stroke属性为Chocolate、StrokeThickness属性为20，定义StrokeStartLineCap属性值为Triangle、StrokeEndLineCap属性值为Round，从而设置线的两端效果为三角形和圆角。最后向Points属性中添加三个点。

运行此页面，效果如图8-15所示。

图8-15线的两端效果图

PenLineCap枚举类型的成员Flat与Square区别并不太明显，下面通过一个示例来展示二者的区别。在一个打开的Windows应用商店项目中新建一个空白页，并命名为FlatSquarePage，双击打开此页面的FlatSquarePage.xaml文件，在Grid元素中添加如下代码。

<Polyline

    Stroke="Chocolate"

    StrokeThickness="20"

    StrokeStartLineCap="Square"

    StrokeEndLineCap="Flat"

    Points="100,200 300,300 100,300"  >

</Polyline>

<!--参考线-->

<Polyline

    Stroke="Black"

    StrokeThickness="1"

    Points="100,200 300,300 100,300"  >

</Polyline>

上面的代码添加了一个Polyline控件，并设置Stroke属性为Chocolate、StrokeThickness属性为20。定义StrokeStartLineCap属性值为Square、StrokeEndLineCap属性值为Flat，从而设置线的两端为不同的效果，其中Square值会在开始端添加一个矩形，而Flat值在末端没有效果。为了更好地显示轮廓两端的对比效果，又添加了一个Polyline控件作为“参考线”，并设置Stroke属性为Black、StrokeThickness属性为1，定义Points属性与上一个Polyline控件的Points属性值相同。

运行此页面，效果如图8-16所示。

图8-16 Flat与Square的效果对比图

上面的示例按照添加图形的层叠顺序依次显示。若想改变图形的层叠顺序可以通过设置Canvas.ZIndex属性的值，ZIndex的值越大层叠顺序越靠前。

（2）图形拐角处的效果

使用StrokeLineJoin属性能设置图形拐角处的效果。StrokeLineJoin属性的可选值是PenLineJoin枚举类型的成员：Miter、Bevel和Round。其中Miter是默认值，表示线条联接使用常规角顶点。Bevel值表示线条联接使用斜角顶点。Round值表示线条联接使用圆角顶点。下面通过一个具体的示例展示这三个值的效果。

在一个打开的Windows应用商店项目中新建一个空白页，并命名为StrokeLineJoinPage，双击打开此页面的StrokeLineJoinPage.xaml文件，在Grid元素中添加如下代码。

<Polyline

    Stroke="Chocolate"

    StrokeThickness="20"

    Points="150,200 300,300 150,350 300,450"

StrokeLineJoin="Bevel">

</Polyline>

上面的代码添加了一个Polyline元素，设置Stroke属性为Chocolate、StrokeThickness属性为20，并向Points属性中添加四个点，最后定义StrokeLineJoin属性值为Bevel，从而设置拐角处的效果为斜角顶点。

运行此页面，StrokeLineJoin属性的Bevel值效果如图8-17所示。

图8-17 拐角处的斜角顶点效果

将上面StrokeLineJoin的属性值改为Round，即可设置拐角处的圆角顶点，代码如下所示：

<Polyline

    Stroke="Chocolate"

    StrokeThickness="20"

    StrokeLineJoin="Round"

    Points="150,200 300,300 150,350 300,450">

</Polyline>

图8-18 拐角处的圆角顶点效果

采用PenLineJoin枚举类型的成员Miter连接会存在一点问题，如果拐角处为锐角斜切面可能会非常长，为了避免此类情况的发生，可以使用StrokeMiterLimit属性设置切面的长度。

在一个打开的Windows应用商店项目中新建一个空白页，并命名为StrokeMiterLimitPage，双击打开此页面的StrokeMiterLimitPage.xaml文件，在Grid元素中添加如下代码。

<Polyline

    Stroke="Chocolate"

    StrokeThickness="20"

    Points="300,300 150,350 300,330"

    StrokeLineJoin="Miter"

    StrokeMiterLimit="3">

</Polyline>

<!--参考线-->

<Polyline

    Stroke="Black"

    StrokeThickness="1"

    Points="300,300 150,350 300,330">

</Polyline>

上面的代码添加了一个Polyline元素，设置Stroke属性为Chocolate、StrokeThickness属性为20，并向Points属性中添加四个点。接着定义StrokeLineJoin属性为Miter、StrokeMiterLimit属性为3。为了更好的显示轮廓粗细产生的效果，又添加了一个Polyline控件作为“参考线”，并设置Stroke属性为Black、StrokeThickness属性为1，定义Points属性与上一个Polyline控件的Points属性值相同。

运行此页面，效果如图8-19所示。

图8-19 使用StrokeMiterLimit属性的效果图

下面的代码没有设置StrokeMiterLimit属性的值，锐角斜切面会很长，效果如图8-20所示。

<Polyline

    Stroke="Chocolate"

    StrokeThickness="20"

    Points="300,300 150,350 300,330"

    StrokeLineJoin="Miter">

</Polyline>

<!--参考线-->

<Polyline

    Stroke="Black"

    StrokeThickness="1"

    Points="300,300 150,350 300,330">

</Polyline>

图8-20没有使用StrokeMiterLimit属性的效果图

（3）虚线样式

通过StrokeDashArray属性可以使实线变成虚线并能使用StrokeDashCap属性设置虚线的两端效果。下面通过一个示例展示StrokeDashArray属性的使用方法。

在一个打开的Windows应用商店项目中新建一个空白页，并命名为StrokeDashArrayPage，双击打开此页面的StrokeDashArrayPage.xaml文件，在Grid元素中添加如下代码。

<Polyline

    Stroke="Chocolate"

    StrokeThickness="15"

    StrokeStartLineCap="Round"

    StrokeEndLineCap="Round"

    Points="100,100 100,300 300,300 300,100"

    StrokeDashArray="1 2">

</Polyline>

上面的代码添加了一个Polyline元素，设置Stroke属性为Chocolate、StrokeThickness属性为15，定义StrokeStartLineCap属性和StrokeEndLineCap属性都为Round，从而设置线的末端效果，并向Points属性中添加四个点。接着定义StrokeDashArray属性为“1 2”，表示绘制虚线的时候，先是一段长度为线宽的的直线，然后是一段长度为线宽2倍的间隙，并不短重复直到线的末尾。

运行此页面，效果如图8-21所示。

图8-21虚线样式效果

从图8-12可以看到图形的起始端与末端变成了半圆而中间区域的虚线并没有变化，使用StrokeDashCap属性能设置虚线两端的效果，StrokeDashCap属性的可选值是PenLineCap枚举类型的成员：Flat、Round、Square和Triangle。这四个值产生的效果可以参照本节开始部分的介绍。

在上面实例的基础上设置StrokeDashCap属性即可设置虚线两端的效果，代码如下所示：

<Polyline  

    Stroke="Chocolate"

    StrokeThickness="15"

    StrokeStartLineCap="Round"

    StrokeEndLineCap="Round"

    Points="100,100 100,300 300,300 300,100"

    StrokeDashArray="1 2"

    StrokeDashCap="Triangle">

</Polyline >

上面的代码只是简单的将StrokeDashCap属性设置为Triangle，便能产生虚线两端的三角形效果，运行效果如图8-22所示。

图8-22虚线两端的三角形效果

 

 

注：本文选自机械工业出版社2013年3月出品的《Windows 8 应用开发权威指南》