您的位置:首页 > 其它

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

2014-11-04 22:23 169 查看
        学校的家园网客户端没有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>

效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  wp8 界面 wp xaml