Content(未完成)

Adding and Managing Content

See Brush class / Brushes overview / Painting with Images, Drawings and Visuals /

Lesson 1: Managing the Visual Interface

Brush对象是最基本的WPF的界面渲染对象，几乎每个对象都有属性来设置Brush对象。见下表的一些基本属性：

Property	Description
*Background*	控件的背景色
*BorderBrush*	控件的边框色
*Fill*	控件的内部填充色
*Foreground*	控件的前景色，如果控件中有内容且为STRING，则一起渲染
*OpacityMask*	不透明的模版，如果在透明的控件中设置这个属性，可以实现一些特殊的效果；
*Stroke*	控件边缘的颜色

Brush对象是可以被冻结。在Brush Freeze方法调用之后，Brush参数只是只读的，不可以被改变。反之，可以修改Brush对象。

1.1. SolidColorBrush

l 最简单的Brush对象

l C#的使用

Brush aBrush;

aBrush = Brushes.AliceBlue;

l XAML的使用

l 使用8位的十六进制码（hexadecimal notation）来表示颜色;

l 前两位表示透明度（optical），随后2位表示红色，随后2位表示绿色，最后2位表示蓝色

l 可以使用自定义每个通道的方法，重写SolidColorBrush对象；

l XAML的写法:

<Button.Background>

<SolidColorBrush.Color>

</SolidColorBrush.Color>

</SolidColorBrush>

</Button.Background>

</Button>

l C#的写法

SolidColorBrush aBrush;

aBrush = new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));

1.2. LinearGradientBrush

LinearGradientBrush对象可以将2~3个颜色混合渲染；

<Grid>

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

</Grid>

LinerGradientBrush里面有GradientStop对象，暴露了两个属性：Color, Offset;默认情况下，起始点（0,0），终点（1,1）是以对角线的方式线性渲染。也可以设置StartPoint和EndPoint,来设置不同的渲染方式。

<Grid>

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

</Grid>

以上是垂直线性渲染（vertically）

<Grid>

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

</Grid>

通过设置多个GradientStop，可以设置多种颜色。以上是对角线的方式多种颜色的对角线渲染；

有的时候，控件的某些角落，没有设置填充效果，比方说填充效果从（0.3,0.3）开始，结束点（0.7,0.7）,则可以通过设置LinearGradientBrush.Spread属性，来设置角落中的填充效果。

属性	描述
*Pad*	这是Spread属性的默认值，可以在起点处填充实体颜色。
*Reflect*	当SpreadMethod 被设置为 Reflect, 有镜面反射的填充效果。
*Repeat*	当SpreadMethod 被设置为 Repeat ,延续填充效果。

1.3. RadialGradientBrush

l 和LinearGradientBrush很像，是一个散射型的渲染刷。通过RadialGradientBrush.GradientOrigin来确认渲染的中心点；RadiusX and RadiusY来定义一个渲染的X水平半径和Y垂直半径。可以通过GradientStop来设置多个颜色。

<Grid>

<Grid.Background>

</RadialGradientBrush>

</Grid.Background>

</Grid>

Quick Check

■ How is the gradient of RadialGradientBrush or LinearGradientBrush determined?

Quick Check Answer

■ The gradient in these brushes is formed by a collection of GradientStop objects. Each GradientStop object defines a Color property and an Offset property, which indicate what color is to be blended and at what point in the gradient the color reaches maximum saturation.

1.4. ImageBrush

l 使用图片渲染，如果图片太小，可以使用Stretch参数来渲染。

<Grid.Background>

</ImageBrush>

</Grid.Background>

l Stretch参数的值

属性	描述
*Fill*	图片完全填充整个区域，不保存图片原来的比例
*None*	图片不拉伸，以原始形状绘制，在区域外的图片不绘制。
*Uniform*	图片填充至可达区域，保存原来图片比例，在区域外的图片不绘制
*UniformToFill*	图片拉伸至可达区域，图片比例可随容器比例而改变。

<Grid.Background>

<ImageBrush Viewbox="0,0,.5,.5"

ImageSource="C:\Users\Public\Pictures\Sample Pictures\Forest.jpg">

</ImageBrush>

</Grid.Background>

l 如果Stretch属性被设置成None,则可以通过设置TileMode属性来改变ImageBrush的属性。Eg:

<Grid.Background>

<ImageBrush TileMode="FlipXY" Viewport="0,0,.5,.5"

ImageSource="C:\Users\Public\Pictures\Sample Pictures\Forest.jpg">

</ImageBrush>

</Grid.Background>

l TileMode属性(图片铺开属性)

属性	描述
*FlipX*	图片保持原有比例，垂直镜像，水平重复平铺；
*FlipXY*	图片保持原有比例，水平和垂直方向上都做镜像放置；
*FlipY*	图片保持原有比例，水平镜像，垂直重复平铺；
*None*	图片保持原有比例，不拉伸不平铺
*Tile*	图片保持原有比例，水平和垂直都是重复平铺

