wp7天氣預報源代碼(四UI的制作)視覺狀態

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

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

此控件為用戶自定義控件。制作布局和上一章講的ForecastTile控件一樣，只是在其基礎上增加了視覺狀態。

為3個狀態添加了效果和曲線。

控件添加的樣式生成的代碼如下：

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="Weather.CityTile"
    d:DesignWidth="184" d:DesignHeight="105">
    <UserControl.Resources>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="LayoutRoot" Background="Transparent" RenderTransformOrigin="0.5,0.5"><!--變形的中心位置-->
                            <Grid.RenderTransform>
                                <CompositeTransform/>
                            </Grid.RenderTransform>
                            <VisualStateManager.VisualStateGroups>         <!--管理器類型.狀態組-->
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>    <!--視覺過渡轉換，設置單個的狀態組里不同狀態切換時的動畫效果-->
                                        <VisualTransition GeneratedDuration="0:0:1" To="Pressed">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <BackEase EasingMode="EaseOut"/>
                                            </VisualTransition.GeneratedEasingFunction>
                                        </VisualTransition>
                                        <VisualTransition GeneratedDuration="0:0:1" To="Normal">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <BackEase EasingMode="EaseOut"/>
                                            </VisualTransition.GeneratedEasingFunction>
                                        </VisualTransition>
                                        <VisualTransition GeneratedDuration="0:0:1" To="MouseOver">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <BackEase EasingMode="EaseOut"/>
                                            </VisualTransition.GeneratedEasingFunction>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Disabled"/>  <!--設置單個的狀態的動畫效果-->
                                    <VisualState x:Name="Normal"/>    <!--設置單個的狀態的動畫效果-->
                                    <VisualState x:Name="MouseOver"/>  <!--設置單個的狀態的動畫效果-->
                                    <VisualState x:Name="Pressed">     <!--設置單個的狀態的動畫效果-->
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.8" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0" To="0.8" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Image Source="/Weather;component/UserControl/base.png" Stretch="Fill"/>
                            <Image Margin="90,-14,0,32" Source="{Binding cityWeatherIcon}"/>
                            <TextBlock Text="{Binding cityTemperature}" FontSize="20"  Width="100" Margin="8,8,8,8" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"/>
                            <ContentPresenter HorizontalAlignment="Left" Height="40" Margin="8,8,0,0" VerticalAlignment="Top"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontSize" Value="26"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
    </UserControl.Resources>
    <Button Name="cityName" Content="{Binding cityName}" Style="{StaticResource ButtonStyle1}"/>
</UserControl>

因為城市列表的控件個數是由獨立存儲中的數據動態加載的，賦值代碼如下。

private void AddCity(string cityName, string cityTemperature, string WeatherIconPath)
        {
            CityTileData cityData = new CityTileData();
            cityData.cityTemperature = cityTemperature;
            cityData.cityWeatherIcon = WeatherIconPath;
            CityTile city = new CityTile();
            city.DataContext = cityData;
            city.cityName.Content = cityName;
            city.Width = 184;
            city.Height = 105;
            city.Margin = new Thickness(15, 10, 15, 10);
            wrapPanelCityList.Children.Add(city);
            city.cityName.Click += new RoutedEventHandler(cityName_Click);
        }

        void cityName_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/Loading.xaml?cityName=" + ((Button)sender).Content + "&AndGoPage=WeatherView", UriKind.RelativeOrAbsolute));
        }

再過20天考試完了，就畢業了。現在找個工作是真難，沒有工作經驗的應屆畢業生沒人要啊。做手機開發那么長時間了，連智能手機都買不起。諾基亞168C一直跟着我3年了。真是悲劇啊……求工作。感覺現在公司都很注重工作經驗，技術再強也不如有工作經驗。我想說的是應屆畢業生里也是有能力的，工作好幾年的也有能力不強的。

作者QQ：29992379