对windows 10 UWP中控件的外观进行定制(customization)
各位商店应用的开发者们应该经常会碰到以下情况，Visual Studio里面自带控件的默认外观比较朴素，通常这些默认的控件外观很难融入丰富多彩的用户界面，不能帮助开发者们构建漂亮的界面。
Visual Studio为开发者们定制控件外观提供了很好的手段，本篇博文将主要通过两个简单的例子告诉大家如何去进行界面的外观定制。希望这些例子能够起到抛砖引玉的作用，助力各位开发者为Windows 10生态贡献更好的应用。
故事是这样开始的:
有一天designer给我了一个关于对联创作UI的设计稿，其中有关于对联输入框的部分是这样设计的。
设计稿要求构建能进行文本输入的田字格，但是实际上默认外观的文本框很明显不能满足这个需求。于是就有了对文本框的外观进行定制的需求。
首先给大家看一下定制后的效果。
首先这里先谈一下在这里为什么需要进行外观定制。
虽然开发者们可以直接使用控件的background属性将textbox的背景设成田字框的图像，但是当田字框获取焦点后，如果需要更换背景的颜色告诉用户已经选中该田字框，从而增强应用的交互体验。然而这样的一个用户体验细节很难通过直接修改控件属性的方式实现。
于是就需要通过对控件模板的进行修改。
控件的模板是什么东西？
每个控件都有默认的风格和模板(styles and templates)，默认的风格和模板对应的控件默认的显示效果。我们可以去发掘一下这些默认的样式中主要含有哪些对控件特性的描述。
打开Bing的英文搜索引擎(http://global.bing.com/)，搜索”textbox styles and templates”这个关键词，我们发现了两条结果，其中前两条结果都是来自msdn官方网站的。在这里顺便提一点，WPF和Windows Runtime中很多控件名字都是一样的，一般这些资料标题中带”(Windows app development)”或者”(Windows)”的一般指的是Windows商店应用(Windows Runtime)，而不带的一般指的是WPF方面的资料，请注意区分(虽然这两者在很多方面的使用方法是相同的)
于是我们打开微软的官方资料进行学习。点击TextBox Style and Templates (Windows)
在这篇官方文档的前面，我们发现了关于TextBox VisualState方面的介绍。
其中需要更改的是文本框获取焦点后的外观(主要就是背景)，我们发现Focused这个VisualState是我们需要去做修改的，因为文本框获取焦点后的背景不符合我们的预期。
接下来是关于画刷等资源的一些描述。
textbox默认的style
在style中找到了focused相关的部分。
很容易发现VisualState Focused底下没有任何的元素，可以参照上面的VisualState Disabled状态下对Background元素做定义的方法，直接搬过来。
具体要修改的就是这些，还望各路开发者请发挥想象，制作出更多好玩的控件。
但是我们如何在Visual Studio去应用这些更改呢？
首先我们找到Design界面下的文本框，右击它。
Edit Template就是编辑当前控件的styles and templates，edit a copy指的就是编辑当前控件模板的一份拷贝，由于这是刚刚创建的默认控件，点击edit a copy自然生成的就是默认的模板。
取个好听的名字
Apply To All就不用点了，一般这种修改很少是针对全局的所有控件的。
Define in指的是你希望将这个修改后的模板定义在什么地方，我希望模板能在全局中使用，我选择了Application
于是生成了默认的模板，我们找到我们要修改的地方()
仿照上面定义background的方法直接搬过来，再定义一个brush(为了展示简单，这里就定义了一个solidcolorbrush)
我们把focused visual state稍作修改，就实现了按钮获取焦点后背景的变化，当文本框获取焦点后，背景就变成了红色。
比如这里solidcolorbrush你可以换成imagebrush或者其他concrete brush，来满足你对界面外观的需求。
下面再用按钮的定制化做一个例子，系统默认的按钮样式是在很多场景下显得不够美观，然而通过采用上述方法定制，我们可以让按钮的样式更好的融合到界面当中。
官方文档获取的方式就不再赘述了，以下是Button控件Styles and Templates的官方文档
https://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709909.aspx
我们希望在按钮主要的几种Visual State(Normal，Pressed和Disabled)下，修改按钮的背景，以便更好的与界面融合在一起。
首先给大家看一下修改后的效果(右边的确认按钮，左图作为对比)。
(Disabled状态下的按钮，当对联的输入不合法时显示，给用户非常直观的感觉)
(默认状态下的按钮)
Pressed状态下的按钮，当按钮按下后，按钮缩小，给用户带来了一种很好的反馈 (按钮点击感) ，这么好的效果我点着点着都上瘾了。
基于这两个与按钮控件相关的需求(在当前界面中按钮更好的点击反馈感和disable效果)，开始按钮控件模板的修改。
在Button Styles and Templates的官方资料中我们找到了
将默认style中Pressed和Disabled这两个部分提取出来。其中的Background属性对应的Value是前面资源中声明的SolidColorBrush，为了让界面更加丰富多彩，可以把SolidColorBrush换成ImageBrush，显示开发者们自己的设计的图案。
和文本框的操作步骤一样，我们先在Visual Studio中生成一个默认的模板。
在默认模板中我们找到我们刚才说的要修改的部分进行修改。
我们稍作简单的修改就可以了。
上面两张图中圈出来的部分是需要修改的部分，笔者将两种visual state下background的值由ThemeResource(前面定义的SolidColorBrush)改成了图片资源，因此控件的外观会更好看 (点击反馈和直观的disable效果)
以上这两个简单的例子是在我们在开发对联应用的过程中产生的，希望这篇博文能起到抛砖引玉的作用，启发更多的开发者，为Windows生态贡献更多更好的控件。
