WindowsPhone 88.1 高仿《每日一文》之创新从模仿开始

        自己一直用着Nokia手机，Windows Phone8也是自己开发软件的第一个平台，最近由于最近参加一个比赛才转向Android的学习，同时为了完成我的移动开发大统一梦想，iOS学习也是迟早的事了，重新拿起WindowsPhone开发是由于最近发现了一些开起来很舒服的软件，我觉得WindowsPhone上也可以开发出很独特的软件，为了练手，决定开始我的高仿《每日一文》系列，我认为创新从模仿开始，借鉴优秀的技术为我所用，其实任何行业的学习都是这样的一个过程。扯远了。。开始！

        首先介绍一下《每日一文》应用（额，不是打广告，模仿人家好歹要感谢感谢啦 o(0_0)o 。。）

“每日一文”本身是一个有声阅读网站：http://meiriyiwen.com/  网站非常简洁，分为三个页面：文章、书架、声音，网站自己有官方的iOS和Android客户端。但是酷（苦）毙（bi*）的WindowsPhone用户又被果断抛弃了，这就有了本文要模仿的非官方的《每日一文》。先来欣赏一下原作。

        怎么样，很精简的界面吧，纯WP风格，下边是日间模式，其实有些动态效果我这里是列不出来的，需要亲自体验一下才知道。个人认为此应用的WP风格界面非常不错。所以我打算以此为目标范本，进行一次高仿实战，让我们从XAML界面开始吧！

分析：

一、全局

-1.此主页应用采用全景应用（Panorama）布局。分为四个项目（panoramaItem）：文章、书架、声音、其他。

-2.没有使用全景标题。“每日一文的logo”不是全景标题，全景标题会随着界面的转移而有不同程度的偏移，而原作中的logo一直固定不动。故是一个存在于panorama之外的模块，可能是一个Grid或是Vertical布局的StackPanel。

-3.panoramaItem的标题Header是自定义的样式，因为默认Style的字体比原作的稍大。

-4.底部的ApplicationBar就不用说了吧，这个控件再8.1里改了名称，换汤不换药，就先不提了。

二、“文章”页：

-1.标题自定义，包括了文章的标题，文章的标题为一个Rectangle和两个TextBlock。

-2.下部的文章内容我们暂且认为它是一个嵌入ScrollerView的TextBlock吧，但实际上我之后发现TextBlock由于系统限制不能展示过多的文字。我们先把它用做TextBlock吧。解决方法下节再分析。

三、“书架”页

-1.LongListSelector和自定义的ItemTemplate。

-2.自定义的ItemTemplate分左右两部分，两部分内容一样，位置不同，都是Grid=Image+Rectangle+TextBlock+TextBlock。

四、“声音”页

-1.LongListSelector。

-2.ItemTemplate->Grid=Image+Rectangle+TextBlock+Rectangle+TextBlock+TextBlock.

-3.为了有点击效果，我用了自定义的tilttable继承自Grid。这个先不说，大家只管当作Grid就行了。

五、“其他”页

-1.LongListSelector。

-2.ItemTemplate->Grid=Rectangle+TextBlock+TextBlock。

好了，分析就到这里。激动的时刻即将到来！马上上代码---->

代码：

