WindowsPhone7开发简单豆瓣网应用程序之界面设计
2011-06-03 14:18 王祖康 阅读(2175) 评论(7) 编辑 收藏 举报WindowsPhone7开发简单豆瓣网应用程序之界面设计
最近自学了一点WindowsPhone7的知识，自己就利用豆瓣网API开发了一个小的搜索程序。好了！先看看程序运行效果吧！
（启动界面）
（主界面）
（输入搜索后显示查询信息）
（查看详细信息）
当我准备写这个小的应用程序时，对WindowsPhone7一点都不了解！呵呵！幸亏我以前自学过Silverlight，花了五天的时间做了这个程序，边学习边做！感触颇深！下面就把这个程序分享给大家吧！
首先介绍一下我开发这个应用所用到的工具吧！1，VisualStudio2010；2，VisualStudio2010 Express for WindowsPhone7；3，Expression Blend 4.
界面设计我是用Expression Blend 4做的。学习过Silverlight的童鞋，应该对这个不陌生吧！这个豆瓣程序的界面应该很简单。下面是这个几个页面xaml代码分享给大家：
首先我们需要用VisualStudio2010 Express for WindowsPhone7新建一个WindowsPhonePivotApplication的程序。
开始界面：
这里主要设置的是应用程序的图表和标题的更改！在项目文件中找到：WMAAppManifest.xml
打开这个文件。
我们需要修改两个地方就可以达到如图所示效果：
接着该是主界面设计啦，核心代码如下：
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<Grid.Background>
<ImageBrush ImageSource="Images/Backgroud.jpg" Opacity=".5" />
</Grid.Background>
<!--Pivot Control-->
<controls:Pivot Title="豆瓣搜索" Foreground="#FFEFF0EF" Background="#00E28A8A">
<!--Pivot item one-->
<controls:PivotItem Header="搜书" x:Name="pi_Book">
<Grid x:Name="ContentPane1" Grid.Row="1" Margin="12,0,12,0">
<TextBox Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="txb_book" VerticalAlignment="Top" Width="299" />
<Button Content="搜索" Height="72" HorizontalAlignment="Left" Margin="305,6,0,0" Name="bt_Book" VerticalAlignment="Top" Width="116" Click="bt_Book_Click"/>
<ListBox Height="434" HorizontalAlignment="Left" Margin="12,67,0,0" Name="lb_Book" VerticalAlignment="Top" Width="409" ItemTemplate="{StaticResource ItemTemplate}" SelectionChanged="lb_Book_SelectionChanged" />
</Grid>
</controls:PivotItem>
<!--Pivot item two-->
<controls:PivotItem Header="搜乐" x:Name="pi_Music">
<Grid x:Name="ContentPane2" Grid.Row="1" Margin="12,0,12,0">
<TextBox Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="txb_Music" VerticalAlignment="Top" Width="299" />
<Button Content="搜索" Height="72" HorizontalAlignment="Left" Margin="305,6,0,0" Name="bt_Music" VerticalAlignment="Top" Width="116" Click="bt_Music_Click" />
<ListBox Height="434" HorizontalAlignment="Left" Margin="12,67,0,0" Name="lb_Music" VerticalAlignment="Top" Width="409" ItemTemplate="{StaticResource ItemTemplate}" SelectionChanged="lb_Music_SelectionChanged" />
</Grid>
</controls:PivotItem>
<!--Pivot item three-->
<controls:PivotItem Header="搜影" x:Name="pi_Video">
<Grid x:Name="ContentPane3" Grid.Row="1" Margin="12,0,12,0">
<TextBox Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="txb_Video" VerticalAlignment="Top" Width="299" />
<Button Content="搜索" Height="72" HorizontalAlignment="Left" Margin="305,6,0,0" Name="bt_Video" VerticalAlignment="Top" Width="116" Click="bt_Video_Click"/>
<ListBox Height="434" HorizontalAlignment="Left" Margin="12,67,0,0" Name="lb_Video" VerticalAlignment="Top" Width="450" SelectionChanged="lb_Video_SelectionChanged">
</ListBox>
</Grid>
</controls:PivotItem>
</controls:Pivot>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/App.Blog.png" Text="搜书"/>
<shell:ApplicationBarIconButton IconUri="/Images/App.Digg.png" Text="搜乐"/>
<shell:ApplicationBarIconButton IconUri="/Images/SearchWhite.png" Text="搜影"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
效果图：
下面是三个详细信息展示页面核心的xaml代码：
（1） 搜书页面（BookPage.xaml）：
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
<StackPanel >
<StackPanel.Background>
<ImageBrush ImageSource="../Images/Backgroud.jpg" Opacity=".5" />
</StackPanel.Background>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#FF02FF01"/>
<TextBlock x:Name="PageTitle" Margin="9,9,5,0" FontSize="32" Foreground="#FF02FF01"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Transparent">
<!--<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >-->
<Image HorizontalAlignment="Right" Height="200" Margin="0,24,11,0" VerticalAlignment="Top" Width="200" x:Name="Image_Book"/>
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,6,0,0" Name="tb_BookName" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="78,6,0,0" Name="tb_BookNameShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,42,0,0" Name="tb_Director" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,42,217,0" Name="tb_DirectorShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="11,78,0,0" Name="tb_Price" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,114,0,0" Name="tb_Publisher" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,78,217,0" Name="tb_PriceShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,114,217,0" Name="tb_PublisherShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,216,0,0" Name="tb_Summary" VerticalAlignment="Top" Width="94" Foreground="#FF00FFDC" />
<TextBlock Height="auto" HorizontalAlignment="Left" Margin="12,252,0,0" Name="tb_SummaryShow" VerticalAlignment="Top" Width="438" CacheMode="BitmapCache" TextWrapping="Wrap" Foreground="#FF00FFDC" />
<StackPanel Height="auto" x:Name="sv_Show">
<TextBlock Height="30" HorizontalAlignment="Left" Margin="0,0,0,0" Name="tb_AuthorInfo" VerticalAlignment="{Binding ElementName=tb_SummaryShow}" Width="94" Foreground="#FF00FFDC" />
<TextBlock Height="Auto" HorizontalAlignment="Left" Margin="0,0,0,0" Name="tb_AuthorInfoShow" Width="438" CacheMode="BitmapCache" TextWrapping="Wrap" Foreground="#FF00FFDC" />
</StackPanel>
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,162,0,0" Name="tb_Country" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,162,217,0" Name="tb_CountryShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<!--</ScrollViewer>-->
</Grid>
</Grid>
</StackPanel>
</ScrollViewer>
（14） 搜乐页面（MusicPage.xaml）：
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
<ScrollViewer.Background>
<ImageBrush ImageSource="../Images/Backgroud.jpg" Opacity=".5" />
</ScrollViewer.Background>
<StackPanel >
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#FF02FF01"/>
<TextBlock x:Name="PageTitle" Margin="9,9,5,0" FontSize="32" Foreground="#FF02FF01"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Transparent">
<!--<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >-->
<Image HorizontalAlignment="Right" Height="200" Margin="0,26,9,0" VerticalAlignment="Top" Width="171" x:Name="Image_Music"/>
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,6,0,0" Name="tb_MusicName" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="78,6,0,0" Name="tb_MusicNameShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,42,0,0" Name="tb_Director" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,42,217,0" Name="tb_DirectorShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="11,78,0,0" Name="tb_Singer" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,114,0,0" Name="tb_Time" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,78,217,0" Name="tb_SingerShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,114,217,0" Name="tb_TimeShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="11,223,0,0" Name="tb_Summary" VerticalAlignment="Top" Width="94" Foreground="#FF00FFDC" />
<TextBlock Height="Auto" HorizontalAlignment="Left" Margin="9,250,0,0" Name="tb_SummaryShow" VerticalAlignment="Top" Width="438" CacheMode="BitmapCache" Grid.Row="2" Grid.Column="2" TextWrapping="Wrap" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,162,0,0" Name="tb_Country" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,162,217,0" Name="tb_CountryShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<!--</ScrollViewer>-->
</Grid>
</Grid>
</StackPanel>
</ScrollViewer>
（15） 搜影页面（VideoPage.xaml）：
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
<StackPanel >
<StackPanel.Background>
<ImageBrush ImageSource="../Images/Backgroud.jpg" Opacity=".5" />
</StackPanel.Background>
<!--<StackPanel.Background>
</StackPanel.Background>-->
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#FF02FF01"/>
<TextBlock x:Name="PageTitle" Margin="9,9,5,0" FontSize="32" Foreground="#FF02FF01"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Transparent">
<!--<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >-->
<Image HorizontalAlignment="Right" Height="200" Margin="0,23,43,0" VerticalAlignment="Top" Width="200" x:Name="Image_Video"/>
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,6,0,0" Name="tb_VideoName" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="78,6,0,0" Name="tb_VideoNameShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,42,0,0" Name="tb_Director" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,42,217,0" Name="tb_DirectorShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="11,78,0,0" Name="tb_Language" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,114,0,0" Name="tb_Time" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,78,217,0" Name="tb_LanguageShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,114,217,0" Name="tb_TimeShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,286,0,0" Name="tb_Summary" VerticalAlignment="Top" Width="94" Foreground="#FF00FFDC" />
<TextBlock Height="Auto" HorizontalAlignment="Left" Margin="9,322,0,0" Name="tb_SummaryShow" VerticalAlignment="Top" Width="438" CacheMode="BitmapCache" Grid.Row="2" Grid.Column="2" TextWrapping="Wrap" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,162,0,0" Name="tb_Country" VerticalAlignment="Top" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,162,217,0" Name="tb_CountryShow" VerticalAlignment="Top" Width="161" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,216,0,0" Name="tb_Cast" VerticalAlignment="Top" Width="60" Foreground="#FF00FFDC" />
<TextBlock Height="30" HorizontalAlignment="Right" Margin="0,216,249,0" Name="tb_CastShow" VerticalAlignment="Top" Width="129" Foreground="#FF00FFDC" />
<!--</ScrollViewer>-->
</Grid>
</Grid>
</StackPanel>
</ScrollViewer>
好了！程序的主要界面设计就完成啦！但是有些细节这里没有一一列出，比如背景图片的设置，图表的设置等。
我将在下一篇博文中列出程序主要代码文件。
