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的使用
<Button Background="Tomato"></Button>
l 使用8位的十六进制码（hexadecimal notation）来表示颜色;
<Button Background="#FFFF0000"></Button>
l 前两位表示透明度（optical），随后2位表示红色，随后2位表示绿色，最后2位表示蓝色
l 可以使用自定义每个通道的方法，重写SolidColorBrush对象；
l XAML的写法:
<Button>
<Button.Background>
<SolidColorBrush>
<SolidColorBrush.Color>
<Color A="255" R="0" G="0" B="255"/>
</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>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
LinerGradientBrush里面有GradientStop对象，暴露了两个属性：Color, Offset;默认情况下，起始点（0,0），终点（1,1）是以对角线的方式线性渲染。也可以设置StartPoint和EndPoint,来设置不同的渲染方式。
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
以上是垂直线性渲染（vertically）
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Red" Offset=".25"/>
<GradientStop Color="Blue" Offset=".5"/>
<GradientStop Color="Green" Offset=".75"/>
<GradientStop Color="White" Offset="1"/>
</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 Center=".5, .5" RadiusX=".5" RadiusY=".25">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</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 ImageSource="C:\Users\Public\Pictures\Sample Pictures\Forest.jpg">
</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 Visual="{Binding ElementName=Button1}">
</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"/> //有圆角的长方形
<Line Stroke="Red" X1="0" Y1="50" X2="100" Y2="440"/>
//线条是连接两个坐标点（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 Fill="Aqua">
<Path.Data>
<EllipseGeometry RadiusX="40" RadiusY="50"/>
</Path.Data>
</Path>
l 可以在Path的Data元素中使用GeometryGroup对象，来包含多个形状
<Path Fill="Aqua" Margin="100">
<Path.Data>
<GeometryGroup FillRule="Nonzero">
<EllipseGeometry RadiusX="40" RadiusY="50"/>
<RectangleGeometry Rect="0,0,10,100"/>
</GeometryGroup>
</Path.Data>
</Path>
l 当GeometryGroup包含多个重叠Geometry对象时，FillRule属性就据定了重叠区域如何填充，和Polygon和Polyline一样。
l CombinedGeometry类能创建2个以上的Geometry类，组合类型由GeometryCombineMode属性组成：
|
属性 |
描述 |
|
Exclude |
从第一个对象形状内减去第二个对象的形状 |
|
Intersect |
两个形状的交叉图形 |
|
Xor |
两个形状的交叉图形的取非 |
|
Union |
两个图形的并集 |
<Path Fill="Aqua" Margin="100">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<EllipseGeometry RadiusX="40" RadiusY="50"/>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry Rect="0,0,10,100"/>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
1.8. Transformations
让图形进行变形的类，比方说旋转（rotation），位移（displacement）,弯曲（skewing）或者其他的更复杂的效果。
1.8.1. Types of Transforms
平行四边形的向X轴倾斜30度：
<Rectangle Height="20" Width="50" Fill="blue">
<Rectangle.RenderTransform>
<SkewTransform AngleX="-30"></SkewTransform>
</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>
<SkewTransform AngleX="-30"></SkewTransform>
</Rectangle.RenderTransform>
</Rectangle>
1.8.2. Transforming Elements
