• Win10系列:UWP界面布局基础12


    画刷

    画刷(Brush)用于为图形元素填充颜色。在XAML中,画刷有许多属性,其中较常使用的是Fill属性和Stroke属性,Fill用于填充图形的背景色,而Stroke用于设置图形的线条颜色。

    在实际应用中,可以采用不同的填充方式填充背景色或设置线条颜色,以达到不同的视觉效果。这里我们简单介绍一下纯色画刷SolidColorBrush)和线性渐变画刷(LinearGradientBrush),有关画刷的详细内容和图形绘制在后面章节中会单独介绍。

    (1)纯色画刷

    纯色画刷(SolidColorBrush)是画刷中最基本的填充方式,用来给元素填充某种单一纯色。在XAML语法中,SolidColorBrush元素的定义格式如下所示:

    <SolidColorBrush Color="ColorName"/>

    -or-

    <SolidColorBrush Color="#RGB"/>

    -or-

    <SolidColorBrush Color="#RRGGBB"/>

    其中,ColorName指的是颜色名称;RGB表示长度为3个字符的十六进制值,第一个字符指定颜色的R值,第二个字符指定G值,第三个字符指定B值,如#00F;RRGGBB表示长度为6个字符的十六进制值,用前两个字符指定颜色的R值,中间两个字符指定G值,最后两个字符指定B值,如#0000FF。

    例如,在向一个页面中添加一个矩形时,在Rectangle.Fill属性元素中定义SolidColorBrush元素并通过Color属性设置矩形的填充色为红色,相应的XAML代码片段如下所示:

    <Rectangle>

    <Rectangle.Fill>

    <SolidColorBrush Color="Red"/>

    </Rectangle.Fill>

    </Rectangle>

    --

    <Rectangle>

    <Rectangle.Fill>

    <SolidColorBrush Color="#F00"/>

    </Rectangle.Fill>

    </Rectangle>

    --

    <Rectangle>

    <Rectangle.Fill>

    <SolidColorBrush Color="#FF0000"/>

    </Rectangle.Fill>

    </Rectangle>

    (2)线性渐变画刷

    线性渐变就是沿着一条直线定义不同颜色之间的渐变,该直线的起点和终点分别由画刷的StartPoint属性和EndPoint属性设置。之后,线性渐变画刷就沿着这条直线来对图形元素填充颜色,展现颜色渐变的效果。

    在XAML语法中,LinearGradientBrush元素的定义格式如下所示:

    <LinearGradientBrush StartPoint="X,Y" EndPoint="X,Y">

    <!--define GradientStops-->

    <GradientStop Color="ColorValue" Offset="OffsetValue"/>

    ……

    </LinearGradientBrush>

    其中,StartPoint属性用于设置渐变线的起始点坐标,EndPoint属性用于设置终点坐标;X是二维坐标轴中的横坐标值,Y是纵坐标值;GradientStop是渐变画刷的渐变点对象,Color属性用于设置渐变点的颜色,Offset属性用于设置渐变点的开始位置,是一个数值类型。

    在默认情况下,线性渐变是沿主对角线方向进行的,起点是被绘制区域的左上角点,终点是被绘制区域的右下角点。

    3.3.4 动画

    快速而流畅的动画能够为应用程序注入活力,在Windows 8中可以发现,动画已与用户体验完美融合,成为用户体验中不可或缺的一部分。例如,对于开始屏中的项目,当把鼠标放到某个应用程序的图标上时,相应的图标会凸显;当鼠标离开时,应用程序的图标又会还原成原状。当启动开始屏中的某个项目时,也会产生翻转的动画效果。因此,合理的使用动画效果能够让用户更直观地了解某一特定操作的结果,这种视觉反馈将使用户对应用程序的响应程度充满信心。

    在XAML中,StoryBoard(演示图板)是动画的核心内容,通过StoryBoard可以定义各种动画效果,如插值动画、关键帧动画等。使用StoryBoard定义动画的语法格式如下所示:

    <Storyboard ...>

    <AnimationTypeName Storyboard.TargetName="objectName" Storyboard.TargetProperty="PropertyName" ...>

    </AnimationTypeName>

    </Storyboard>

    其中,AnimationTypeName表示动画类型,如插值动画中的DoubleAnimation和ColorAnimation,DoubleAnimation动画可以作用于界面元素的Double类型的属性,而ColorAnimation动画可以作用于元素的Color类型的属性。无论是定义哪种类型的动画,都需要通过Storyboard的TargetName属性指定要使用动画的元素,通过TargetProperty属性设置在元素的哪个属性上使用动画,除了这两个属性之外,针对不同类型的动画还需要设置其他的属性。

    有关各种动画类型的详细内容,将在第10章具体介绍,在此就不多细讲了。

  • 相关阅读:
    pm2日志切割
    PM2常用命令
    Linux安装nodejs
    npm 修改源地址
    nodejs 生成验证码
    shell脚本解析json文件
    mysql添加用户并赋予权限命令
    Redis 配置密码
    JavaScript也是黑客技术?
    angular和vue的对比学习之路
  • 原文地址:https://www.cnblogs.com/finehappy/p/6645752.html
走看看 - 开发者的网上家园