[Windows 8 App]内容编排的控件

[Windows 8 App]内容编排的控件-----ScrollViewer、SemanticZoom


ScrollViewer控件

ScrollViewer控件包含一个水平滚条、一个垂直滚条和一个可以滚动的内容显示区域

当放置在ScrollViewer控件中的内容超过边界时,就会显示水平和垂直的滚动条

透过滚动条就可以看到隐藏内容

ScrollViewer的常用属性

属性 属性介绍
VerticalScrollBarVisibility 设置垂直滚动条的可见性
HorizontalScrollBarVisibility 设置水平滚动条的可见性
IsEnabled 设置ScrollViewer是否使用滚动条

VerticalScrollBarVisibility和HorizontalScrollBarVisibility的四个属性值

分别是:Auto、Disabled、Hidden和Visible

下面透过范例来说明ScrollViewer

新增一个项目【ScrollViewer】,在【MainPage.xaml】的Grid中输入以下程序:




    
        
            
        
    

设计划面如下:

148

解析【MainPage.xaml】的程序

在Grid中新增一个ScrollViewer的控件

Width设为 700  Height设为 500   HorizontalScrollBarVisibility设为Auto(自动)   VerticalScrollBarVisibility设为 Auto(自动)

然后在ScrollViewer的控件中新增一个TextBlock的控件

Width设为 900   Height设为 600  TextWrapping设为 Wrap(自动换行)  FontSize设为 50(文字大小)

因为TextBlock控件的长度与宽度都大于ScrollViewer控件

所以执行画面就会有滚动的滑条效果

项目的执行结果:

149

SemanticZoom控件

SemanticZoom控件是有相关联的缩小图示和放大图示所组成

缩小图示用来显示内容索引

放大缩图可以用来显示内容的详细消息

使用者可以根据阅读的习惯在这两种图示间自由切换

SemanticZoom的常用属性

属性 属性介绍
IsZoomedInViewActive SemanticZoom控件是否为活动图示
ZoomedinView SemanticZoom控件的放大图示内容
ZoomedOutView SemanticZoom控件的缩小图示内容

SemanticZoom的常用事件

事件 事件介绍
ViewChangeCompleted 图示改变完成是触发
ViewChangeStarted 图示开始发生改变时触发

接下来做一个SemanticZoom的范例

首先,新增一个项目【SemanticZoom】,在项目底下新增一个数据夹【Images】

在【Images】的数据夹下放5张图片,开启【MainPage.xaml】准备写程序

【MainPage.xaml】的程序如下:




    
        
            
                
                
                    
                
            
            
                
                
                    
                        
                        
                        
                        
                        
                                        
                
            
        
    

设计的画面:

150

项目执行后的画面

151

这是缩小的图示画面

152

这是放大的图示画面