BITED-Windows8应用开发学习札记之二：Win8应用常用视图设计

　　感觉自我表述能力有欠缺，技术也不够硬，所以之后的Windows8应用开发学习札记的文章就偏向于一些我认为较难的地方和重点了多有抱歉。

　　上节课是入门，这节课就已经开始进行视图设计了。

 

　　Windows应用的三种常用的数据展示控件：FlipView、ListView和 GridView。

　　FlipView是用来显示集合数据的控件，用户可以点击上/下或者左/右按钮实现子窗口间的切换。

　　值得一提的是包括后面要介绍的两个控件，这三个均继承自ItemsControl类。但需要注意的是：不要使用FlipView来呈现大型的集合。

　　ListView最大的特点是纵向显示数据，故切换到Snap View时一般都用该控件显示。

　　GridView则用来横向显示数据。

　　

　　首先，大家先新建一个项目（在C#中找到Windows应用商店，然后选择GridView控件模版新建），然后在出现的界面中介绍下解决方案管理器中各文件的作用：

　　Properties 默认包含：AssemblyInfo.cs（集合信息类）
　　References 默认包含：.NET for Windows Store apps和 Windows两个命名空间 Assets Logo.png（大图标）、SmaIILLogo.png（小图 标）、SplashScreen.png（初始屏幕图）、 StoreLogo（用于Windows商店图标）

　　Common 默认包含：StandardStyles.xaml（包含XAML样 式）

　　App.xaml 应用中全局资源的处理
　　App1_Temporar yKey.pfx 项目源证书文件
　　MainPage.xaml 默认应用启动主页面
　　Package.appxm anifest 用于描述Windows应用包，应用清单文件

 

　　练习一：通过ItemTemplate来调整图标大小。

　　提示：打开public GroupedItemsPage.xaml查找ItemsTemplate发现如下代码：

1 ItemTemplate="{StaticResource Standard250x250ItemTemplate}"

　　通过复制Standard250x250ItemTemplate在StandardStyles中找到如下代码：

 1 　　<DataTemplate x:Key="Standard250x250ItemTemplate">
 2         <Grid HorizontalAlignment="Left" Width="250" Height="250">
 3             <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
 4                 <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
 5             </Border>
 6             <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
 7                 <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
 8                 <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
 9             </StackPanel>
10         </Grid>
11     </DataTemplate>

　　即可通过修改Width和Height来改变应用界面的图标大小。

 

　　　　

　　练习二：图标默认为先排竖行再排横行，尝试着修改排列顺序。

　　

　　提示：在GroupedItemsPage.xaml中搜索GroupStyle.Panel，得到如下代码：

1<GroupStyle.Panel>
2     <ItemsPanelTemplate>
3         <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
4     </ItemsPanelTemplate>
5 </GroupStyle.Panel>

　　其中Orientation即表示排列方式，修改即可。以下为一种方案：

1<GroupStyle.Panel>
2     <ItemsPanelTemplate>
3         <VariableSizedWrapGrid Orientation="Horizontal" Margin="0,0,80,0"/>
4     </ItemsPanelTemplate>
5 </GroupStyle.Panel>

　　

　　

 

　　练习三：修改应用界面应用名称

　　提示：在App.xaml中找到如下代码并把DailyExercise20130827改为自己想要的名字即可。

1 <x:String x:Key="AppName">DailyExercise20130827</x:String>

 

　　练习四：修改图标图片、背景图片等操作

　　提示：图片文件均存在Assets中。

　　我的代码（仅提供参考）：在App.xaml中添加如下第三行代码

1             <x:String x:Key="AppName">Enjoy Yourself</x:String>
2             
3             <ImageBrush x:Key="GridImageBrush" ImageSource="/Assets/beijing.jpg" />

　　然后到GroupedItemsPage.xaml中在Grid Style中添加Background="{StaticResource GridImageBrush}即可。

 

　　练习五：修改默认图标

　　提示：在Package.appxmanifest中设置。

 

Copyright ©2013 BITED.All rights reserved.

　　

posted @ 2013-08-27 22:49  BITED  阅读(301)  评论(0)  编辑  收藏  举报