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

时间：2022-12-24 03:23:34

原文:零元学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

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

?

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

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

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

还没有设定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 四种设定

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

?

这里，请选择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 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异的更多相关文章

  1. 零元学Expression Blend 4 - Chapter 39 虾米&quest;&excl;同款&quest;不同师傅&excl;告诉你Visible、Hidden与Collapsed的差异&excl;

    原文:零元学Expression Blend 4 - Chapter 39 虾米?!同款?不同师傅!告诉你Visible.Hidden与Collapsed的差异! 由此可知 Hidden为隐藏项目,但 ...

  2. 零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步

    原文:零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步 如果需要经常的使用某一项工具,总会希望能够更快速的使用各项设定达到效果 今天要介绍 ...

  3. 零元学Expression Blend 4 - Chapter 47 超简单&excl;运用StackPanel配合OpacityMask做出倒影效果

    原文:零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果 有网友问我如何在Blend内制作出倒影效果 我提供了 ...

  4. 零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以&excl;轻松制作拥有动画的MenuBar&excl;&lpar;下&rpar;

    原文:零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下) 抱歉久等了!!!! 终於到了动画MenuBar ...

  5. 零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗&quest;

    原文:零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗? ListBox里的排列不是垂直就是水平,觉得这样的排列很枯燥乏味吗? 想要它变聪明吗? ...

  6. 零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形动画

    原文:零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形动画 零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形 ...

  7. 零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以&excl;轻松制作拥有动画的MenuBar&excl;&lpar;中&rpar;

    原文:零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中) 我们接着进行动画MenuBar的制作 接续着上 ...

  8. 零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以&excl;轻松制作拥有动画的MenuBar&excl;&lpar;上&rpar;

    原文:零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上) 一直以来都有人拿Flash的动画问我Blend ...

  9. 零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线&lpar;下&rpar;

    原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字 ...

随机推荐

  1. 再谈React&period;js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  2. LB 负载均衡的层次结构

    作为后端应用的开发者,我们经常开发.调试.测试完我们的应用并发布到生产环境,用户就可以直接访问到我们的应用了.但对于互联网应用,在你的应用和用户之间还隔着一层低调的或厚或薄的负载均衡层软件,它们不显山 ...

  3. Virtualbox虚拟机安装Ubuntu图文版

    这篇文章给大家介绍一下如何在Windows系统下的Virtual Box虚拟机软件中安装Ubuntu系统. 适用环境:Windows系统作为物理机,在此平台上搭建一个Virtual Box虚拟平台,在 ...

  4. 微价值：专訪《甜心爱消除》个人开发人员Lee，日入千元&excl;

    [导语]我们希望能够对一些个人开发人员进行专訪,这样大家更能显得接地气,看看人家做什么,怎么坚持.<甜心爱消除>作者Lee是三群的兄弟,也关注微价值.微价值的文章还是能够的,得到一些业内大 ...

  5. Eclipse快捷键，前几个很实用

    F3 :查看实现 F4(或control + T) :继承树 control + F6 :切换文件 control + F7 :切换视图 control + F8 :切换模板 control + O ...

  6. 屏幕录像专家V7&period;5&lpar;完美破解版，无水印&rpar;下载

    分享一个屏幕录像工具.屏幕录像专家V7.5(完美破解版,无水印).经测试可破解使用. 破解注册 点击安装.EXE,安装软件. 点击安装好的屏幕录像专家,会给你一个机器码,要你注册,复制下这个机器码(下 ...

  7. plsql developer日期时间格式设置

    1 工具->首选项->日期/时间都使用windows格式: 2 在环境变量加入 nls_date_format=YYYY-MM-DD HH24:MI:SS nls_timestamp_fo ...

  8. es6基础&lpar;5&rpar;--数值扩展

    { //Number.isFinite数字是有尽的 console.log(Number.isFinite(15));//true console.log(Number.isFinite(NaN)); ...

  9. SQL Server时间戳

    select replace(replace(replace(replace(convert(varchar ,getdate() ,126) ,'-' ,'') ,' ' ,'') ,':' ,'' ...

  10. markdown 语法备忘

    markdwon语法, 增加以下CSS代码,可以对markdwon语法产生的文件进行分页操作. <div style="page-break-after:always;"&g ...

相关文章