|
在进行WPF界面设计时,我们需要在很多地方设置颜色属性,比如元素的背景色、前景色以及边框的颜色,还有形状的内部填充和笔画,这些颜色的设置在WPF中都以画刷(Brush)的形式实现。比如最常用的画刷就是SolidColorBrush,它表示一种纯色。- public abstract class Brush : Animatable, IFormattable, IResource
- {
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty OpacityProperty;
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty TransformProperty;
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty RelativeTransformProperty;
-
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> protected Brush();
-
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public double Opacity { get; set; }
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Transform Transform { get; set; }
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Transform RelativeTransform { get; set; }
-
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Brush Clone();
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Brush CloneCurrentValue();
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public override string ToString();
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public string ToString(IFormatProvider provider);
-
- }
复制代码 Brush继承于Animatable基类和Freezable基类,说明它支持更改通知。如果改变了画刷,任何使用该画刷的控件的颜色都会自动重绘。
Opacity 属性表示它支持部分透明。
Brush一共有7个子类,下表中列出了它们的信息。
画刷名称 | 功能说明 | SolidColorBrush | 使用单一的连续颜色填充区域 | LinearGradientBrush | 使用线性渐变绘制区域。 | RadialGradientBrush | 使用径向渐变绘制区域。 焦点定义渐变的开始,而圆定义渐变的终点。 | ImageBrush | 使用图像绘制区域。 | VisualBrush | 使用一个视图绘制区域。 | BitmapCacheBrush | 绘制带有缓存的内容的区域。 | DrawingBrush | 使用包括形状、文本、视频、图像或其他绘制项等填充区域。 | Brush基类和子类的继承关系
SolidColorBrush纯色画刷
SolidColorBrush继承于Brush抽象类,表示用某一种颜色填充区域。从定义上看,它拥有一个Color属性,表示具体的颜色值。- public sealed class SolidColorBrush : Brush
- {
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty ColorProperty;
-
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public SolidColorBrush();
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public SolidColorBrush(Color color);
-
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Color Color { get; set; }
-
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static object DeserializeFrom(BinaryReader reader);
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public SolidColorBrush Clone();
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public SolidColorBrush CloneCurrentValue();
- }
复制代码 Color 在WPF中代表颜色值,被设计成一个结构体,主要是4个属性,即A、R、G、B,分别表示Alpha透明通道值,红色通道值、绿色通道值和蓝色通道值。它们的取值范围都是0-255
案列:
设置Grid的背景颜色- <Grid>
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> <Grid.Background>
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> <<strong>SolidColorBrush</strong>>
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> <strong> <SolidColorBrush.Color>
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> <Color A="255" R="255" G="0" B="0"/>
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/></SolidColorBrush.Color>
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> </SolidColorBrush></strong>
- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> </Grid.Background>
- </Grid>
复制代码 C#代码的方式去设置背景颜色- SolidColorBrush solidColorBrush = new SolidColorBrush();
- //使用系统自定义的颜色
- solidColorBrush.Color = Colors.Green;
- //或者从Color的FromRgb成员中得到颜色
- solidColorBrush.Color = Color.FromRgb(0, 0x80, 0);
- grid.Background = solidColorBrush;
复制代码 实例化成一个资源:- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/>
复制代码
LinearGradientBrush渐变画刷
LinearGradientBrush是一个比较有意思的画刷,它可以从一种颜色过渡到另一种颜色,使被填充的区域呈现渐变效果- public sealed class LinearGradientBrush : GradientBrush{<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty StartPointProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty EndPointProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public LinearGradientBrush();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public LinearGradientBrush(GradientStopCollection gradientStopCollection);<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public LinearGradientBrush(GradientStopCollection gradientStopCollection, double angle);<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public LinearGradientBrush(Color startColor, Color endColor, double angle);<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public LinearGradientBrush(GradientStopCollection gradientStopCollection, Point startPoint, Point endPoint);<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public LinearGradientBrush(Color startColor, Color endColor, Point startPoint, Point endPoint);<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Point StartPoint { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Point EndPoint { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public LinearGradientBrush Clone();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public LinearGradientBrush CloneCurrentValue();}
复制代码 从定义上看,它有StartPoint 和EndPoint 两个点,表示获取和设置线性渐变的二维起始坐标和结束坐标。而它因为继承于GradientBrush基类,所以它的颜色都保存在GradientStops集合属性中。GradientStops集合中的元素类型必须为GradientStop,表示渐变中转换点的位置和颜色。所以,GradientStop拥有Color属性和Offset属性,分别表示颜色值和偏移值。
案例:
一个Grid,希望从左上角设置一个绿色,右下角设置一个蓝色,中间是两种颜色的渐变效果LinearGradientBrush将整个Grid看成是一个0-1的矩形,所以StartPoint=(0,0)表示左上角,EndPoint=(1,1)表示右下角,这就控制了渐变的方向是从左上角到右下角的斜线。GradientStop 对象中的Offset表示在渐变方向上各颜色的占比或起点。假如我们将第一个GradientStop对象的Offset设置为0.5,那么此时的代码和效果如下所示:- <Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/><Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/>
复制代码
RadialGradientBrush径向渐变
RadialGradientBrush径向渐变像一个圆一样,从焦点中心位置开始向四周渐变,LinearGradientBrush线性渐变具有用于定义渐变矢量的起点和终点,而径向渐变具有一个圆和一个焦点,用于定义渐变行为。 圆定义渐变的终点。 换句话说,渐变停止点为 1.0 定义圆周的颜色。 焦点定义渐变的中心。 渐变停止点为 0.0 定义焦点处的颜色。- public sealed class RadialGradientBrush : GradientBrush{<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty CenterProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty RadiusXProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty RadiusYProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty GradientOriginProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public RadialGradientBrush();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public RadialGradientBrush(GradientStopCollection gradientStopCollection);<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public RadialGradientBrush(Color startColor, Color endColor);<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Point Center { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public double RadiusX { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public double RadiusY { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Point GradientOrigin { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public RadialGradientBrush Clone();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public RadialGradientBrush CloneCurrentValue();}
复制代码 Center属性:获取或设置径向渐变的最外面圆的中心。
RadiusX属性:获取或设置径向渐变的最外面圆的水平半径。默认值为 0.5。
RadiusY属性:获取或设置径向渐变的最外面圆的垂直半径。默认值为 0.5。
GradientOrigin属性:获取或设置用于定义渐变开始的二维焦点的位置。默认值为 0.5。
以Ellipse控件为例,演示一下RadialGradientBrush 的用法:
在上面的代码中,处于圆中心的白色渐变点由GradientOrigin属性控制,如果将值改成:GradientOrigin="0.25,0.25",那么它会呈现下面的样子。
根据这个特性,我们可以实现一个有趣的示例。那就是当鼠标移动到椭圆内,这个径向渐变的起点坐标跟随鼠标位置变化而变化。- private void ellipse_MouseMove(object sender, MouseEventArgs e){<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> Ellipse ellipse = e.Source as Ellipse;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> Point point = e.GetPosition(ellipse);<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> double width = ellipse.Width;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> double height = ellipse.Height;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> RadialGradientBrush brush = ellipse.Fill as RadialGradientBrush;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> double x = point.X / width;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> double y = point.Y / height;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> brush.GradientOrigin = new Point(x, y);}
复制代码
ImageBrush图像画刷
ImageBrush表示使用图像绘制区域。它继承于TileBrush抽象基类,另外,DrawingBrush和VisualBrush也继承于TileBrush抽象基类。
TileBrush 有三种不同类型,其中每一种都使用不同类型的内容进行绘制。下面列出它3个子类的情况。
- 若使用ImageBrush子类,则画刷的填充内容是图像;
- 若使用DrawingBrush子类,则画刷的填充内容是绘图;
- 若使用VisualBrush子类,则画刷的填充内容是视觉对象(视觉树或控件);
- public abstract class TileBrush : Brush{<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty ViewportUnitsProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty ViewboxUnitsProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty ViewportProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty ViewboxProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty StretchProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty TileModeProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty AlignmentXProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty AlignmentYProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> protected TileBrush();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public TileMode TileMode { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Stretch Stretch { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Rect Viewbox { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public Rect Viewport { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public AlignmentY AlignmentY { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public BrushMappingMode ViewportUnits { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public AlignmentX AlignmentX { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public BrushMappingMode ViewboxUnits { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public TileBrush Clone();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public TileBrush CloneCurrentValue();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> protected abstract void GetContentBounds(out Rect contentBounds);}
复制代码 TileMode 属性:获取或设置基本图块如何填充区域。枚举型,它一共有5个值,Tile表示在可用区域复制图像;FlipX表示复制图像但垂直翻转每个第二列;FlipY表示复制图像但水平翻转每个第二行;FlipXY表示复制图像,但是垂直翻转每个第二列,半水平翻转每个第二行。
Stretch 属性:获取或设置内容如何拉伸。
Viewbox 属性:获取或设置图块中内容的位置和尺寸。
Viewport 属性:获取或设置基本图块的位置和尺寸。它的类型是Rect,也就是用它来指定截取原图片的某个区域进行填充,这个区域的设置可以用绝对值和相对值两种方式设置,对应属性是ViewboxUnits,它有两个值,Absolute表示取绝对坐标,RelativeToBoundingBox表示取相对坐标。
AlignmentY属性:获取或设置基本图块的垂直对齐方式。
AlignmentX属性:获取或设置基本图块的垂直水平方式。
ViewboxUnits属性:获取或设置Viewbox的值是相对内容的边界框而言,还是绝对值。
ViewportUnits属性:获取或设置Viewport的值 是否是相对于输出区域的大小。
ImageBrush的定义:- public sealed class ImageBrush : TileBrush{<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public static readonly DependencyProperty ImageSourceProperty;<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public ImageBrush();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public ImageBrush(ImageSource image);<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public ImageSource ImageSource { get; set; }<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public ImageBrush Clone();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> public ImageBrush CloneCurrentValue();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> protected override Freezable CreateInstanceCore();<Window.Resources>
- <strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
- </Window.Resources>
- <Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> protected override void GetContentBounds(out Rect contentBounds);}
复制代码 ImageBrush 画刷只需要设置它的ImageSource 属性,其它的属性都是从它的基类TileBrush继承而来
案例:在上面的代码中,我们给Grid控件设置了一个ImageBrush 图像画刷,并设置Stretch为UniformToFill,即自适应填充,同时设置了Viewport。那么它运行之后呈现的效果如下:
此时的Grid的背景其实就是一张图片。我们给Window对象的MouseWheel事件订阅了一个回调函数,并在其实改变了Viewport的宽度和高度。滚动鼠标的滚轮,此时Grid的背景图像的填充将会呈现如下的样子:
[code]private void Window_MouseWheel(object sender, MouseWheelEventArgs e){<Window.Resources>
<strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
</Window.Resources>
<Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> double offset = e.Delta / 3600.0;<Window.Resources>
<strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
</Window.Resources>
<Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> ImageBrush imageBrush = grid.Background as ImageBrush;<Window.Resources>
<strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
</Window.Resources>
<Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> Rect rect = imageBrush.Viewport;<Window.Resources>
<strong> <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/></strong>
</Window.Resources>
<Grid x:Name="grid" Background="{StaticResource <strong>BackgroundBrush</strong>}"/> if (rect.Width + offset |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
x
|