blend设计基础教程（一）

应群里朋友要求，发个基础教程。由于他是程序员，对blend设计完全没概念，所以发个很基础很基础的教程。

他想实现的效果如下图

WPF的控件是无外形的控件，可以是任何样子，这个效果我们用个combox解决。

1.新建一个项目，然后再页面上添加一个combobox.然后添加两个comboxitem；

2.编辑combobox的模板。

看下combobox里面的模板是什么样子。

MainGrid是为布局控件Grid;PART_Popup为点击按钮后下方弹出的pop窗口，ToggleButton为点击的弹出下拉的按钮，ContentPresenter为承载你选择值的一个控件。

3.看下我们最终实现的样式，弹出的框距离按钮有个边距，你可能想通过设置PART_Popup的margin来控制位置，但是你这样做了是没有效果的，应为PART_Popup的位置是根据ToggleButton改变的。所以我们改变策略，修改pop里面border的边距。同样要修改弹出框的背景色，边框颜色，粗细都是在这里修改dropDownBorder的属性。

4.combox选中一项后，上面会显示值出来，我们解决的办法就是直接删掉ContentPresenter，不用担心，不会有任何报错！

4.弹出下拉的按钮与我们想实现的效果有所不同，所以我们要编辑ToggleButton的模板。

chrome为微软默认的主题布局容器，我们可以直接删掉。我们的combox就不会出现默认的灰色渐变底色了。

5.现在我们可以对按钮的样式进行任意操作，可以放背景图片，改变三角形形状等等

6.回到最初界面改下combobox的宽度就可以实现上面的效果了。

7.修改pop弹出框里面项的样式。选择编辑itemcontainstyle.

ItemTemplate为数据模板，当你的弹出中是图片加文字的时候，你就需要用数据模板去绑定数据。

ItemContainerStyle为样式模板。是你弹出中每项的样式。

ItemsPanel为布局模板，是弹出项中的布局容器。为什么我们看到弹出项中的项是竖直排列的原因就是combobox的ItemsPanel模板默认为StackPanel.

8.我们想设置鼠标移上去的时候背景色为红色，很多人可能是去更改Bd的背景色。当你使用触发器来实现这个功能的时候，可以这样去实现，但是当你使用状态模板时我们就要使用另一种实现方式。

9.将Bd放入Grid中，同时在Grid中添加一个背景色为红色的矩形。

10.将矩形的透明度设为0.（当你希望有动画效果的时候设置Opacity，反之则使用Vislbility）

11。选中状态面板，然后再选中mouseover状态，把你刚才设置的Opacity改为100

这样我们的combobox就实现了。

 

东西很基础，多动手就很容易理解，否则你看了再多也不会记住。

 

最后我们的目标是没有代码！！！！！！