零元學Expression Blend 4 - Chapter 39 蝦米?!同款?不同師傅!告訴你Visible、Hidden與Collapsed的差異!

由此可知

Hidden為隱藏項目,但也保留項目的配置空間

而Collapsed為隱藏項目,但因為沒有保留項目的配置空間,所以會使得綠色區塊位置改變





MSDN提到:

Visibility 值為 Collapsed 的項目不會佔用任何配置空間。

(MSDN對Visibility的介紹原文)



配置空間指的是項目存在畫面上的位置

所以就算是該項目使用Collapsed,項目不會佔用任何配置空間

但是與是否會耗損資源並沒有任何的絕對關係!!!!


就算不存在畫面上,檢查Xaml時,會發現已設定為Collapsed的項目還是存在的

 

很多時候,當設計版面或是動畫的需要利用AppearanceVisibility來達到效果

本篇就是要跟大家介紹Visibility的三種配置效果

 

我們開始吧!

 

01

跟之前不一樣的是,這次我們要開啟的新專案需使用WPF Application

為什麼?看下去就知道!

 

New Project->選取WPF Application->命名後按下OK

 

現在就先來說明為甚麼要使用WPF專案

如下圖

左邊是Silverlight專案下的Visibility,只有Visible與Collapsed兩種

右邊是WPF專案下的Visibility,有Visible、Hidden與Collapsed三種

 

為了要比較這三種設定的明顯不同,所以本篇我們使用WPF專案

 

 

02

專案開啟後,在主要工作區放入一個StackPanel

 

接著在StackPanel裡置入四個Rectangle

 

 

為了方便對照,請複製整個StackPanel,放置於畫面上對稱的位置

 

 

03

我們開始設定Visible、Hidden與Collapsed吧!

粉紅色與綠色我們不動它,使之保持預設值Visible

 

選取藍色的Rectangle,設定為Hidden

 

設定為Hidden的藍色Rectangle已經消失了

但是其它顏色的Rectangle並沒有因為藍色Rectangle的設定有任何的改變

 

 

04

再來,選取黃色Rectangle,設定為Collapsed

 

 

設定為Collapsed的黃色Rectangle已經消失了

並且因為黃色Rectangle的設定,使得其他顏色的Rectangle位子也因此有所改變

 

 

05

請看下圖的整理的差異分析

 

由此可知

Hidden為隱藏項目,但也保留項目的配置空間

Collapsed為隱藏項目,但因為沒有保留項目的配置空間,所以會使得綠色區塊位置改變

 

 

MSDN提到:

Visibility 值為 Collapsed 的項目不會佔用任何配置空間。

(MSDN對Visibility的介紹原文)

 

配置空間指的是項目存在畫面上的位置

所以就算是該項目使用Collapsed,項目不會佔用任何配置空間

但是與是否會耗損資源並沒有任何的絕對關係!!!!

 

就算不存在畫面上,檢查Xaml時,會發現已設定為Collapsed的項目還是存在

   1: <StackPanel x:Name="SettingStakPnl" Margin="20" Background="#FF444444" Grid.Column="1">
   2:     <Rectangle x:Name="PinkBox1" Fill="#FFFF00A4" Height="75" Width="150" Margin="5,6,5,1" StrokeThickness="0"/>

		
		
   3:     <Rectangle x:Name="BlueBox1" Fill="#FF0004FF" Height="75" Width="150" Margin="5,6,5,1" StrokeThickness="0" Visibility="Hidden"/>

		
		
   4:     <Rectangle x:Name="YellowBox1" Fill="#FFFFF500" Height="75" Width="150" Margin="5,6,5,1" StrokeThickness="0" Visibility="Collapsed"/>

		
		
   5:     <Rectangle x:Name="GreenBox1" Fill="#FF00E403" Height="75" Width="150" Margin="5,6,5,1" StrokeThickness="0"/>

		
		
   6: </StackPanel>

	

 

 

 

 

 

以上對Visibility的介紹,希望能達到初學者對正確觀念的釐清唷!

 

 

 

 

 

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

一步一步邁向HIE之路

 

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

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