WindowsPhone7开发简单豆瓣网应用程序之界面设计(续)-阿里云开发者社区

开发者社区> 技术小胖子> 正文

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

简介:
+关注继续查看



我们需要修改两个地方就可以达到如图所示效果:




 接着该是主界面设计啦,核心代码如下:

<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><span style="font-family: verdana, Arial, Helvetica, sans-serif; line-height: 21px; white-space: normal; font-size: 14px;">                </span>
效果图:

下面是三个详细信息展示页面核心的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><span style="font-family: verdana, Arial, Helvetica, sans-serif; line-height: 21px; white-space: normal; font-size: 14px;">                        </span>
(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>
好了!程序的主要界面设计就完成啦!但是有些细节这里没有一一列出,比如背景图片的设置,图表的设置等。我将在下一篇博文中列出程序主要代码文件。




 本文转自 王祖康 51CTO博客,原文链接:http://blog.51cto.com/wzk89/580496,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Windows10 UWP开发 - 响应式设计
原文:Windows10 UWP开发 - 响应式设计   Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率、宽高比的Windows10 Universal App布局时的可行方式与小技巧。
1271 0
菜鸟学Windows Phone 8开发(4)——设置应用程序样式
原文 菜鸟学Windows Phone 8开发(4)——设置应用程序样式 本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发  本文地址:http://channel9.
899 0
21119
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载