wp8 《南昌大学家园资讯》-1-界面

        学校的家园网客户端没有WP版的，好桑心，这说明我们没有好好学习还是对WP没有兴趣？眼看隔壁学校都出WP版的啦，作为软院的当家人怎能坐视不管~

      当然，小汪并没有好高的技术，只是希望从这一次实战中学到更多的东西。

界面部分，当我用手机直接访问家园网首页时感觉整体风格还不错，就先按这个做一个软件的界面吧！

代码：

<phone:PhoneApplicationPage
    x:Class="NcuDay.MainPage"
    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"
    mc:Ignorable="d"
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <!--定义常用字体-->
    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="BlackText" TargetType="TextBlock">
            <Setter Property="FontSize" Value="25"/>
            <Setter Property="Foreground" Value="Black"/>
        </Style>
        <Style x:Key="SmallText" TargetType="TextBlock">
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="Foreground" Value="Black"/>
        </Style>
        <Style x:Key="SmallText_w" TargetType="TextBlock">
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Margin" Value="30,6,0,6"/>
        </Style>
    </phone:PhoneApplicationPage.Resources>
    <!--底部Bar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar x:Name="AppBar" Opacity="1" BackgroundColor="#414146">
            <!--图形按钮Bar-->
            <shell:ApplicationBar.Buttons>
                <shell:ApplicationBarIconButton x:Name="share" IconUri="/Assets/AppBar/share.png" Text="分享" />
                <shell:ApplicationBarIconButton x:Name="talk" IconUri="/Assets/AppBar1/edit.png" Text="评论"/>
            </shell:ApplicationBar.Buttons>
            <!--菜单列表Bar-->
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="light" Text="日间模式"  />
                <shell:ApplicationBarMenuItem x:Name="sharetoWeChat" Text="分享到微信"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="#FFEBECEC">

        <Grid.RowDefinitions>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="30*"/>
        </Grid.RowDefinitions>
        <!--顶部LOGO-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="15,5,0,0">
            <!--<TextBlock Text="南昌大学家园网" Style="{StaticResource BlackText}"/>-->
            <!--<TextBlock Text="www.ncuhome.com" Style="{StaticResource SmallText}"/>-->
            <Image Source="/Assets/ncuhome.png" Stretch="Fill" Height="54" Margin="0,0,224,0"/>
        </StackPanel>
        <!--顶部导航-->
        <Border Grid.Row="1" Background="#414146">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="校园资讯" Style="{StaticResource SmallText_w}"/>
                <TextBlock Text="学生工作" Style="{StaticResource SmallText_w}"/>
                <TextBlock Text="家园社区" Style="{StaticResource SmallText_w}"/>
                <TextBlock Text="生活频道" Style="{StaticResource SmallText_w}"/>
            </StackPanel>
        </Border>
        <!--主要内容部分-->
        <Grid Grid.Row="2">
            <!--具有文字环绕的单行列表-->
            <phone:LongListSelector Margin="0,0,0,0" ItemsSource="{Binding Items}">
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="10,6,0,6">
                            <Grid.Background>
                                <SolidColorBrush Color="{StaticResource PhoneDisabledColor}"/>
                            </Grid.Background>
                            <Grid Margin="10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>
                                <!--图片标题和文字标题-->
                                <StackPanel Orientation="Horizontal" Grid.Row="0">
                                    <Image Source="Assets\picture.jpg" Width="130" Height="100" Margin="5" Stretch="Fill" />
                                    <TextBlock Text="{Binding LineOne}" Width="290" TextWrapping="Wrap" Foreground="Black" FontSize="28" FontWeight="Bold"/>
                                </StackPanel>
                                <!--内容概览-->
                                <TextBlock Grid.Row="1" Foreground="#CF000000" FontSize="20" TextWrapping="Wrap" Text="四临学院消息：10月30日中午，第四临床医学院学生会权益部和心理发展部联合举办了以'回归自主初心，共建四临家园'为主题的签名活动。活动现场......[全文]"/>
                                <!--内容概览发布时间-->
                                <TextBlock Grid.Row="2" Foreground="Gray" FontSize="18" TextWrapping="Wrap" Margin="5,5,0,20" Text="2014/11/04 23:22:11"/>
                            </Grid>
                         </Grid>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

效果：