<phone:PhoneApplicationPagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"xmlns:local="clr-namespace:PanoramaApp3"x:Class="PanoramaApp3.MainPage"mc:Ignorable="d"d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"FontFamily="{StaticResource PhoneFontFamilyNormal}"FontSize="{StaticResource PhoneFontSizeNormal}"SupportedOrientations="Portrait"  Orientation="Portrait"><!--自定义Panorama的Header样式--><phone:PhoneApplicationPage.Resources><Style x:Key="HeadText" TargetType="TextBlock"><Setter Property="FontSize" Value="55"/><Setter Property="Foreground" Value="#FFBDBDBD"/></Style></phone:PhoneApplicationPage.Resources><!--界面最底部的ApplicationBar--><phone:PhoneApplicationPage.ApplicationBar><shell:ApplicationBar x:Name="AppBar" Opacity="1" IsMenuEnabled="True" BackgroundColor="#FF38344D"><!--图形按钮Bar--><shell:ApplicationBar.Buttons><shell:ApplicationBarIconButton x:Name="share" IconUri="/Assets/AppBar/share.png" Text="分享" /><shell:ApplicationBarIconButton x:Name="date" IconUri="/Assets/AppBar/feature.calendar.png" Text="选择日期"/><shell:ApplicationBarIconButton x:Name="refresh" IconUri="/Assets/AppBar/refresh.png" Text="随机文章"/><shell:ApplicationBarIconButton x:Name="addto" IconUri="/Assets/AppBar/favs.addto.png" Text="随机文章"/></shell:ApplicationBar.Buttons><!--菜单列表Bar--><shell:ApplicationBar.MenuItems><shell:ApplicationBarMenuItem x:Name="today" Text="今日文章" /><shell:ApplicationBarMenuItem x:Name="light" Text="日间模式"  /><shell:ApplicationBarMenuItem x:Name="shareto" Text="邮件分享" /><shell:ApplicationBarMenuItem x:Name="sharetoWeChat" Text="分享到微信"/><shell:ApplicationBarMenuItem x:Name="tell" Text="朗读文章"/></shell:ApplicationBar.MenuItems></shell:ApplicationBar></phone:PhoneApplicationPage.ApplicationBar><!--LayoutRoot 是包含所有页面内容的根网格--><Grid Background="#FF424A66"><!--位于最上面的Logo--><StackPanel Orientation="Horizontal" Margin="15,8,0,0" Height="30" VerticalAlignment="Top"><Grid Width="30" Height="30"><Image Source="/Assets/AppBar/logo.jpg" Stretch="Fill"/></Grid><TextBlock Text="每日一文"  Margin="5,0,0,0" Foreground="#FFFDFDFD"/></StackPanel><!--Panorama 控件--><phone:Panorama Margin="0,50,0,0" ><!--Panorama 项目一--><phone:PanoramaItem Header="文章"><!--自定义PanoramaItem的Header--><phone:PanoramaItem.HeaderTemplate><DataTemplate><StackPanel><TextBlock  Text="{Binding}" Style="{StaticResource HeadText}"/><StackPanel Orientation="Horizontal" Margin="0,8,0,0"><Rectangle Width="10" Height="70" Fill="Red" Margin="0,0,5,0"/><StackPanel><TextBlock FontSize="30" Text="经历过晚年的孩子" Foreground="#FFBFBFE6"/><TextBlock FontSize="20" Text="山田咏美" Foreground="#FFBDBDA3"/></StackPanel></StackPanel></StackPanel></DataTemplate></phone:PanoramaItem.HeaderTemplate><ScrollViewer VerticalScrollBarVisibility="Auto"  Margin="0,-20,0,0"><TextBlock  Text="我曾经历过晚年。虽然这种说法听起来很奇怪，但每当想到究竟应该怎样形容那几个月时，我还是觉得只有”晚年“这个词最合适。事情发生在我随父母到姨妈家去玩的那个暑假。当时我只有10岁，那年夏天，天气闷热，我觉得很无聊。无聊，总是让我学到不少东西。我要么把凉茶倒进玻璃杯，加上冰块，观察杯子外面的水珠怎样越变越大，最后流向下边；要么为难挨的酷暑而悲伤。每天都是这样消磨着时间。姨妈家的四周全是树林，我常在里边转悠，尤其喜欢去触摸那些还带着粉的嫩蘑菇和小河边成群的蜻蜒。母亲和她好久没见面的姐姐像是有说不完的话，根本顾不上我；父亲则只顾跟姨夫下围棋，看也不看我一眼。妹妹又跟表妹一起玩着小孩子的游戏，只有我一个人被晾在一边。我尽情地享受着被众人抛弃的心情。我有时倒喜欢这样，就是说，我是个有点怪的孩子。" FontSize="30" TextWrapping="Wrap"/></ScrollViewer></phone:PanoramaItem><!--Panorama 项目二--><phone:PanoramaItem Header="书架" ><!--自定义PanoramaItem的Header--><phone:PanoramaItem.HeaderTemplate><DataTemplate><TextBlock Text="{Binding}" Style="{StaticResource HeadText}"/></DataTemplate></phone:PanoramaItem.HeaderTemplate><phone:LongListSelector Margin="0,-38,-22,2"  ItemsSource="{Binding Items}"><!--自定义LongListSelector的Item--><phone:LongListSelector.ItemTemplate><DataTemplate ><StackPanel Orientation="Horizontal"><local:tilttable  Height="280" Width="200" HorizontalAlignment="Left" Margin="5"><Grid toolkit:TiltEffect.IsTiltEnabled="True"><Image Source="/Assets/AppBar/book1.jpg" Stretch="Fill"/><StackPanel Background="#80000000"  VerticalAlignment="Bottom"><TextBlock Text="马宗融先生的时间观念" FontSize="30"  TextWrapping="Wrap"/><TextBlock Text="老舍" Foreground="#c0FFFFFF"/></StackPanel></Grid></local:tilttable><local:tilttable  Height="280" Width="200" HorizontalAlignment="Left" Margin="5"><Grid toolkit:TiltEffect.IsTiltEnabled="True"><Image Source="/Assets/AppBar/book2.jpg" Stretch="Fill"/><StackPanel Background="#80000000"  VerticalAlignment="Bottom"><TextBlock Text="旁若无人" FontSize="30"  TextWrapping="Wrap"/><TextBlock Text="梁实秋" Foreground="#c0FFFFFF"/></StackPanel></Grid></local:tilttable></StackPanel></DataTemplate></phone:LongListSelector.ItemTemplate></phone:LongListSelector></phone:PanoramaItem><!--Panorama 项目三--><phone:PanoramaItem Header="声音"><phone:PanoramaItem.HeaderTemplate><DataTemplate><TextBlock Text="{Binding}" Style="{StaticResource HeadText}"/></DataTemplate></phone:PanoramaItem.HeaderTemplate><phone:LongListSelector Margin="0,-38,0,2" ItemsSource="{Binding Items}"><!--自定义LongListSelector的Item--><phone:LongListSelector.ItemTemplate><DataTemplate><!--使用自定义的Grid--><local:tilttable  Margin="12,2,0,4" Height="200"><!--使用TiltEffe效果--><Grid toolkit:TiltEffect.IsTiltEnabled="True"><Image Stretch="Fill" Source="/Assets/AppBar/308.jpg" /><Rectangle Width="80" Height="40" HorizontalAlignment="Left" VerticalAlignment="Top" Fill="#ff8DA8F1"/><TextBlock Text="308期" Width="80" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,5"/><Rectangle Height="60" VerticalAlignment="Bottom" Fill="#80000000"/><TextBlock Text="教堂与坟墓"  FontSize="25" VerticalAlignment="Bottom" Margin="0,23"/><TextBlock Text="作者：林清玄    主播：含鑫" VerticalAlignment="Bottom" Foreground="#A0FFFFFF"/></Grid></local:tilttable></DataTemplate></phone:LongListSelector.ItemTemplate></phone:LongListSelector></phone:PanoramaItem><!--Panorama 项目四--><phone:PanoramaItem Header="其他"><phone:PanoramaItem.HeaderTemplate><DataTemplate><TextBlock Text="{Binding}" Style="{StaticResource HeadText}"/></DataTemplate></phone:PanoramaItem.HeaderTemplate><phone:LongListSelector x:Name="Other_list"  Margin="0,-38,0,0" ItemsSource="{Binding Items}" ><phone:LongListSelector.ItemTemplate><DataTemplate><local:tilttable Margin="5"><Grid toolkit:TiltEffect.IsTiltEnabled="True"><Grid.ColumnDefinitions><ColumnDefinition Width="8"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Rectangle x:Name="Other_rectangle" Fill="{Binding color}"/><StackPanel Grid.Column="1" Margin="5,0,0,0"><TextBlock x:Name="Other_option" Text="{Binding option}" FontSize="40" Foreground="#FFBDBDBD" /><TextBlock x:Name="Other_content" Text="{Binding content}"  FontSize="20" Foreground="#FFBDBDBD" TextWrapping="Wrap"/></StackPanel></Grid></local:tilttable></DataTemplate></phone:LongListSelector.ItemTemplate></phone:LongListSelector></phone:PanoramaItem></phone:Panorama></Grid>
</phone:PhoneApplicationPage>

这个和上面描述的可能稍微有点不同，因为很多TextBlock的内容是同Binding绑定的，小伙伴只管把text的内容换成随便的文字就可以看到内容了，这个博客写得有些晚，用的是稍微改进过一点的代码，小伙伴就甭追究这些细节了o(^o^)o，我下一节会重新给代码的！

我的效果：

有没有一点小像呢，哈哈，支持就点个赞吧。。