CSS中如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。而XAML在界面显示的同时，还可以进行数据的绑定、列表渲染等，可以就行多项，节省了许多的步骤和麻烦，所以我认为XAML比HTML CSS 强大了许多。

WPF/Silverlight中使用xaml描述界面，类似Css，它们同样有Style和Template。目前微软开源工具包中集成的均是复杂类型控件，如何修改它们的样式确实难倒了不少朋友，那么本节以分析为主，结合对常用的NumericUpDown控件向大家讲解。 首先打开工具包中的示例项目：

这时我们需要做的是抽取其中任意一个被重写过样式的NumericUpDown及其所牵连的所有代码，例如上图中红色圈中的那个，找到它的主体代码如下： <inputToolkit:NumericUpDown Grid.Row="1"Grid.Column="0" Style="{StaticResource ButtonSpinnerHorizontalStyle}" Margin="5" Height="90" FontSize="50"/>很显然，它的样式加载的是静态资源中的ButtonSpinnerHorizontalStyle，那么接下来我们查找该静态资源并去掉其中的vsm:VisualStateManager和Border等无关紧要的内容，剩下控件的主要样式如下：<Style x:Key="ButtonSpinnerHorizontalStyle" TargetType="inputToolkit:NumericUpDown">……<Setter Property="Template"><Setter.Value><ControlTemplate TargetType="inputToolkit:NumericUpDown"><Grid>……<inputToolkit:ButtonSpinner x:Name="Spinner" …… Template="{StaticResource ButtonSpinnerHorizontalTemplate}"><TextBox BorderThickness="0" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" MinWidth="20" x:Name="Text" AcceptsReturn="False" Text="{TemplateBinding Value}" TextAlignment="Right" TextWrapping="NoWrap"/></inputToolkit:ButtonSpinner></Grid></ControlTemplate></Setter.Value></Setter></Style>原来NumericUpDown是由一个包含TextBox的ButtonSpinner构成，而ButtonSpinner加载的样式模板为ButtonSpinnerHorizontalTemplate，接下来我们再次找到ButtonSpinnerHorizontalTemplate，同样的把不必要的部分去掉，关键代码如下：<ControlTemplate x:Key="ButtonSpinnerHorizontalTemplate" TargetType="inputToolkit:ButtonSpinner"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="20"/><ColumnDefinition Width="20"/></Grid.ColumnDefinitions>……<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Grid.Column="0"/><RepeatButton IsTabStop="False" Template="{StaticResource IncreaseButtonTemplate}" x:Name="IncreaseButton" ClickMode="Press" Grid.Column="1"/><RepeatButton IsTabStop="False" Template="{StaticResource DecreaseButtonTemplate}" x:Name="DecreaseButton" ClickMode="Press" Grid.Column="2"/></Grid></ControlTemplate>它的构造由3部分组成：用于输入数字的内容区域ContentPresenter，以及加值按钮IncreaseButton和减值按钮DecreaseButton。再下来我们还是按照上面的规律忽略无关紧要的代码，不理会TemplateBinding而是直接找到StaticResource对应的Template，以IncreaseButtonTemplate为例，它的关键代码如下：<ControlTemplate x:Key="IncreaseButtonTemplate" TargetType="RepeatButton"><Grid x:Name="Root"><Rectangle x:Name="Background" ……><Rectangle.Fill>……</Rectangle.Fill></Rectangle></Grid></ControlTemplate>现在清楚了吧，原来NumericUpDown控件的加减按钮的原形是RepeatButton，而RepeatButton的原形则是Rectangle，那么我们只需修改Rectangle.Fill的内容，即可改变NumericUpDown加减按钮的样式，这里我使用两张图片作为鼠标进入和离开Rectangle时的Fill填充对象，那么修改后的代码如下：<ControlTemplate x:Key="IncreaseButtonTemplate" TargetType="RepeatButton"><Grid x:Name="Root"><Rectangle x:Name="Background" Width="16" Height="16" MouseEnter="Background_MouseEnter" MouseLeave="Background_MouseLeave"><Rectangle.Fill><ImageBrush ImageSource="Images/0.png" /></Rectangle.Fill></Rectangle></Grid></ControlTemplate>//加载图片private BitmapSource GetImage(string imageName) {return new BitmapImage(new Uri(string.Format(@"/Silverlightcomponent/Images/{0}", imageName), UriKind.Relative))}private void Background_MouseEnter(object sender, MouseEventArgs e) {Rectangle rect = sender as Rectanglerect.Fill = new ImageBrush() { ImageSource = GetImage("2.png") }}private void Background_MouseLeave(object sender, MouseEventArgs e) {Rectangle rect = sender as Rectanglerect.Fill = new ImageBrush() { ImageSource = GetImage("0.png") }}