1.5. VisualBrush

和ImageBrush一样，只不过用的是Visual元素当做图片平铺，有Stretch和TileMod属性；

</VisualBrush>

1.6. Shapes

Shapes类，有rectangles, ellipses, polygons, lines

Visual

L> Shape(abstract)

l Shape类中的属性

属性	描述
*Fill*	图形的内部填充；
*Stroke*	图形的边缘填充；
*Strokethickness*	图形的边缘粗细；
*Stretch*	图形的拉升

例子：

<Rectangle Height="100" Width="200" Fill="Blue"/> //长方形

<Ellipse Height="100" Width="200" Fill="Blue"/> //椭圆形

<Rectangle RadiusX="20" RadiusY="10" Fill="blue" Height="50" Width="100"/> //有圆角的长方形

//线条是连接两个坐标点（two coordinate points）

<Polyline Stroke="Green"

Points="300, 300 400, 400 400, 300 500, 400 500, 300"/>

//折线，是连接多个点的，上面一共有6个点。

<Polygon Fill="Green"

Points="300, 300 400, 400 400, 300 500, 400 500, 300"/>

//不规则图形，有多点组成。

l 当Polyline或者Polygon的点交叉时，会形成一个封闭的区域，这个区域内可以用Fill来填写。

l Fill的属性

属性	描述
*EvenOdd*	WPF计数线条上的点数，如果是奇数，则填充，如果是偶数则不填充。
*NonZero*	WPF数了一下线上的点，如果是往一个方向上，则区域填充，否则区域不填充。

1.7. Path

Path是最复杂的WPF类，在Path对象中可以包含Geometry对象，

属性	描述
CombinedGeometry	将2个不同的几何对象组合成一个对象，对这个对象可以实行不同的效果。
EllipseGeometry	椭圆形
GeometryGroup	将一组几何对象加到PATH对象中，见例2
LineGeometry	直线
PathGeometry	代表复杂的形状例如直线、弧线、曲线。
RectangleGeometry	长方形
StreamGeometry	一个轻量型的PathGeometry,和PathGeometry不同的是：StreamGeometry被创建后就是只读的。

l 最简单的用法，在Path的Data元素中使用Geometry对象

<Path.Data>

</Path.Data>

</Path>

l 可以在Path的Data元素中使用GeometryGroup对象，来包含多个形状

<Path.Data>

</GeometryGroup>

</Path.Data>

</Path>

l 当GeometryGroup包含多个重叠Geometry对象时，FillRule属性就据定了重叠区域如何填充，和Polygon和Polyline一样。

l CombinedGeometry类能创建2个以上的Geometry类，组合类型由GeometryCombineMode属性组成：

属性	描述
Exclude	从第一个对象形状内减去第二个对象的形状
Intersect	两个形状的交叉图形
Xor	两个形状的交叉图形的取非
Union	两个图形的并集

<Path.Data>

<CombinedGeometry.Geometry1>

</CombinedGeometry.Geometry1>

<CombinedGeometry.Geometry2>

</CombinedGeometry.Geometry2>

</CombinedGeometry>

</Path.Data>

</Path>

1.8. Transformations

让图形进行变形的类，比方说旋转（rotation），位移（displacement）,弯曲（skewing）或者其他的更复杂的效果。

1.8.1. Types of Transforms

平行四边形的向X轴倾斜30度：

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

l Kinds of Transform Objects

类	描述
MatrixTransform	例如：定义一个3x3的矩阵，通过矩阵变化，来变化图形
RotateTransform	旋转变形，通过CenterX和CenterY两个属性，定义旋转角
ScaleTransform	缩放变形，通过ScaleX和ScaleY来确定缩放比率，通过CenterX和CenterY来确定变形中心点。
SkewTransform	倾斜变形，通过AngleX和AngleY来确定水平和垂直倾斜角度，通过CenterX和CenterY来确定变形中心点。
TranslateTransform	水平位移坐标变形，按照X和Y坐标，来变形
TransformGroup	若干个变形的对象组成一个GROUP

基本上，一个变形从左上角开始，可以制定其他的变形起始点(通过RenderTransformOrigin)，（0,0）代表左上角，(1,1)代表右小角

<Rectangle Height="20" Width="50" Fill="blue"

RenderTransformOrigin=".5, .5">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

1.8.2. Transforming Elements

posted on 2012-09-28 11:12 馋宝宝阅读(425) 评论(0) 收藏举报

刷新页面返回顶部

今天的心得

Content(未完成)

Adding and Managing Content

Lesson 1: Managing the Visual Interface

1.1. SolidColorBrush

1.2. LinearGradientBrush

1.3. RadialGradientBrush

1.4. ImageBrush

1.5. VisualBrush

1.6. Shapes

1.7. Path

1.8. Transformations

1.8.1. Types of Transforms

1.8.2. Transforming Elements

导航

公告