备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

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



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




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

<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 ，如需转载请自行联系原作者
文章标签：
负载均衡
Shell
相关实践学习
部署高可用架构
本场景主要介绍如何使用云服务器ECS、负载均衡SLB、云数据库RDS和数据传输服务产品来部署多可用区高可用架构。
负载均衡入门与产品使用指南
负载均衡（Server Load Balancer）是对多台云服务器进行流量分发的负载均衡服务，可以通过流量分发扩展应用系统对外的服务能力，通过消除单点故障提升应用系统的可用性。 本课程主要介绍负载均衡的相关技术以及阿里云负载均衡产品的使用方法。
技术小胖子
目录
相关文章
码农工程师
|
移动开发 JSON JavaScript
Day 10： PhoneGap —— 开发手机应用如此简单
我们发现了比较有趣的系列文章《30天学习30种新技术》，准备翻译，一天一篇更新，年终礼包。下面是第10天的内容。 今天又是“30天学习30种新技术”的一天。长期以来，我觉得手机开发很恐怖，大部分应用都没有商业模式。事实上，编写手机应用从来都不能让我兴奋。然而，考虑到手机领域的飞速发展，以及更多的人通过手机而不是桌面访问互联网，我决定尝试下手机开发。我的手机开发之旅将从PhoneGap 起步。
码农工程师
487 0
Day 10： PhoneGap —— 开发手机应用如此简单
李一花
|
Android开发 UED iOS开发
安卓设计师不容错过的15款实用UI界面设计工具
最近刮起了一股“养蛙儿子”的风潮。独特的UI设计、萌萌的画风和简洁的用户体验吸引了大批的用户。在不少人直呼“哇，我的蛙儿子好可爱，好萌”的背后，我们可以看到一个高质量的UI设计对于提高应用下载量有着非常重要的作用。
李一花
2390 0
技术小阿哥
|
前端开发
OneNote2007的另类体验像Google Earth一样浏览笔记
技术小阿哥
1195 0
最美的回忆
|
存储 API Android开发
开发Adobe AIR移动应用程序的考虑事项
最美的回忆
1355 0
技术小胖子
|
XML API 数据格式
WindowsPhone7开发简单豆瓣网应用程序之主页面功能实现
技术小胖子
871 0
技术小胖子
|
API
WindowsPhone7开发简单豆瓣网应用程序之界面设计
技术小胖子
928 0
技术小牛人
|
视频直播 开发者
WebCast收听辅助工具介绍
技术小牛人
1050 0
余二五
|
自然语言处理
Office 2010的贴心功能：迷你翻译器
余二五
1029 0
技术小牛人
|
iOS开发
疯狂ios讲义之开发游戏界面
技术小牛人
1155 0
行者武松
|
Web App开发 JavaScript Java
程序员远程斗代码！网页版Skype推出内置实时代码编辑器
行者武松
1448 0

热门文章

最新文章

  • 1
    Flink CDC 3.0 正式发布，详细解读新一代实时数据集成框架
  • 2
    New Product Launch: Alibaba Cloud ElasticSearch
  • 3
    OSS回源的几种方式和应用场景
  • 4
    第176天：页面优化
  • 5
    java多线程编程
  • 6
    配置GoldenGate源端Manager参数
  • 7
    企业逐渐采用移动办公、物联网及软件定义网络策略
  • 8
    《OpenCV图像处理》——2.8　小结
  • 9
    Docker误区+技巧+转换关系
  • 10
    2014秋C++第19周 补充代码 哈希法的存储与查找
  • 1
    mysql 处理科学计数法的字段
    41
  • 2
    ❤Nodejs 第八章（操作本地数据库优化查询为分页查询方式）
    38
  • 3
    基于CH32V103的多功能推杆设计
    36
  • 4
    分布式事务：构建可靠分布式系统的基石
    29
  • 5
    Raft算法：分布式一致性领域的璀璨明珠
    38
  • 6
    Paxos算法：分布式一致性的基石
    27
  • 7
    云效产品使用报错问题之gitlab库导入到云效失败如何解决
    34
  • 8
    软件体系结构 - 复杂指令集架构 (CISC)
    26
  • 9
    云效产品使用报错问题之流水线发布uniapp的应用失败如何解决
    27
  • 10
    云效产品使用报错问题之不知道云效api需要什么权限如何解决
    25

    • 相关课程

    更多
  • 移动Web前端开发
  • C++ 入门教程开发文档

    • 相关电子书

    更多
  • APICloud服务CAF开发者
  • D2前端工程下一站 IDE ——上坡&吭头
  • D2前端工程下一站 IDE

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 收银台的场景化界面实践
  • 制作开放场景
  • 搭建Magento电子商务网站
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）