1,SolidColorBrush
1,SolidColorBrush 颜色填充 是一个对象,这个对象里面有一个color 属性。当然也可以直接写Borde.background,这里主要是理解SolidColorBrush
<Border Width="200" Height="80" BorderThickness="3">
<Border.Background>
<SolidColorBrush Color="Green" />
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="Orange"/>
</Border.BorderBrush>
</Border>
2,LinearGradientBrush
2,LinearGradientBrush 线性渐变 有道词典查了一下这个Gradient单词的意思 指的就是斜坡,斜率,坡道的意思,很好理解。
<Border Width="200" Height="80" BorderThickness="3">
<Border.Background>
<LinearGradientBrush>
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="Green" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
效果展示:
如果想让颜色渐变从上往下,那就只需要将EndPoint(x,y)X不变,将Y改变 如下:
总结,StartPoin 和EndPoint 改变颜色渐变的方向
offset:是改变颜色设置颜色的比重,比如我们再增加一个颜色:
<Border Width="200" Height="80" BorderThickness="3">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="Orange" Offset="0.5"/>
<GradientStop Color="Green" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
效果如下:
如果将<GradientStop Color="Orange" Offset="0.5"/> 0.5改为0.7可以看到橙色部分变多了
offset的值可以是1,也可以大于1,也可以是负数,-1,-2 能更灵活的对界面惊进行渲染
如果调边框就可以用<Border.BorderBrush>
3,径向渐变RadialGradientBrush
3,径向渐变RadialGradientBrush
从中心往外辐射。看下代码和效果:
注意:你的Border的大小 会改变这个圆的形状,当为正方形的时候圆就是个圆,否则为椭圆,下面我写个正方形
offset的值表示谁大谁在外围,如下效果:
假如我把green的值调大一点看看效果:
效果如下
A,Center属性
那么如果要改变圆心的位置该调哪一个呢,增加Center 属性,Center实际上也是一个百分比。Center实际上是调区域位置,渲染的颜色位置还得依靠GradientOrigin来调
B,GradientOrigin 属性
看下效果
C,RadiusX/RadiusY属性
也是个百分比,这个属性的值默认是0.5 ,默认值状态下是这个数值:
将0.5改成1后可以看下效果:
很明显变大了。同理RadiusY属性是众向的Y方向调整
4,imageBrush
先说下跟image 有啥优势,
先看下用imageBrush的优势:
当设置圆角的时候,用ImageBrush,图片会跟着边框一起变圆角,直接用image的话就不会有这个情况,我们可以看下直接用image 效果如下:
用image效果
这个图片的角会突出来,有人可能会说了可以用ClipToBonds来剪切掉,我试了一下不可以 代码效果如下:
ClipTobounds
首先设置Marge=-10,让图片面积大于Border,
写入ClipToBounds后会切掉大于border的部分如下图:
依然不会变成圆角。
5,雪碧图 CSS Sprites(小精灵的复数)
界面上会有很多小的图片,
A,ViewPort属性
Viewport="0,0,1,1" ViewPort:X,Y ,W, H 默认情况下表示比例,不是长度,相对于容器的 比例大小,首先看 一下0,0,1,1的视图,可以调整图像大小的位置
那么接下来看下
0,0,2,1的视图
可以看出来Border的大小是固定的,只不过视图被放大了。
B,ViewPortUnits
里面有两个值,一个是Absolute绝对的,另外一个是RelativeToBoundingBox,当知道Border尺寸的时候,我们可以用Absolute,例如边框尺寸是width=50,height=50,那么你可以将值设置成ViewPort="0,0,50,50"这样就可以铺平整个Border。如果不知道具体尺寸 那就用相对的。
C,ViewBox
ViewBox是把容器放大,相对来说图片就变小了。可以调整Border的视口相对图像大小和位置。
6,DrawingBrush
A,TileMode 平铺模式
加了这个属性之后就变成了这样
B,Flip翻转
Flipx 以x轴为中心翻转,FlipY 以Y轴方向翻转, FlipXY ,以XY轴方向翻转
7,VisualBrush 画蜂巢
8,RenderTransform 画倒影
<TextBox Text="Hello" Width="100" Name="tb"/>
<Border Height="30" Width="100" RenderTransformOrigin="0.5,0.5">
<Border.Background>
<VisualBrush Visual="{Binding ElementName=tb}" />
</Border.Background>
<Border.RenderTransform>
<TransformGroup>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
呈现效果如下:
9,BitmapCacheBrush 起到一个缓存的作用
在这里能起到一个保持自由的容器控件里的状态不变,比如以上代码,TextBox 的透明度设置为了0.2 ,这里的Target 虽然绑定了textbox 但是透明度却依然保持不变 ,但是看起来 比较 模糊,想增加缓存细节,就要调以下这个参数:
A,RenderAtScale
所有的容器控件里都有CacheMode属性,这里可以设置调解缓存细节