wp7天气预报源代码(四UI的制作)视觉状态
本次讲城市列表中控件的制作。
此控件为用户自定义控件。制作布局和上一章讲的forecasttile控件一样，只是在其基础上增加了视觉状态。
为3个状态添加了效果和曲线。
控件添加的样式生成的代码如下：
<usercontrol
2: xmlns=""
3: xmlns:x=""
4: xmlns:d=""
5: xmlns:mc=""
6: mc:ignorable="d"
7: x:class="weather.citytile"
8: d:designwidth="184" d:designheight="105">
9: <usercontrol.resources>
10: <style x:key="buttonstyle1" targettype="button">
11: <setter property="template">
12: <setter.value>
13: <controltemplate targettype="button">
14: <grid x:name="layoutroot" background="transparent" rendertransformorigin="0.5,0.5"><!--变形的中心位置-->
15: <grid.rendertransform>
16: <compositetransform/>
17: </grid.rendertransform>
18: <visualstatemanager.visualstategroups> <!--管理器类型.状态组-->
19: <visualstategroup x:name="commonstates">
20: <visualstategroup.transitions> <!--视觉过渡转换，设置单个的状态组里不同状态切换时的动画效果-->
21: <visualtransition generatedduration="0:0:1" to="pressed">
22: <visualtransition.generatedeasingfunction>
23: <backease easingmode="easeout"/>
24: </visualtransition.generatedeasingfunction>
25: </visualtransition>
26: <visualtransition generatedduration="0:0:1" to="normal">
27: <visualtransition.generatedeasingfunction>
28: <backease easingmode="easeout"/>
29: </visualtransition.generatedeasingfunction>
30: </visualtransition>
31: <visualtransition generatedduration="0:0:1" to="mouseover">
32: <visualtransition.generatedeasingfunction>
33: <backease easingmode="easeout"/>
34: </visualtransition.generatedeasingfunction>
35: </visualtransition>
36: </visualstategroup.transitions>
37: <visualstate x:name="disabled"/> <!--设置单个的状态的动画效果-->
38: <visualstate x:name="normal"/> <!--设置单个的状态的动画效果-->
39: <visualstate x:name="mouseover"/> <!--设置单个的状态的动画效果-->
40: <visualstate x:name="pressed"> <!--设置单个的状态的动画效果-->
41: <storyboard>
42: <doubleanimation duration="0" to="0.8" storyboard.targetproperty="(uielement.rendertransform).(compositetransform.scalex)" storyboard.targetname="layoutroot" d:isoptimized="true"/>
43: <doubleanimation duration="0" to="0.8" storyboard.targetproperty="(uielement.rendertransform).(compositetransform.scaley)" storyboard.targetname="layoutroot" d:isoptimized="true"/>
44: </storyboard>
45: </visualstate>
46: </visualstategroup>
47: </visualstatemanager.visualstategroups>
48: <image source="/weather;component/usercontrol/base.png" stretch="fill"/>
49: <image margin="90,-14,0,32" source="{binding cityweathericon}"/>
50: <textblock text="{binding citytemperature}" fontsize="20" width="100" margin="8,8,8,8" horizontalalignment="stretch" verticalalignment="bottom"/>
51: <contentpresenter horizontalalignment="left" height="40" margin="8,8,0,0" verticalalignment="top"/>
52: </grid>
53: </controltemplate>
54: </setter.value>
55: </setter>
56: <setter property="fontsize" value="26"/>
57: <setter property="foreground" value="white"/>
58: </style>
59: </usercontrol.resources>
60: <button name="cityname" content="{binding cityname}" style="{staticresource buttonstyle1}"/>
61: </usercontrol>
因为城市列表的控件个数是由独立存储中的数据动态加载的，赋值代码如下。
1: private void addcity(string cityname, string citytemperature, string weathericonpath)
2: {
3: citytiledata citydata = new citytiledata();
4: citydata.citytemperature = citytemperature;
5: citydata.cityweathericon = weathericonpath;
6: citytile city = new citytile();
7: city.datacontext = citydata;
8: city.cityname.content = cityname;
9: city.width = 184;
10: city.height = 105;
11: city.margin = new thickness(15, 10, 15, 10);
12: wrappanelcitylist.children.add(city);
13: city.cityname.click += new routedeventhandler(cityname_click);
14: }
15:
16: void cityname_click(object sender, routedeventargs e)
17: {
18: navigationservice.navigate(new uri("/loading.xaml?cityname=" + ((button)sender).content + "&andgopage=weatherview", urikind.relativeorabsolute));
19: }
再过20天考试完了，就毕业了。现在找个工作是真难，没有工作经验的应届毕业生没人要啊。做手机开发那么长时间了，连智能手机都买不起。诺基亚168c一直跟着我3年了。真是悲剧啊……求工作。感觉现在公司都很注重工作经验，技术再强也不如有工作经验。我想说的是应届毕业生里也是有能力的，工作好几年的也有能力不强的。
摘自 韩弈风