功能需求分析:

1.  为到达学院的新生指路,给出所有路线,并给出必要提示;

2.  对学院建筑进行介绍;

3.  对学院周边环境(交通、购物、银行等)进行介绍;

4.  必要的应用设置

总体设计:

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

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

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

二.

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

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

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

05-11 17:54