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

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

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:          }
阅读更多
想对作者说点什么? 我来说一句

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万程序员共同成长!
关闭
关闭