UWP 開發(fā)初階 Chapter 6 - 簡(jiǎn)單介紹如何使用 C# 改變 XAML 控件的屬性

上篇回顧

上篇介紹了通過(guò) this.Frame.navigate(typeof(PageName)); 實(shí)現(xiàn)的全局頁(yè)面導(dǎo)航,以及通過(guò)在 XAML 中建立 Frame 酪耳,并通過(guò) frameName.navigate(typeof(PageName)); 實(shí)現(xiàn)的局部頁(yè)面導(dǎo)航浓恳。

本篇正文

本篇將講述如何通過(guò) C# 設(shè)置或改變 XAML 中控件的屬性。例如常用的 TextBlock 等等碗暗。

回顧一下:

先前的文章已經(jīng)涉及到 Name 這個(gè)屬性颈将,給一個(gè) XAML 控件取了個(gè)名字過(guò)后,我們就可以在 .xaml.cs 文件中引用它啦言疗!這樣也就可以改變了它的一些相關(guān)屬性晴圾。

我們先為我們接下來(lái)的任務(wù),做一些基礎(chǔ)噪奄,把基本的東西寫入 .xaml 死姚,我們接下來(lái)要通過(guò)按鈕點(diǎn)擊沾凄,來(lái)改變一個(gè) TextBlock 的各種屬性。

  • 下面知允,大家自己動(dòng)手撒蟀。在一個(gè)空白 MainPage.xaml 里的 Grid 里面寫一個(gè) StackPanel ,而 StackPanel 里面先放一個(gè) TextBlock 温鸽。代碼如下:

    <Grid>
        <StackPanel>
            <TextBlock Name="myTextBlock"/>
        </StackPanel>
    </Grid>
    

好了保屯,準(zhǔn)備工作完成了,我們的 TextBlock 都只給它一個(gè)名字涤垫,其他我們通過(guò) C# 來(lái)實(shí)現(xiàn)姑尺!

注意:以下為了課程方便,未給 Button 設(shè)置名字蝠猬,正式開發(fā)中切蟋,請(qǐng)養(yǎng)成給他們?nèi)∫子趨^(qū)分的名字的好習(xí)慣

  1. 任務(wù)一:通過(guò)點(diǎn)擊按鈕,在 TextBlock 里面顯示 “Hello, world!”

    • 我們先在 StackPanel 里面加一個(gè)按鈕榆芦,同時(shí)新建一個(gè)點(diǎn)擊事件柄粹,代碼如下:

      <Button Content="Click to show text" Click="Button_Click"/>
      
    • 然后,找到 vs 幫你新建的事件匆绣,在里面寫如下代碼:

      提示:將光標(biāo)移到新建的事件的名字上驻右,按 F12 可以快速跳轉(zhuǎn)至事件定義。

      myTextBlock.Text = "Hello, world!";
      

      解釋:myTextBlock 就是我們之前在 .xaml 文件中定義的一個(gè)控件崎淳,而 myTextBlock.Text 就是這個(gè)控件里面的文字堪夭,這個(gè)屬性的類型為 string

    • 好了拣凹!第一個(gè)任務(wù)完成了森爽,我們先慢點(diǎn)編譯,繼續(xù)做下一個(gè)任務(wù)嚣镜。

  2. 任務(wù)二:通過(guò)點(diǎn)擊按鈕爬迟,改變 TextBlock 里面的文字

    • 我們先依舊在 StackPanel 里面新建一個(gè)按鈕,代碼如下:

      <Button Content="Click to change text" Click="Button_Click_1"/>
      
    • 然后轉(zhuǎn)到新建事件祈惶,寫如下代碼:

      myTextBlock.Text = "This is UWP Development Tutorial!";
      
    • 這時(shí)候我們就將 TextBlock 里面的文字改為新的文字了雕旨!我們?cè)龠M(jìn)行下一步。

  3. 任務(wù)三:通過(guò)點(diǎn)擊按鈕捧请,改變 TextBlock 里面文字的顏色

    • 依舊新建一個(gè)按鈕凡涩,XAML 代碼就不再贅述了,一個(gè)思路疹蛉。

    • 然后轉(zhuǎn)到新建的事件里面活箕,寫如下代碼:

      myTextBlock.Foreground = new SolidColorBrush(Colors.Red);
      

      解釋:大家應(yīng)該還記得,Foreground 表示的是 TextBlock 里面字的顏色可款,而這個(gè) Foreground 屬性的類型為 Brush育韩,因此我們需要新建一個(gè) SolidColorBrush克蚂,而后面的括號(hào)里面的 Colors 就是我們?cè)?XAML 中編寫 Foreground 的時(shí)候那一串顏色筋讨。(注意:Colors 需要 using Windows.UI)埃叭。

      補(bǔ)充:其實(shí) SolidColorBrush 只是眾多 Brush 中的一種。還有 LinearGradientBrush悉罕,也就是我們熟知的漸變色赤屋。還有 AcrylicBrush,這也就是微軟先前發(fā)布的 Fluent Design 中的一個(gè)重要元素壁袄,亞克力类早!

    • 這時(shí)候,補(bǔ)充一點(diǎn)嗜逻,大家上手的話會(huì)發(fā)現(xiàn)涩僻,Colors 里面的顏色都是一些微軟幫你設(shè)定好的,而你卻想通過(guò) RGB 來(lái)設(shè)定顏色栈顷,這時(shí)候你可以通過(guò)這行代碼逆日。

      myTextBlock.Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
      

      注意:這里面是 Color 而不是 Colors,同時(shí) FromArgb 后的括號(hào)里面妨蛹,有四個(gè)變量屏富,其實(shí)有一定編程基礎(chǔ)的朋友大概都能猜到晴竞,第一個(gè) A 值便是透明度蛙卤,而不同于 Java 中的阿爾法值區(qū)間是 0 - 1,這個(gè) A 的值的區(qū)間是 0 - 255噩死,其中值越小颤难,越透明。而剩下的依次為 R已维、G行嗤、B

    • 顏色的變化也完成啦!下一步垛耳!

  4. 任務(wù)四:通過(guò)點(diǎn)擊按鈕改變字體大小

    • 依舊新建一個(gè)按鈕啦栅屏!

    • 然后在 csharp 文件中的事件定義處,寫下如下代碼:

      myTextBlock.FontSize = 30;
      

      解釋:FontSize 的這個(gè)屬性的類型為 double堂鲜,因此這步操作很簡(jiǎn)單栈雳。補(bǔ)充個(gè)知識(shí),如果你不去設(shè)置 FontSize缔莲,那默認(rèn)是 15哥纫,所以這里面我們相當(dāng)于把字變大了。

    • 好了痴奏!下一步蛀骇!

  5. 任務(wù)五:通過(guò)點(diǎn)擊按鈕厌秒,加粗字體

    • 新建按鈕!

    • 然后找到找到事件定義:

      myTextBlock.FontWeight = FontWeights.Bold;
      

      解釋:.FontWeight 里面就是使得字體加粗擅憔,或者變細(xì)等等鸵闪,而注意賦值號(hào)右邊是 FontWeights,而不是 FontWeight 暑诸,其中 FontWeights 需要 using Windows.UI.Text岛马。

    • 好啦!

  6. 好啦屠列!今天的任務(wù)就暫告一個(gè)段落啦逆!快去編譯試試看吧!效果如下:

    [站外圖片上傳中...(image-f7fe0e-1531829416402)]

