零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面...

原文:零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面

本章将交大家如何运用Blend 4 内的Text相关功能做出有设计感的登入画面
让你五分钟就能快速做出一个登入画面

?

本章将教大家如何运用Blend 4 内的Text相关功能做出有设计感的登入画面

让你五分钟就能快速做出一个登入画面

?

范例内有文字方块可以输入文字,以及密码栏:

很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页

打错字了....不知道有没有人发现= =

?

01

开启一个新专案,并且调整LayoutaRoot的颜色

Brushes->Background->Gradient brush( 0% #FF481950、24% #FF321637、100% #FF141416 )

?

02

接着放入一个TextBlock

Asset->Search->TextBlock

?

并且在TextBlock内放入文字,你可以到这个网址的页面Copy一段文字回来

请把文字大小调整为 8pt

?

行高设定为18pt, 靠左对齐

?

03

再来,我们要调整文字所呈现的颜色

请选取文字後到Brushes->Foreground->Gradient brush

调整文字外观为( 0% FF000000、100% #FFFFFFFF)

?

接着调整透明度Alpha,请到Brushes->OpacityMask

调整文字透明度为 (0% #FFFFFFFF Alpha 41%、45% #FFFFFFFF Alpha 10%、100% #FFFFFFFF Alpha 95%)

?

都调整完成後,应该会如下图

?

04

以同样方法再置入一个TextBlock,并且打上Member Login

运用Seletion工具(快捷键V),把Member Login做倾斜调整

?

05

在文字上单击右键选择Path->Convert to Path,把刚刚键入的文字变成Path

?

已经变为Path的文字,使用Direct Seletion(快捷键A)时,你可以看到有很多的控制节点

?

拖动节点间线段,拉开节点间的间距,如下图范例

?

运用Pen工具,增加控制节点,好拖拉成等等的登入视窗

?

增加完控制节点後,拖拉成下图

clip_image022[1]

?

06

使用刚刚所教的方法更改颜色

并且运用Gradient Tool(快捷键G)调整渐层的方向

忘记Gradient Tool怎麽用了吗?请看这里

?

调整成如下图范例,做出立体感

?

07

放入一个TextBoxPasswordBox以及一个Button

?

完成後,按下F5看看你的成果

?

范例专案下载

?

?

本篇的教学就到此。

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

 

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/391698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

冠状病毒时代的负责任数据可视化

First, a little bit about me: I’m a data science grad student. I have been writing for Medium for a little while now. I’m a scorpio. I like long walks on beaches. And writing for Medium made me realize the importance of taking personal responsibility ove…

集合_java集合框架

转载自http://blog.csdn.net/zsw101259/article/details/7570033 Java集合框架图 简化图: Java平台提供了一个全新的集合框架。“集合框架”主要由一组用来操作对象的接口组成。不同接口描述一组不同数据类型。 1、Java 2集合框架图 ①集合接口:6个…

显示随机键盘

显示随机键盘 1 <!DOCTYPE html>2 <html lang"zh-cn">3 <head>4 <meta charset"utf-8">5 <title>7-77 课堂演示</title>6 <link rel"stylesheet" type"text/css" href"style…

数据特征分析-统计分析

一、统计分析 统计分析是对定量数据进行统计描述&#xff0c;常从集中趋势和离中趋势两个方面分析。 集中趋势&#xff1a;指一组数据向某一中心靠拢的倾向&#xff0c;核心在于寻找数据的代表值或中心值-统计平均数&#xff08;算数平均数和位置平均数&#xff09; 算术平均数…

数据eda_银行数据EDA:逐步

数据edaThis banking data was retrieved from Kaggle and there will be a breakdown on how the dataset will be handled from EDA (Exploratory Data Analysis) to Machine Learning algorithms.该银行数据是从Kaggle检索的&#xff0c;将详细介绍如何将数据集从EDA(探索性…

结构型模式之组合

重新看组合/合成&#xff08;Composite&#xff09;模式&#xff0c;发现它并不像自己想象的那么简单&#xff0c;单纯从整体和部分关系的角度去理解还是不够的&#xff0c;并且还有一些通俗的模式讲解类的书&#xff0c;由于其举的例子太过“通俗”&#xff0c;以致让人理解产…

计算机网络原理笔记-三次握手

三次握手协议指的是在发送数据的准备阶段&#xff0c;服务器端和客户端之间需要进行三次交互&#xff1a; 第一次握手&#xff1a;客户端发送syn包(synj)到服务器&#xff0c;并进入SYN_SEND状态&#xff0c;等待服务器确认&#xff1b; 第二次握手&#xff1a;服务器收到syn包…

Bigmart数据集销售预测

Note: This post is heavy on code, but yes well documented.注意&#xff1a;这篇文章讲的是代码&#xff0c;但确实有据可查。 问题描述 (The Problem Description) The data scientists at BigMart have collected 2013 sales data for 1559 products across 10 stores in…

数据特征分析-帕累托分析

帕累托分析(贡献度分析)&#xff1a;即二八定律 目的&#xff1a;通过二八原则寻找属于20%的关键决定性因素。 随机生成数据 df pd.DataFrame(np.random.randn(10)*10003000,index list(ABCDEFGHIJ),columns [销量]) #避免出现负数 df.sort_values(销量,ascending False,i…

dt决策树_决策树:构建DT的分步方法

dt决策树介绍 (Introduction) Decision Trees (DTs) are a non-parametric supervised learning method used for classification and regression. The goal is to create a model that predicts the value of a target variable by learning simple decision rules inferred f…

读C#开发实战1200例子记录-2017年8月14日10:03:55

C# 语言基础应用&#xff0c;注释 "///"标记不仅仅可以为代码段添加说明&#xff0c;它还有一项更重要的工作&#xff0c;就是用于生成自动文档。自动文档一般用于描述项目&#xff0c;是项目更加清晰直观。在VisualStudio2015中可以通过设置项目属性来生成自动文档。…

数据特征分析-正太分布

期望值&#xff0c;即在一个离散性随机变量试验中每次可能结果的概率乘以其结果的总和。 若随机变量X服从一个数学期望为μ、方差为σ^2的正态分布&#xff0c;记为N(μ&#xff0c;σ^2)&#xff0c;其概率密度函数为正态分布的期望值μ决定了其位置&#xff0c;其标准差σ决定…

r语言调用数据集中的数据集_自然语言数据集中未解决的问题

r语言调用数据集中的数据集Garbage in, garbage out. You don’t have to be an ML expert to have heard this phrase. Models uncover patterns in the data, so when the data is broken, they develop broken behavior. This is why researchers allocate significant reso…

数据特征分析-相关性分析

相关性分析是指对两个或多个具备相关性的变量元素进行分析&#xff0c;从而衡量两个变量的相关密切程度。 相关性的元素之间需要存在一定的联系或者概率才可以进行相关性分析。 相关系数在[-1,1]之间。 一、图示初判 通过pandas做散点矩阵图进行初步判断 df1 pd.DataFrame(np.…

获取所有权_住房所有权经济学深入研究

获取所有权Note from Towards Data Science’s editors: While we allow independent authors to publish articles in accordance with our rules and guidelines, we do not endorse each author’s contribution. You should not rely on an author’s works without seekin…

getBoundingClientRect说明

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。 1.语法&#xff1a;这个方法没有参数。 rectObject object.getBoundingClientRect() 2.返回值类型&#xff1a;TextRectangle对象&#xff0c;每个矩形具有四个整数性质&#xff08; 上&#xff0c; 右 &#xf…

robot:接口入参为图片时如何发送请求

https://www.cnblogs.com/changyou615/p/8776507.html 接口是上传图片&#xff0c;通过F12抓包获得如下信息 由于使用的是RequestsLibrary&#xff0c;所以先看一下官网怎么传递二进制文件参数&#xff0c;https://2.python-requests.org//en/master/user/advanced/#post-multi…

已知两点坐标拾取怎么操作_已知的操作员学习-第3部分

已知两点坐标拾取怎么操作有关深层学习的FAU讲义 (FAU LECTURE NOTES ON DEEP LEARNING) These are the lecture notes for FAU’s YouTube Lecture “Deep Learning”. This is a full transcript of the lecture video & matching slides. We hope, you enjoy this as mu…

缺失值和异常值处理

一、缺失值 1.空值判断 isnull()空值为True&#xff0c;非空值为False notnull() 空值为False&#xff0c;非空值为True s pd.Series([1,2,3,np.nan,hello,np.nan]) df pd.DataFrame({a:[1,2,np.nan,3],b:[2,np.nan,3,hello]}) print(s.isnull()) print(s[s.isnull() False]…

特征工程之特征选择_特征工程与特征选择

特征工程之特征选择&#x1f4c8;Python金融系列 (&#x1f4c8;Python for finance series) Warning: There is no magical formula or Holy Grail here, though a new world might open the door for you.警告 &#xff1a; 这里没有神奇的配方或圣杯&#xff0c;尽管新世界可…