WindowsPhone7开发简单豆瓣网应用程序之界面设计

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>

好了！程序的主要界面设计就完成啦！但是有些细节这里没有一一列出，比如背景图片的设置，图表的设置等。

我将在下一篇博文中列出程序主要代码文件。