[windows phone开发]新生助手的开发过程与体会一_移动开发_编程开发_程序员俱乐部

功能需求分析：

1．  为到达学院的新生指路，给出所有路线，并给出必要提示；

2．  对学院建筑进行介绍；

3．  对学院周边环境（交通、购物、银行等）进行介绍；

4．  必要的应用设置

总体设计：

采用全景视图，分为四页对各项功能依次实现。

下面就向大家大概介绍一下具体的实现过程，之中可能会掺杂着我自己的一些实际体会。

一．              首先建立在Visual Studio 2012或者Visual Studio Express 2012中新建一个Windows phone全景应用程序，名称改为StudentAssistant，不要用汉语名称，这样工程中的名称空间都会是这个名字，虽然不影响开发，但最终是发布不到应用商店里的，所以不要给自己找麻烦。之后选择你所开发应用所要应用的平台，我们选择Windows phone OS 8.0。

二．               

我们的首页效果是这样的。

   

1. 首先更改全景视图的背景图片

右击工程名 StudentAssistant->添加->新建文件夹，名称改为Images，右击Images->添加->现有项，添加你需要的图片到此文件夹，更改图片名为BackGround.jpg，以后所有图片均类似添加，不在重复叙述。

将MainPage.xaml中

<phone:Panorama.Background>
                <ImageBrush ImageSource="/PanoramaApp1;component/Assets/PanoramaBackground.png"/>
            </phone:Panorama.Background>

更改为

 <phone:Panorama.Background>
                <ImageBrush ImageSource="/StudentAssistant;component/Assets/PanoramaBackground.png"/>
            </phone:Panorama.Background>

 

也就是将ImageSource更改为你所要应用的图片的位置。

1. 个性化标题

删去

Title="我的应用程序"

在添加背景图片代码的下方添加：

            <phone:Panorama.Title>
                <Image Margin="-70,40,0,-35" Height="230" Source="/Images/Title.png"/>
            </phone:Panorama.Title>

你就可以将自己设计的任何个性化的标题（实际上是自己Ps的图片）作为自己的应用标题，想怎么个性就怎么个性，Margin的参数根据需要自己调整，不再多说。

下面就正式进入功能设计

删去项目一中我们不需要的代码

class="code_img_closed" src="/Upload/Images/2013071803/0015B68B3C38AA5B.gif" alt="" />logs_code_hide('cb0d2739-d3e2-4c04-aef7-d28b9d258535',event)" src="/Upload/Images/2013071803/2B1B950FA3DF188F.gif" alt="" />

 <!--具有文字环绕的单行列表-->
                <phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Items}">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,-6,0,12">
                                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>

无用代码

在项目一中添加如下代码

                <ScrollViewer  Margin="0,-35,12,0" ScrollViewer.VerticalScrollBarVisibility="Auto" >
                    <ScrollViewer.Content>
                        <StackPanel VerticalAlignment="Top" Orientation="Vertical" >

                            <Image x:Name="TritangleDown" Visibility="Collapsed" Source="/Images/Map/下向箭头.png"/>
                            <Image x:Name="TritangleRight" Visibility="Collapsed" Source="/Images/Map/右向箭头.png"/>

                            <Button x:Name="ButtonDaLian"  Margin="0,0,0,10" BorderThickness="0"  Height="75" Width="389" Click="ButtonDaLian_Click">
                                <Grid Width="390" >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="75"/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="43"/>
                                    </Grid.ColumnDefinitions>
                                    <Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Source="/Images/Map/火车.png" Margin="0"/>
                                    <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Foreground="White" Text="大连火车站" FontSize="45" Margin="10,0,0,0"/>
                                    <Image x:Name="ImageDaLian" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="2"  Width="35" Source="/Images/Map/右向箭头.png"/>
                                </Grid>
                            </Button>

                            <Button Visibility="Collapsed" x:Name="BDTaxi" BorderThickness="0" Width="389">
                                <TextBlock HorizontalAlignment="Left" FontSize="35" Text="  出租车" Width="389"/>
                            </Button>
                        </StackPanel>
                    </ScrollViewer.Content>
                </ScrollViewer>

在后台代码MainPage.xaml.cs

public partial class MainPage : PhoneApplicationPage

中添加一个bool变量IsTouch，设为false，此变量是用来判断button是否被点击，从而使button做出不同的反应。此处button不点击右侧的箭头指向右，点击后箭头指向下，同时BDTaxi的可见性由不可见变为可见。

再处理ButtonDaLian的Click事件

 

  private void ButtonDaLian_Click(object sender, RoutedEventArgs e)
      {
         if (IsTouch == false)
         {
            IsTouch = true;
            BDTaxi.Visibility = Visibility.Visible;
            ImageDaLian.Source = TritangleDown.Source;
         }
         else
         {
            IsTouch = false;
            BDTaxi.Visibility = Visibility.Collapsed;
            ImageDaLian.Source = TritangleRight.Source;
         }
      }

 

到此为止，首页的基本效果就做出来了。

总结一下：我们通过将应用标题替换成图片个性化了标题，构造了一个复合button，左边用来显示与button功能有关的图片，右边的箭头可以通过button的是否点击显示不同的箭头方向（实际上是两张不同的图片）。大家可以去Windows phone 的商店里搜索新生助手去下载一下体验一下这个应用的设计，功能估计大家用不上。http://www.windowsphone.com/zh-cn/store/app/%E6%96%B0%E7%94%9F%E5%8A%A9%E6%89%8B/d2f242a9-968c-4e7a-9b7c-1bef203c6d24

实际的应用还用blend处理了button的点击效果，边界大小等等，这里不再赘述，有兴趣的可以自学一下。

下一讲将向大家介绍新生助手应用中用到的storyboard和动态磁帖设计，通过它们可以制作一些很好的动画效果。