WindowsPhone 8&8.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:PhoneApplicationPage
    xmlns="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，我下一节会重新给代码的！

我的效果：

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