wpf画刷，对象渲染，颜色渐变的实现

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属性，这里可以设置调解缓存细节