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