想学Win10 UWP开发，不知从何下手？那么本系列文章可能正是你所需要的。从今天开始IT之家将陆续推出Windows10开发新手入门系列专题，供对Win10开发感兴趣的小伙伴们参考学习。

作为系列专题的开篇，本文并不会包含技术性方面的内容，主要是向大家征集意见和建议，并对我们即将使用的Win10开发平台作一个简单的介绍。

Win10通用平台

我们通常所说的UWP，即Universal Windows Platform，意为通用Windows平台，针对该平台开发的应用可同时运行在多种不同类型的Win10设备中，包括手机、平板、PC（笔记本和台式机），甚至是Xbox One以及Hololens中，还有各种物联网设备。

这里的通用实质是源代码的“通用”，开发者还是需要针对不同平台设备编译不同的版本。其实通用应用的概念在WP8.1时就已诞生，不过在Win10中更进一步，逻辑代码和UI代码都可以得到最大程度共用。

开发框架和语言

过去很长一段时间以来，甚至是现在，在Windows桌面平台较流行的开发方式便是使用微软提供的MFC框架以及WinForm/WPF框架，前者是对Windows API的C++封装，后者则是对Windows API的.NET封装，使用C#语言开发。到了Win8中微软引入了全新的应用程序架构，即WinRT，并延续到了Win10（包括Win10 Mobile）中，专门用来开发Windows应用商店应用，它支持使用C++、C#、VB.NET，甚至是JavaScript语言进行开发。

多年来微软一直在不断推广和改进自家的C#语言，C#是一门完全面向对象的编程语言，入门上手较为容易，也是微软比较推荐的编程语言。在本系列专题中，我们即使用C#编程语言完成一系列示例。

除了C#语言，我们还需要学习XAML语言，对于有WPF开发经验的朋友会非常熟悉。XAML主要用于设计应用界面，类似于呈现网页的HTML语言。前面我们提到Win10通用应用针对不同设备都可以使用同一套UI，那么这就要求我们设计的界面能够适应各种不同尺寸的屏幕，因此还需要掌握一些有关响应式界面设计的技巧。

准备工作

我们将在后续的系列文章中逐步渗透以上技术，如果你已经打算跟着我一起动手，那么现在你需要准备以下软硬件工具：

• 一台运行Win10（建议升级到TH2）的电脑，点此下载Win10 TH2正式版系统；

• 安装Visual Studio 2015（建议安装最新Update1版本）以及Win10 SDK，点此下载所需工具；

• 一部运行Windows 10 Mobile（10586系统）的手机；

注：如果你没有Win10 Mobile手机也可以通过模拟器进行调试，不过这需要你的电脑CPU支持虚拟化技术。因为运行Win10 Mobile手机模拟器所需的Hyper-V虚拟机依赖于CPU的虚拟化技术。

在下一篇文章中我们将创建一个最简单的应用，并对Win10 UWP应用的整个结构进行分析，熟悉Visual Studio 2015开发环境。

最后，由于豆豆并非专业出身，因此本系列专题定位为入门性质，目前还在摸索中，豆豆将和大家一同学习。如果文章出现技术性错误，也恳请您指出，豆豆将虚心学习和接受。对于学习过程中遇到的任何问题以及想要分享的内容，也欢迎入驻软媒IT之家IT圈参与讨论。如果你有什么意见和建议也请在评论或IT圈中发帖提出。

---