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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

原文:零元学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作隐藏即可

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

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

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

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

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

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

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

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

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

这里，请选择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">