wp7天气预报源代码(四UI的制作)视觉状态

原创 2012年03月28日 19:38:22

上一节地址:http://www.cnblogs.com/wildfeng/archive/2012/03/25/2416388.html

本次讲城市列表中控件的制作。

44

image此控件为用户自定义控件。制作布局和上一章讲的ForecastTile控件一样,只是在其基础上增加了视觉状态。imageimageimage

image为3个状态添加了效果和曲线。image

控件添加的样式生成的代码如下:

   1:  <UserControl
   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   5:      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   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年了。真是悲剧啊……求工作。感觉现在公司都很注重工作经验,技术再强也不如有工作经验。我想说的是应届毕业生里也是有能力的,工作好几年的也有能力不强的。

作者QQ:29992379

博客园原文地址:http://www.cnblogs.com/wildfeng/archive/2012/03/28/2421680.html

WPF之ControlTemplate控件模板

ControlTemplate 类:指定可视结构和行为方面 Control ,可以跨多个控件实例共享。 Dispatcher属性: 获取 Dispatcher 这 DispatcherObject...
  • wlarlen
  • wlarlen
  • 2018年01月08日 10:13
  • 10

仿华为天气预报UI

近来公司事前较少,再来找几个有意思的View练练手,下面是原生华为天气预报界面: 下面是仿的UI交互效果:**思路: 1.平移画布到View中心,先绘制一个圆弧,绘制中间文字 ...
  • King1425
  • King1425
  • 2017年02月25日 16:20
  • 3767

【项目源码】- 【天气预报】模仿魅族系统天气预报android

这个天气预报主要学习下网络方面的东西,比如json数据的读取,了解网络的一些知识。 其中还涉及的知识点包括:  动画的操作,如入云的移动用的translateAnimation , 还有...
  • wduj123
  • wduj123
  • 2016年05月03日 10:56
  • 7751

UI视觉设计师工作流程上的总结与建议

最近有一些刚入行的学妹过来问我,如何才能成为一名合格的设计师,我想三言两语很难传达,于是准备了一篇长文,主要是根据积累的经验和对该行业的认识来叙述作为视觉设计师需要哪些能力。 1.理解业务需...
  • dlfeicui
  • dlfeicui
  • 2017年11月28日 15:29
  • 248

C#实现天气预报

我用的数据是来源于和风全球天气(企业),接口是百度提供的,api:http://apis.baidu.com/heweather/weather/free,获取百度apikey的地址:http://a...
  • XTCGCH
  • XTCGCH
  • 2016年06月15日 09:02
  • 396

android版天气预报程序开发总结

一,开发中所涉及到的技术概括: tabhost选项卡组件,pagerAdapter左右滑屏的实现,json数据解析,xml数据解析,ListActivity与BaseAdapter的结合实现数据和图...
  • Weirenren_027
  • Weirenren_027
  • 2013年04月17日 17:11
  • 3761

android制作一个简单的天气预报

最近由于要做一个关于天气的小应用,所以不得不费心上网开始搜索解决方案,找了几个网上疯传的免费的HTTP的接口,经过试验得到的数据都不是最新,发现还是去年的数据,最终找到一个百度地图接供的API的接口,...
  • chenyan2010521
  • chenyan2010521
  • 2015年04月16日 16:28
  • 810

Android实战制作简易天气预报软件

前言: 真正的梦想,永远在实现之中,更在坚持之中。累了,就停一停,让手贴着手,温暖冷漠的岁月;苦了,就笑一笑,让心贴着心,体味至爱的抚摸;哭了,就让泪水尽情流淌,痛彻心菲也是精彩。选择一条道路,就选择...
  • android_for_James
  • android_for_James
  • 2016年05月14日 20:37
  • 4077

Android上实现一个简单的天气预报APP(四) 添加按钮点击响应

前面我们已经做好了简单的布局,并且实现了获取internet上网页的网络数据的功能。接下来,我们绑定一个按钮,当点击这个按钮时,执行获取网络数据动作。 1.为我们顶部工具栏中的表示更新的图片绑定一个按...
  • v_xchen_v
  • v_xchen_v
  • 2017年02月25日 11:37
  • 1981

分享一个源码下载网站,天气预报项目源码,比较适合新手学习

本项目是一个天气预报项目源码,可以设置城市、可以更换应用内背景图片、自带天气widget小组件等,天气信息由m.weather.com.cn提供。比较适合新手学习和参考。项目编译版本4.2.2默认编码...
  • c1782746138
  • c1782746138
  • 2014年09月10日 14:39
  • 1798
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:wp7天气预报源代码(四UI的制作)视觉状态
举报原因:
原因补充:

(最多只允许输入30个字)