零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异

简介: 原文:零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异 本次要针对Disabled以及Hidden作讨论...
原文: 零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异

本次要针对Disabled以及Hidden作讨论

很多人会把Disabled当成是不显示,因为选单内容有个Visible(翻译为可见or显示)

但其实Disabled是禁用而非不显示,若是想要使之不显示,请使用Hidden作隐藏即可

我想,不显示跟隐藏的意思是雷同的,但与禁用却是相差很远,所以请不要搞混喔~

隐藏与禁用,在实务上使用起来就是有差别!!

差在哪里呢?看下去就知道

?

?

先前在Chapter10有介绍过ScrollViewer的属性以及功能

(回顾请点我)

?

其重点设定的内容为

Auto = 当内容过多时,自动显示bar

Disabled = 禁用bar

Hidden = 隐藏bar

Visible =显示bar

?

本次要针对Disabled以及Hidden作讨论

很多人会把Disabled当成是不显示,因为选单内容有个Visible(翻译为可见or显示)

但其实Disabled禁用而非不显示,若是想要使之不显示,请使用Hidden作隐藏即可

我想,不显示跟隐藏的意思是雷同的,但与禁用却是相差很远,所以请不要搞混喔~

隐藏与禁用,在实务上使用起来就是有差别!!

差在哪里呢?看下去就知道

?

01

延续Ch10的作法,请在ScrollViewer内放入StackPanel,并在StackPanel内放入数个Button

ch36_01.jpg

?

完成後,请全部选取後复制出另一个ScrollViewer,好为我们等等的比较做准备

(下图为还没有设定Hidden以及Disabled属性的状态)

ch36_02.jpg

还没有设定Hidden以及Disabled属性的Xaml如下:

   1: <ScrollViewer x:Name="HiddenScview" Margin="0" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="250" Height="200">
   2:     <StackPanel Background="#FF525252">
   3:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF0029A9"/>
   4:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFA300F3"/>
   5:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF8F002E"/>
   6:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF086A00"/>
   7:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF786800"/>
   8:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFB16100"/>
   9:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="Red"/>
  10:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFFFBC79"/>
  11:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF521E00"/>
  12:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3"/>
  13:     </StackPanel>
  14: </ScrollViewer>
  15: <ScrollViewer x:Name="HiddenScview" Margin="0" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Column="1"  Grid.Row="1"HorizontalAlignment="Center" VerticalAlignment="Center" Width="250" Height="200">
  16:     <StackPanel Background="#FF525252">
  17:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF0029A9"/>
  18:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFA300F3"/>
  19:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF8F002E"/>
  20:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF086A00"/>
  21:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF786800"/>
  22:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFB16100"/>
  23:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="Red"/>
  24:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFFFBC79"/>
  25:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF521E00"/>
  26:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3"/>
  27:     </StackPanel>
  28: </ScrollViewer>
  29:  
  30:  

?

02

点选左边的ScrollViewer後从Properties->Layout->选择Show advanced Properties-> VerticalScrollBarVisibility

可以看到由上至下Disabled 、Auto、Hidden 以及Visible 四种设定

ch36_03.jpg

?

这里,请选择Hidden

?

右边的ScrollViewer请选择Disabled

?

完成後,按下F5试试看到底哪边不一样

附上实作范例,试试看左边跟右边的差异

?

请点击左边ScrollViewer内的Button後,在ScrollViewer内卷动一下滑鼠滚轮

点击右边ScrollViewer内的Button,也在右边的ScrollViewer卷动一下滑鼠滚轮

?

很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页

?

更改为Hidden以及Disabled属性的Xaml如下:

   1: <ScrollViewer x:Name="HiddenScview" Margin="0" ScrollViewer.VerticalScrollBarVisibility="Hidden" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="250" Height="200">
   2:     <StackPanel Background="#FF525252">
   3:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF0029A9"/>
   4:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFA300F3"/>
   5:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF8F002E"/>
   6:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF086A00"/>
   7:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF786800"/>
   8:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFB16100"/>
   9:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="Red"/>
  10:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFFFBC79"/>
  11:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF521E00"/>
  12:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3"/>
  13:     </StackPanel>
  14: </ScrollViewer>
  15: <ScrollViewer x:Name="DisableScview" Margin="0" ScrollViewer.VerticalScrollBarVisibility="Disabled" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="250" Height="200">
  16:     <StackPanel Background="#FF525252">
  17:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF0029A9"/>
  18:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFA300F3"/>
  19:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF8F002E"/>
  20:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF086A00"/>
  21:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FF786800"/>
  22:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="#FFB16100"/>
  23:         <Button Content="请点按钮一下再滚动滑鼠" Margin="5,3" Foreground="Red"/>
  24:         <Button Content="Button" Margin="5,3" Foreground="#FFFFBC79"/>
  25:         <Button Content="Button" Margin="5,3"/>
  26:         <Button Content="Button" Margin="5,3"/>
  27:     </StackPanel>
  28: </ScrollViewer

?

由此可知

虽然看不见ScrollBar,不过设定为Hidden的卷轴使用滑鼠滚轮滚动还是可以看到所有的内容

但是设定为Disabled的卷轴却已经完全没有反应了唷!

?

------------------------------------------------------03/21更新--------------------------------------------------------------

?

为了让大家更了解Disabled 、Auto、Hidden 以及Visible 四种设定间的差异

特别多做了一个四合一的比较:

感谢Ouch的技术协助

拖动Slider更改颜色区块的大小,看出四种设定的差异

Auto = 当内容过多时,才会显示bar

Disabled = 就算内容超过容器大小,也完全禁用bar

Hidden = 隐藏bar ,但可以使用滑鼠滚轮卷动,观看超过容器大小的内容

Visible =不管内容是否有超过容器大小,永远都显示bar

?

很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页

?

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

 

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

 

 

目录
相关文章
零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能
原文:零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能 今天要介绍一个Silverlight Toolkit内好用且在图片展示操作上很常见的元件-「...
1320 0
|
容器
零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」
原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」。
1251 0
|
容器 前端开发
零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」
原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Viewbox」; 以及加码赠送安装扩充元件-「Silverlight Toolkit」。
1583 0
零元学Expression Blend 4 - Chapter 29 ListBox与Button结合运用的简单功能
原文:零元学Expression Blend 4 - Chapter 29 ListBox与Button结合运用的简单功能 本章所讲的是运用ListBox、TextBox与Button,做出简单的列表新增...
1219 0
|
Web App开发 容器
零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」
原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」。
1329 0
零元学Expression Blend 4 &ndash; Chapter 43 如何指定Childwindow PopUp位置
原文:零元学Expression Blend 4 &ndash; Chapter 43 如何指定Childwindow PopUp位置 有网友询问我有关Childwindow是否能指定弹出位置? 其实只...
1275 0
|
容器
零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布...
1291 0
|
容器
零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II
原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析。
1288 0
|
Web App开发
零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题
原文:零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题 最近收到网友Cloud的来信,询问我有关放进PathlistBox的物...
1439 0
|
容器
零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」
原文:零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的乖宝宝-「StackPanel」;及加码赠送「ScrollViewer」的运用。
1080 0

热门文章

最新文章