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年了。真是悲剧啊……求工作。感觉现在公司都很注重工作经验，技术再强也不如有工作经验。我想说的是应届毕业生里也是有能力的，工作好几年的也有能力不强的。

 摘自  韩弈风