韩弈风技术博客

为了应对人类无限制的贪婪,才要发动一次又一次得技术革命。QQ:29992379

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

上一节地址: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

阅读更多
个人分类: windows phone 7
所属专栏: WindowsPhone开发
想对作者说点什么? 我来说一句

Android UI界面漂亮的天气预报源码

2017年11月25日 3.79MB 下载

简单的天气APP项目源码

2016年07月12日 1.51MB 下载

WP7天气预报程序

2012年05月05日 672KB 下载

简易天气预报APP源码

2016年02月24日 8.77MB 下载

简易版天气预报java实现

2016年08月26日 15KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