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

来源:转载

最近自学了一点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> 

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

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

本文来自王祖康的博客,原文地址:http://www.cnblogs.com/wzk89/archive/2011/06/03/2071893.html


分享给朋友:
您可能感兴趣的文章:
随机阅读: