[windows phone开发]新生助手的开发过程与体会一

功能需求分析：

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

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

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

4．必要的应用设置

总体设计：

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

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

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

二．

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

[windows phone开发]新生助手的开发过程与体会一

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

右击工程名 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更改为你所要应用的图片的位置。

个性化标题

删去

Title="我的应用程序"

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

            <phone:Panorama.Title>

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

            </phone:Panorama.Title>

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

下面就正式进入功能设计

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

 <!--具有文字环绕的单行列表-->

                <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和动态磁帖设计，通过它们可以制作一些很好的动画效果。