Denuo DirectUI 控件风格特性

1.什么是控件风格

控件风格指的是控件所表现出来的外观的特性， 通俗的讲就是我们能看到的控件的样子。控件能呈现给我们的外观包括形状、颜色、大小、位置等，这些外关关联着一些行为比如鼠标按下时、鼠标悬停时、鼠标经过时等，同时还表现出一些特性比如控件边框的外观、控件背景外观、控件文本的外观等等。一般情况下我们为了适应要求需要编写大量的代码，机械的根据控件的状态通过切换图片、重新设置颜色等方式来实现，这样做非常繁琐并且容易出错，最重要的是为了个性需要我们不得不为了不同的需要重复编写一个控件的多个实现，比如按钮控件，普通状态下背景图片是这样的，当鼠标停留时背景图片是另外一个，这样我们需要重载他的绘图事件，然后根据需要编写代码，另外一个按钮普通状态下文本是黑色的、按下时是红色的，我们又需要修改绘图事件编写相应的代码，慢慢的我们已经被绘图耗费了大量的工作。

2.控件风格化

Denuo DirectUI 设计了绘图风格，完美的解决了这个问题，你可以随意的配置你想要的效果，而不需要关心他的实现，解放了这部分工作，同时达到了效果，著提升开发效率，避免重复造车，减少出错几率。

3.如何使用控件风格

使用控件风格可以通过两个方式实现，一个是通过配置文件，将想要的效果配置出来，通过控件的配置文件直接选用即可，另外你也可以在程序中通过代码设置实现。这里我们通过按钮控件来解说。

对于按钮控件来说是再简单不过的了，但是即使是一个简单的按钮控件，它所能表现出来的风格也非常多，网络上有各种各样的自绘按钮的例子，如果把它们整合起来，没有100个类也要有99个了。

我们首先介绍一下应用场景，一个大概的场景可能是这样的：

1、按钮想要这个几个行为，普通情况下是这样一个状态 ，当鼠标经过时是这样一个状态，当鼠标按下时是这样一个状态。

2、按钮需要适应各种的宽度与高度的需要。

3、按钮普通情况下的文本的颜色是黑色的RGB(0,0,0)，当鼠标经过时想要红色的RGB(255,0,0).。

4、按钮的文本普通情况下字体不带下划线，当鼠标经过是带下划线。

5、按钮的光标正常情况下是箭头状，当鼠标经过是光标变为手型。

上面是一个非常简单的场景，传统情况下我们需要重载多个事件去处理这个场景。如果场景改变我们仍然需要编写代码去实现，在这里我们仅需要几行的配置文件就可以解决这个问题。

<Style Name="SysStyleLogin">
    <Image State="Normal" ImageName="SysImageBtnNormal" LeftPart="0" TopPart="0" RightPart="0" BottomPart="0" PaintMode="Copy" CopyAlign="AlignCenter" Alpha="False"/>
    <Image State="Hover" ImageName="SysImageBtnHover" LeftPart="0" TopPart="0" RightPart="0" BottomPart="0" PaintMode="Copy" CopyAlign="AlignCenter" Alpha="False"/>
    <Image State="Down" ImageName="SysImageBtnDown" LeftPart="0" TopPart="0" RightPart="0" BottomPart="0" PaintMode="Copy" CopyAlign="AlignCenter" Alpha="False"/>
    <Text State="Normal" Alpha="False" Font="SysFont" TextColor="0,0,0" HAlign="Center" VAlign="Center" SingleLine="True" EndEllipsis="False"/>
    <Text State="Hover" Alpha="False" Font="SysFontUnderline" TextColor="255,0,0" HAlign="Center" VAlign="Center" SingleLine="True" EndEllipsis="False"/>
    <Text State="Down" Alpha="False" Font="SysFont" TextColor="0,0,0" HAlign="Center" VAlign="Center" SingleLine="True" EndEllipsis="False"/>
    <Text State="Focus" Alpha="False" Font="SysFont" TextColor="0,0,0" HAlign="Center" VAlign="Center" SingleLine="True" EndEllipsis="False"/>
</Style>

上面的几行配置文件实现了上面这个场景，当场景改变时，仅仅需要修改一下配置文件即可。