自己一直用着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,我下一节会重新给代码的!
我的效果:
有没有一点小像呢,哈哈,支持就点个赞吧。。