StackPanel
堆疊面板,也是十分常用的元件之一。
你可以設定子類別的排列方式,預設是垂直,而你可以依照你的需求改成水平。
舉例來說,在你的StackPanel裡面加入三個元件,如果什麼都不設定,它會垂直的排下來。
而畫面大概會長成這個樣子
而你可以針對StackPanel來設定排列方式,假設改成水平排列的話。
則是會變成這個樣子。
這樣就學完大部分StackPanel會用到的技巧了,只需要設定水平或垂直排列,
子類別都會依照你所設定的來堆疊。
而因為是堆疊,所以你的子類別都不會有重疊的部分。
最後當然要說明一下在Code中如何設定排列方式了。
2016年3月21日 星期一
2016年3月16日 星期三
[UWP-C#] Grid 格子控制項(二)
上一篇文章,將Grid在Xaml裡面的用法都介紹的差不多了。
但是有時候可能會想在Code裡面來定義Layout,而如果我們想要使用Grid的話該如何使用呢?
首先先假設我們有一個Grid,要在它裡面定義行與列,以Xaml的樣子來看會像這個樣子。
假設像這樣的的設定,在C#裡面該如何寫呢?
這樣一來你就有跟上面Xaml一樣的效果了,需要注意的是當你在設定Row或Column的寬高時,它的資料型態是GridLength。
而建構GridLength時會輸入兩個參數,前者為數量,後者為型態,
Pixel - 實際的值
Auto - 塞入這格的元件有多大就多大
Star - 比例
如果對這三個屬性有所不了解,可以參考上一篇文章的說明。
最後在針對你的Grid去加入這些Definition。
而我們如果要加入元件到Grid中,那麼該怎麼設定它在哪行哪列呢?
此時會用到Grid的靜態方法SetColumn SetRow等。
就像是這個樣子。
最後如果要跨列或跨行,則是需要使用Grid的靜態方法SetColumnSpan與SetRowSpan
學會這些技巧,你應該能在C#中運用Grid了。
但是有時候可能會想在Code裡面來定義Layout,而如果我們想要使用Grid的話該如何使用呢?
首先先假設我們有一個Grid,要在它裡面定義行與列,以Xaml的樣子來看會像這個樣子。
假設像這樣的的設定,在C#裡面該如何寫呢?
這樣一來你就有跟上面Xaml一樣的效果了,需要注意的是當你在設定Row或Column的寬高時,它的資料型態是GridLength。
而建構GridLength時會輸入兩個參數,前者為數量,後者為型態,
Pixel - 實際的值
Auto - 塞入這格的元件有多大就多大
Star - 比例
如果對這三個屬性有所不了解,可以參考上一篇文章的說明。
最後在針對你的Grid去加入這些Definition。
而我們如果要加入元件到Grid中,那麼該怎麼設定它在哪行哪列呢?
此時會用到Grid的靜態方法SetColumn SetRow等。
就像是這個樣子。
最後如果要跨列或跨行,則是需要使用Grid的靜態方法SetColumnSpan與SetRowSpan
學會這些技巧,你應該能在C#中運用Grid了。
[UWP-C#] Grid 格子控制項
Grid
這是最常使用的Layout元件之一,當你新增一個新的頁面時,預設的顯示畫面元件就是Grid。
假設你沒設定Grid的大小的話,它會自動充滿父類別。
舉例來說,我們新增一個頁面,並且在預設的Grid裡面,在加入一個我們的Grid,並設定背景顏色。
此時你會看到全部的區塊都變成綠色了,因為你沒有特別指定大小,因此會自動充滿父類別。
接著你可以將長或寬指定為特定數值,假設我們將寬設定為50,你應該會看到這樣的畫面。
我們指定了寬,而高並沒有指定,因此他還是填滿父類別,而寬則是我們指定的50。
最後,試著也把高指定50,你應該會看到一個置中的綠色方塊。
它預設的水平與垂直對齊是置中,因此若是你想要讓他在左上角顯示的話,
記得將它的水平與垂直對齊修正成左上。
知道它的基本特性後,我們來談談格子吧,既然稱為格子控制項,代表你可以像是格子一樣的擺放你的元件。
我們先將綠色Grid刪除,留下預設的Grid,並針對它來做一些設定。
我們可以定義行(Column)與列(Row),行就是左右,而列則是上下。
舉例來說,假設我們想要這整個Grid左右切成三等份,就是要定義行(Column),
定義的方式就像上面寫的一樣,在你的Grid中加入Grid.ColumnDefinitions,並在裡面定義每一行的寬度,而我們定義成*的話代表,那一行佔全部*的幾*,也就是說,總共定義了3個*,美一行佔了1個*,也就是平均3等分。
當然你也可以其中幾個改成佔的比率高一些,將中間的寬改為2*就會像這樣。
此時全部變成4*,第一格佔了1/4,第二格2/4,第三格則是1/4。
當然你也可以直接將實際的值打進去,像是第一行我們想要寬等於50,第二行也是。
就直接輸入50即可,實際值與*可以混用,假設有四行,前兩行為實際值,後兩行為*。
它會先將實際值的部分標出來,剩下的部分在與*來切割比例,因此會像這個樣子,
前兩格為實際50,後兩格則平均分成兩等份
而定義列也是相同的方式,舉一個簡單的例子來看,剩下的觀念與定義行相同。
這樣我們就定義了上下切割為兩等份的Grid了。
然而,行與列是可以同時被定義的,就像這個樣子。
你會得到像這個樣子的畫面。
接著你就可以實際將元件放入格之中了,假設我們要在右下角那格放入一個Button。
你只需要在Grid之中加入這個Button,並針對它的Grid.Row與Grid.Column定義值即可。
而起始點是由0開始的,上面那列為0,而下面那列為1,行也是如此。
因此我們要在右下的話,也就是1,1的位置。
這樣一來你就會在右下角的區塊中加入一個Button了。
接著如果你想要跨行或跨列的話,也相當容易,假設我們要加入另一個Grid,放在上方的位置,並且跨兩行。
你只需要這樣輸入即可。
此時你的畫面應該長像這個樣子,上面兩行為藍色區塊,右下角為剛才加入的Button
這樣應該對大部分設定Grid的方式有所了解了。
寬高的設定還有一種叫做auto,它會依照你放的元件寬高來決定這個欄位的大小。
假設我們現在切三行,而第一行為auto,後面兩行為*,這三行的寬度會這樣分配
第一行依照你放入的元件寬度而決定,二三行為剩下的寬切成兩等份。
因此假如你現在沒有放入任何元件在第一行時,會是剛好兩等份的寬。
像是這個樣子
接著試著在第一行加入寬為100的Grid,你會發現變成三行了,而第一行為100,剩下為兩等份。
這樣你應該對Grid有一定程度的了解了。
這是最常使用的Layout元件之一,當你新增一個新的頁面時,預設的顯示畫面元件就是Grid。
假設你沒設定Grid的大小的話,它會自動充滿父類別。
舉例來說,我們新增一個頁面,並且在預設的Grid裡面,在加入一個我們的Grid,並設定背景顏色。
此時你會看到全部的區塊都變成綠色了,因為你沒有特別指定大小,因此會自動充滿父類別。
接著你可以將長或寬指定為特定數值,假設我們將寬設定為50,你應該會看到這樣的畫面。
我們指定了寬,而高並沒有指定,因此他還是填滿父類別,而寬則是我們指定的50。
最後,試著也把高指定50,你應該會看到一個置中的綠色方塊。
它預設的水平與垂直對齊是置中,因此若是你想要讓他在左上角顯示的話,
記得將它的水平與垂直對齊修正成左上。
知道它的基本特性後,我們來談談格子吧,既然稱為格子控制項,代表你可以像是格子一樣的擺放你的元件。
我們先將綠色Grid刪除,留下預設的Grid,並針對它來做一些設定。
我們可以定義行(Column)與列(Row),行就是左右,而列則是上下。
舉例來說,假設我們想要這整個Grid左右切成三等份,就是要定義行(Column),
定義的方式就像上面寫的一樣,在你的Grid中加入Grid.ColumnDefinitions,並在裡面定義每一行的寬度,而我們定義成*的話代表,那一行佔全部*的幾*,也就是說,總共定義了3個*,美一行佔了1個*,也就是平均3等分。
當然你也可以其中幾個改成佔的比率高一些,將中間的寬改為2*就會像這樣。
此時全部變成4*,第一格佔了1/4,第二格2/4,第三格則是1/4。
當然你也可以直接將實際的值打進去,像是第一行我們想要寬等於50,第二行也是。
就直接輸入50即可,實際值與*可以混用,假設有四行,前兩行為實際值,後兩行為*。
它會先將實際值的部分標出來,剩下的部分在與*來切割比例,因此會像這個樣子,
前兩格為實際50,後兩格則平均分成兩等份
而定義列也是相同的方式,舉一個簡單的例子來看,剩下的觀念與定義行相同。
這樣我們就定義了上下切割為兩等份的Grid了。
然而,行與列是可以同時被定義的,就像這個樣子。
你會得到像這個樣子的畫面。
接著你就可以實際將元件放入格之中了,假設我們要在右下角那格放入一個Button。
你只需要在Grid之中加入這個Button,並針對它的Grid.Row與Grid.Column定義值即可。
而起始點是由0開始的,上面那列為0,而下面那列為1,行也是如此。
因此我們要在右下的話,也就是1,1的位置。
這樣一來你就會在右下角的區塊中加入一個Button了。
接著如果你想要跨行或跨列的話,也相當容易,假設我們要加入另一個Grid,放在上方的位置,並且跨兩行。
你只需要這樣輸入即可。
此時你的畫面應該長像這個樣子,上面兩行為藍色區塊,右下角為剛才加入的Button
這樣應該對大部分設定Grid的方式有所了解了。
寬高的設定還有一種叫做auto,它會依照你放的元件寬高來決定這個欄位的大小。
假設我們現在切三行,而第一行為auto,後面兩行為*,這三行的寬度會這樣分配
第一行依照你放入的元件寬度而決定,二三行為剩下的寬切成兩等份。
因此假如你現在沒有放入任何元件在第一行時,會是剛好兩等份的寬。
像是這個樣子
接著試著在第一行加入寬為100的Grid,你會發現變成三行了,而第一行為100,剩下為兩等份。
這樣你應該對Grid有一定程度的了解了。
2016年2月26日 星期五
[UWP-C#] 多國語系的設定
許多專案會希望能夠支援多國語系,UWP當然也不例外,有個十分簡單的方法可以達成。
先開啟一個新的專案來試驗吧。
首先先在你的專案裡面加入兩個資料夾
並命名為zh-TW與en,並在兩個資料夾內分別加入資源檔案(Resources.resw),
資源檔案的檔名可以不用修改。
它的儲存機制是以Key - Value來存放的,我們試著在String1各別加入不一樣的文字。
此時Key為String1的值在中文與英文會顯示不同的文字。而該怎麼在程式碼中使用呢?
接著你就可以直接執行看看,若是在中文環境下就會印出zh-TW資源檔的文字,
而英文環境則是en裡面的文字。
這麼一來就可以隨著使用者語系不同而改變。
但是,你可能會有一個需求是,我能不能在App裡面就直接切換了呢?
因為現在這種作法只能關閉App並且切換語系後重開機,
實在有些麻煩,事實上是可行的。
假設你現在想要強制它改為英文,就只需要輸入這行就可以了。
這麼一來就可以在App當中改語系了。
接著,如果你想要在XAML之中使用這個值,也是可行的。
首先你必須將你的元件設定Uid,就像下面這行一樣。
之後,在你的Resources.resw檔中,會用到上面的Uid,
假設你想給MyTextBlock設定Text的值的話,就只要這樣輸入就可以了。
先開啟一個新的專案來試驗吧。
首先先在你的專案裡面加入兩個資料夾
並命名為zh-TW與en,並在兩個資料夾內分別加入資源檔案(Resources.resw),
資源檔案的檔名可以不用修改。
它的儲存機制是以Key - Value來存放的,我們試著在String1各別加入不一樣的文字。
此時Key為String1的值在中文與英文會顯示不同的文字。而該怎麼在程式碼中使用呢?
接著你就可以直接執行看看,若是在中文環境下就會印出zh-TW資源檔的文字,
而英文環境則是en裡面的文字。
這麼一來就可以隨著使用者語系不同而改變。
但是,你可能會有一個需求是,我能不能在App裡面就直接切換了呢?
因為現在這種作法只能關閉App並且切換語系後重開機,
實在有些麻煩,事實上是可行的。
假設你現在想要強制它改為英文,就只需要輸入這行就可以了。
這麼一來就可以在App當中改語系了。
接著,如果你想要在XAML之中使用這個值,也是可行的。
首先你必須將你的元件設定Uid,就像下面這行一樣。
之後,在你的Resources.resw檔中,會用到上面的Uid,
假設你想給MyTextBlock設定Text的值的話,就只要這樣輸入就可以了。
2015年8月23日 星期日
[UWP-C#] 用Code來完成xaml的設定
Margin
XAML
<TextBlock x:Name="textBlock" Margin="10,10,10,10"/>
C# Code
textBlock.Margin = new Thickness(10, 10, 10, 10);
XAML
<TextBlock x:Name="textBlock" Margin="10,10,10,10"/>
C# Code
textBlock.Margin = new Thickness(10, 10, 10, 10);
Foreground
XAML
<TextBlock x:Name="textBlock" Foreground="#FF00FF"/>
C# code
textBlock.Foreground = new SolidColorBrush(Color.FromArgb(100, 255, 0, 255));
XAML
<TextBlock x:Name="textBlock" Foreground="#FF00FF"/>
C# code
textBlock.Foreground = new SolidColorBrush(Color.FromArgb(100, 255, 0, 255));
訂閱:
文章 (Atom)














