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

?

完成後，請全部選取後復制出另一個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:

?

02

點選左邊的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"> 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之差异...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。