BITED-Windows8应用开发学习札记之二:Win8应用常用视图设计
2013-08-27 22:49
357 查看
感觉自我表述能力有欠缺,技术也不够硬,所以之后的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发现如下代码:
通过复制Standard250x250ItemTemplate在StandardStyles中找到如下代码:
即可通过修改Width和Height来改变应用界面的图标大小。
练习二:图标默认为先排竖行再排横行,尝试着修改排列顺序。
提示:在GroupedItemsPage.xaml中搜索GroupStyle.Panel,得到如下代码:
其中Orientation即表示排列方式,修改即可。以下为一种方案:
练习三:修改应用界面应用名称
提示:在App.xaml中找到如下代码并把DailyExercise20130827改为自己想要的名字即可。
练习四:修改图标图片、背景图片等操作
提示:图片文件均存在Assets中。
我的代码(仅提供参考):在App.xaml中添加如下第三行代码
然后到GroupedItemsPage.xaml中在Grid Style中添加Background="{StaticResource GridImageBrush}即可。
练习五:修改默认图标
提示:在Package.appxmanifest中设置。
Copyright ©2013 BITED.All rights reserved.
上节课是入门,这节课就已经开始进行视图设计了。
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发现如下代码:
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
通过复制Standard250x250ItemTemplate在StandardStyles中找到如下代码:
<DataTemplate x:Key="Standard250x250ItemTemplate"> <Grid HorizontalAlignment="Left" Width="250" Height="250"> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"> <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/> <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> </StackPanel> </Grid> </DataTemplate>
即可通过修改Width和Height来改变应用界面的图标大小。
练习二:图标默认为先排竖行再排横行,尝试着修改排列顺序。
提示:在GroupedItemsPage.xaml中搜索GroupStyle.Panel,得到如下代码:
<GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/> </ItemsPanelTemplate> 5 </GroupStyle.Panel>
其中Orientation即表示排列方式,修改即可。以下为一种方案:
<GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Horizontal" Margin="0,0,80,0"/> </ItemsPanelTemplate> 5 </GroupStyle.Panel>
练习三:修改应用界面应用名称
提示:在App.xaml中找到如下代码并把DailyExercise20130827改为自己想要的名字即可。
<x:String x:Key="AppName">DailyExercise20130827</x:String>
练习四:修改图标图片、背景图片等操作
提示:图片文件均存在Assets中。
我的代码(仅提供参考):在App.xaml中添加如下第三行代码
<x:String x:Key="AppName">Enjoy Yourself</x:String> <ImageBrush x:Key="GridImageBrush" ImageSource="/Assets/beijing.jpg" />
然后到GroupedItemsPage.xaml中在Grid Style中添加Background="{StaticResource GridImageBrush}即可。
练习五:修改默认图标
提示:在Package.appxmanifest中设置。
Copyright ©2013 BITED.All rights reserved.
相关文章推荐
- BITED-Windows8应用开发学习札记之一:Win8应用开发入门
- BITED-Windows8应用开发学习札记之三:如何在Win8应用中实现数据绑定
- BITED-Windows8应用开发学习札记之四:如何在Win8 应用中实现语义缩放
- Windows8应用开发学习(三)常用控件
- [Win8]Windows8开发入门(三):导航、布局和视图
- 2011年冬斯坦福大学公开课 iOS应用开发教程学习笔记(第四课) Views 视图
- 关于Win8 Metro应用开发的学习步骤
- Palm应用开发之二从Helloworld开始学习Palm开发
- WindowsPhone8 应用开发学习笔记(二) - 界面设计
- Android应用开发学习笔记之列表视图
- 设计并实现一个LogService,应用开发时可以打印log到视图(TextView)中显示
- win8应用开发学习之初体验
- WP7开发平台介绍及开发注意事项【WP7学习札记之二】
- android应用开发常用的一些协议学习
- 斯坦福大学公开课 iOS应用开发教程学习笔记(第四课) Views 视图
- Windows应用开发中常用的设计模式
- Windows8应用开发学习(四)AppBar
- Windows8应用开发学习(二)布局控件篇
- Windows8 Metro 设计与开发-VS11的win8模拟器
- Android应用开发学习笔记之画廊视图