結(jié)語(yǔ)

其實(shí)我們今天講的只是冰山一角笛洛,但凡是這個(gè)控件有的屬性夏志,我們都可以通過(guò) C# 進(jìn)行更改,只不過(guò)可能有時(shí)候會(huì)比較繁瑣苛让,如果大家愿意沟蔑,可以自己去 vs 上試一試其他的屬性是怎么更改的,不明白的也可以隨時(shí)問(wèn)我狱杰,或在下方留言瘦材!下次的內(nèi)容我還沒(méi)想好嘿嘿,可能還會(huì)介紹一部分控件仿畸。

那大家好好復(fù)習(xí)食棕!

下篇見!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末错沽,一起剝皮案震驚了整個(gè)濱河市簿晓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌千埃,老刑警劉巖憔儿,帶你破解...
    沈念sama閱讀 219,366評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異放可,居然都是意外死亡谒臼,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門耀里,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蜈缤,“玉大人,你說(shuō)我怎么就攤上這事备韧〗僬粒” “怎么了?”我有些...
    開封第一講書人閱讀 165,689評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)叠艳。 經(jīng)常有香客問(wèn)我奶陈,道長(zhǎng),這世上最難降的妖魔是什么附较? 我笑而不...
    開封第一講書人閱讀 58,925評(píng)論 1 295
  • 正文 為了忘掉前任吃粒,我火速辦了婚禮,結(jié)果婚禮上拒课,老公的妹妹穿的比我還像新娘徐勃。我一直安慰自己,他們只是感情好早像,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,942評(píng)論 6 392
  • 文/花漫 我一把揭開白布僻肖。 她就那樣靜靜地躺著,像睡著了一般卢鹦。 火紅的嫁衣襯著肌膚如雪臀脏。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,727評(píng)論 1 305
  • 那天冀自,我揣著相機(jī)與錄音揉稚,去河邊找鬼。 笑死熬粗,一個(gè)胖子當(dāng)著我的面吹牛搀玖,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播驻呐,決...
    沈念sama閱讀 40,447評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼灌诅,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了暴氏?” 一聲冷哼從身側(cè)響起延塑,我...
    開封第一講書人閱讀 39,349評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎答渔,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體侥涵,經(jīng)...
    沈念sama閱讀 45,820評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡沼撕,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,990評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了芜飘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片务豺。...
    茶點(diǎn)故事閱讀 40,127評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖嗦明,靈堂內(nèi)的尸體忽然破棺而出笼沥,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,812評(píng)論 5 346
  • 正文 年R本政府宣布奔浅,位于F島的核電站馆纳,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏汹桦。R本人自食惡果不足惜鲁驶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,471評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望舞骆。 院中可真熱鬧钥弯,春花似錦、人聲如沸督禽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)狈惫。三九已至绪穆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間虱岂,已是汗流浹背玖院。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留第岖,地道東北人难菌。 一個(gè)月前我還...
    沈念sama閱讀 48,388評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像蔑滓,于是被迫代替她去往敵國(guó)和親郊酒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,066評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容