Canvas layout是expression blend裡面提供最簡單的layout類型。
不同於Grid的相對位置，Canvas是用絕對位置來做佈局。
所以放在Canvas裡面的子元件並不會跟隨著縮小或放大。
這和Grid是非常不同的。
圈圈被放在固定的位置，並不會隨著視窗縮小放大而作改變形狀或者其位置。
2010年12月29日 星期三
Expression Blend 4– 容器(container)介紹- Canvas
Expression Blend 4– 容器(container)介紹- Grid
Grid顧名思義，是格線的意思，同時它也是最具有彈性的一個容器。
在一開始的時候，Blend會提供兩種主要的編輯模式，
分別是Grid與Canvas
可以在主要編輯畫面的左上方小圖示看到 
grid的模式，
Canvas的模式
Grid提供即時的尺寸縮放行為(run-time resizing behavior)。 
不管視窗放大或縮小，中間的圓會與最靠近的藍色格線保持一定的距離(margin)
如下圖兩個範例。 
視窗放大時，
視窗縮小時。
使用Grid容器時，可以自定格線，把整個畫面分割成一格一格的，
然後把內容物擺進去，並且使用對齊，長度，寬度，margin等來
調整物件(object)的屬性
使用選擇工具(V)，將滑鼠指標移到畫板的藍色範圍裡，
就會出現橘色的分隔線，Click一下，就可以新增分隔線。
除此之外，可以在淺藍色粗邊線的地方看見有三個圖示，
這分別是決定在這些格線裡的長寬是
被固定的(pixed sized)
隨著視窗縮放的(star sized)或者是自動的(Auto sized)
(圖左：被固定的(pixed sized)，圖中：隨著視窗縮放的(star sized)，圖右：自動的(Auto sized))
如果是固定(pixed sized)的狀態，則不管視窗縮放，則物件仍會依照原尺寸停留在原處。
如果再隨著視窗縮放的(star sized)狀態，則有點類似網頁百分比的概念，物件會隨著百分比
的長寬進行縮放。
最後是自動(auto sized)的狀態，物件的長寬比不會改變，但是與周遭的距離會自動的調整。
看圖比較清楚。
(一)固定(pixed sized)的狀態 
二、隨著視窗縮放的(star sized)
三、自動(auto sized)
至於在運用方面，
我們可以在格子內擺上許多物件，來調整物件在整個畫面上的位置。
Grid是最常被使用來布局的容器，你可以在之中固定許多物件的位置，
並且使他們都具有彼此相對的距離喔。
Expression Blend 4 –容器(container)介紹
什麼是容器?
容器是佈局的利器，妥善的選對容器，則會讓你事半功倍，
簡單的說，有點類似網頁的Div。
在Blend裡有共有九種容器，但不同的是，這九種容器都很有自己的個性。
把對的東西放在對的容器裡面，就能夠達到成功的佈局。
例如，在WPF裡面，我們會想要讓應用程式在視窗縮小或放大時，都能夠被完美的使用。
這時候，就要妥善的考慮，什麼地方該用什麼容器來佈局，
好吧! 那我來好好介紹一下這九種容器。
他們分別是Grid, Canvas, StackPanel, WrapPanel, DockPanel, ScrollViewer, Border,
UniformGrid, Viewbox.
容器的選擇可以在Expression Blend 4 畫面左方的toolbar panel找到。
也可以直接選擇後，double click 將容器置入。或者選擇所需的容器後，
在主畫面上拖曳出所需的大小即可。
之後會一一介紹，每個容器的特性。
2010年12月28日 星期二
Expression Blend 4– tips 長寬值自動按鈕
在blend 4裡面，我們可以透過右方的layout panel 來設定物件或容器的
長與寬。如下圖
長寬值設定好了，卻又反悔想更改為auto時，該如何是好呢？
難道要一直在欄位上key auto值嗎？
幸好blend 4 提供了一個小小的按鈕(下圖)給這多變的人性需求，
輕輕一按，馬上又將長寬變回伸縮自如的auto值。
提供這個小tips給大家參考。
2010年7月25日 星期日
如果沒有reset.css ？所謂的原貌
在還沒有載入reset.css之前，我們都知道，
每個html的tag都有其設定好的預設值。
因此我們會需要載入reset.css來清除掉這些原本的預設值，
例如，在還沒有設置任何css style之前，原本在h1 tag下的內容
font-size是2em, margin則是0.67em
所以這就是我們今天要來討論的主題，
所謂的原貌，
知道原貌有什麼好處呢？
當然是有很大的幫助我才寫這篇的。^___^
例如，可以讓你善用tag的特性。節省css重複撰寫或者減少改變其css屬性的次數。
以下，詳列出Default Style Sheet For HTML 4
也就是HTML4 各種tag的各項預設值。
取自W3C的標準
http://www.w3.org/TR/CSS21/sample.html
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
2010年7月11日 星期日
Vendor-prefixed CSS Property Overview
瀏覽器四大核心
所支援的vendor-prefixed css property
恰巧又看見了，原來IE9 不需要vendor-prefixed就可以有圓角效果耶border-radius
想了解更多請看這篇文章CSS vendor prefixes considered harmful。
這些語法。
但其實這篇overview也幫大家整理了哪些瀏覽器也提供了不需要vendor-prefix的一些css屬性
例如
例如屬性附註旁邊有個小小紅色圖樣的，則是表示此核心不用vendor-prefixed也同樣支援。
讓我更詳細的介紹一下何謂 vendor-prefixed
-WebKit 這是給google chrome與safari 看的
-moz 這是給Gecko 核心開發的瀏覽器 例如 firefox看的
我們經常可以看到 同一種css3的屬性效果，有三種不同的寫法
-moz-transition /*for firefox*/
-webkit-transition /*for safari, chrome*/
-o-transition /*for Opera*/
不過要一個一個記哪些瀏覽器支援的詳細語法是什麼實在太費時了
因此，這篇備忘已經幫大家整理好了，目前四大核心瀏覽器
所支援的vendor-prefixed，有需要的人只需到此網站來看即可。
2010年6月27日 星期日
讓css做更多事情。
不管是利用lesscss 或者Sass 都是相同的概念，
他們將需要的變數設在上方，然後之後寫的css都引用同一個變數，
遇到需要修改的情況時，只需修改那個變數，就可以修改在整個css檔中，
所有引用變數的設置。這樣講有點抽象，
請看以下範例。
step01 第一步：
載入less.js, google上面有。
<script src=”http://lesscss.googlecode.com/files/less-1.0.18.min.js”></script>
step02 第二步：
把css檔import進來，並且設置關連tag。
<link rel=”stylesheet/less” href=”style.less”/>
注意事項：此檔必需比less.js檔先載入。
且其附檔名要改為.less而非.css喔
step03第三步：
之後你就可以自己盡情的玩啦。
設置方法如下
@basic_color:red;
/*利用@符號來設置變數*/
另一種設置的方法為
將.rounded變成一個function, (這裡面放引進的參數)
之後只需修改引進的參數值即可。
.rounded(@radius:5px)
{
-moz-border-radius:@radius;
-webkit-border-radius:@radius;
border-radius:@radius;
}
#aaa{
background:@basic_color;
.rounded(20px);
a
{
.rounded(10px);
}
/*也可以直接將#aaa a寫在這裡面不用再額外搬到外面來寫*/
}
參考文章：
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js/
訂閱：
意見 (Atom)