Silverlight 控件样式自定义

使用Silverlight开发项目也有很长一段时间了，从MVVM的开发思想，使业务逻辑代码与界面分离，再到使用Prism等开发框架对项目进行模块化的开发管理。一直并没有把太多的时间和精力投入到UI层面，都是使用一些第三方的组件（Telerik，C1，Dev）提供的一些Window7，Metro等风格的控件和主题库。老乔的出现，变相的提高了所有软件使用者的待遇，使我们也必须把更多的时间和精力投入到这些直接能让用户感受到的UI和交互逻辑上。

今天和大家一起分享自定义Silverlight 中ComboBox的样式，在Apple的风格都朝着扁平化的方向发展后，公司UI设计的符合“潮流”的ComboBox样式，找了各种第三方UI主题，都没有这样的效果，看来只能亲自动手修改了，大家可以先看一下自定义后的效果。

 

                       

设计效果

 

 

图中上边是自定义样式后的效果，下边是没有自定义样式的效果

 

首先我们来看一下ComboBox的构成

 

编辑一下ComboBox的原始模板我们可以看出其实Combobox是由2大部分组成，第一部分是由Border包含的一个ToggleButton，用于用户触发选择事件，第二部分是Popup，用于弹出下拉的选择项目列表。第一部分中DisabledVisualElement、FocusVisualElement、ValidationErrorElement分别是ComboBox在不同的状态下的一些UI元素，根据名称我们也基本可以辨别！

 

 

ComboBox圆角的设置

 

这个是需要查看原始模板后，我们会发现需要达到ComboBox圆角的效果，需要自定义ToggleButton的样式，

ToggleButton模板中有多个Rectangle起到了背景作用，是为了区分控件不同状态下的效果，比如Checked，focus等，可以参照VisualStateManager中各个状态的动画效果去分别理解每个Rectangle的作用。设置对应的Rectangle的RadiusY, RadiusX，以及Fill达到颜色以及圆角的效果。本例中是将Rectangle的Fill由LinearGradientBrush更改为SolidColorBrush RadiusY和RadiusX设置为5

 

右侧倒三角的设置

 

我们可以看到标准模板中是一个ToggleButton，ToggleButton中嵌套了一个小倒三角的path，我们可以通过修改path的形状、大小、颜色来自定义这个触发按钮的样式，本例中做了2件事，1是修改了倒三角的大小和颜色，2是在倒三角的左边增加了一个Rectangle，作为内容的分割符。

 

ContentPresenter我们可以理解为当前选择内容显示的占位的控件

 

Popup样式

原始样式模板中，Border嵌入了一个ScrollViewer，具体外观样式，包括滚动条的样式可以单独对Border和Scrollviewer进行设置

 

ComboBoxItem样式

ComboBoxItem样式主要设置ComboBoxItem在不同状态的的一些样式，例如Common，MouseOver等，这个可以参照美工的整体设计进行修改，修改方法和和上述的方法类似。下图为修改后的效果

这样ComboBox已经达到了基本要求，不过要达到在控件的各种状态下都符合设计要求DisabledVisualElement、 ValidationErrorElement等元素都要仔细设置，并需要仔细查看各种状态下StoryBoard对Element的操作。

 

转载于:https://www.cnblogs.com/grui/p/3245550.html