小猴子點部落

Expression實現了我的設計夢，所以我想要分享給大家

2011-03-18

零元學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內捲動一下滑鼠滾輪

 

 

更改為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

 

 

 

 

(若有任何錯誤的地方，請各位前輩或同好能不吝指教，小女子都會虛心接受；若是你喜歡我的教學，請給我點鼓勵，謝謝。)

一步一步邁向HIE之路

 

喜歡我文章請推我一下或給我個回應，你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特別需要，請在文章回應處留言，我會盡快回覆您