控件介紹

在Windows 11中，我們?cè)诤芏嘬浖卸伎梢钥吹竭@樣的控件，它們可展開(kāi)可折疊，折疊時(shí)節(jié)省空間，可以分類，看起來(lái)簡(jiǎn)潔有序，但又不需要在好幾個(gè)頁(yè)面之間跳轉(zhuǎn)。這個(gè)控件，就是我們今天要介紹的Expander控件。

Tips：本文的控件代碼示例可以在WinUI示例應(yīng)用程序看到，示例程序下載鏈接：https://apps.microsoft.com/store/detail/winui-3-gallery/9P3JFPWWDZRC

最基本的Expander

對(duì)于UWP應(yīng)用，Expander控件需要安裝WinUI 2環(huán)境，安裝方法詳見(jiàn)WinUI的安裝，而WinUI 3就可以直接使用，不需要進(jìn)行配置。

WinUI 3和UWP的代碼略有不同，這里以WinUI 3舉例，UWP的控件名稱是<muxc:Expander/>，而WinUI 3的是<Expander/>。

下面介紹一下Expander的屬性：

IsExpanded代表控件最開(kāi)始的狀態(tài)，當(dāng)值為True時(shí)控件默認(rèn)折疊，為False時(shí)默認(rèn)展開(kāi)。

ExpandDirection代表控件展開(kāi)的方向，Down為向下展開(kāi)，Up為向上，默認(rèn)為Down。

Header代表標(biāo)題部分，這個(gè)部分的內(nèi)容不會(huì)被折疊。上面的例子中直接設(shè)置Header屬性為一個(gè)字符串，就可以讓控件標(biāo)題顯示文字。

Content代表內(nèi)容部分，這個(gè)部分的內(nèi)容會(huì)被折疊。和Header一樣，例子中直接設(shè)置Content屬性為一個(gè)字符串，控件內(nèi)容顯示文字。

當(dāng)然，Header和Content不僅能顯示文字，也可以顯示其它東西。

設(shè)置內(nèi)部控件

在下面的代碼中，我們會(huì)在Header中添加一個(gè)居中的ToggleBotton。

<Expander.Header></Expander.Header>中間的內(nèi)容就是自由放置控件的地方，這些控件就會(huì)顯示在Expander的標(biāo)題區(qū)域，不被折疊。如果需要放多個(gè)控件，建議使用StackPanel或者Grid進(jìn)行組合，當(dāng)然Expander也可以嵌套，如果你覺(jué)得好看的話。

?內(nèi)部控件的HorizontalAlignment屬性指定了它的對(duì)齊方式，Left為左，Center為中，Right為右，Stretch為自動(dòng)適應(yīng)寬度(拉伸)，內(nèi)部的每個(gè)控件都可以指定自己的對(duì)齊方式。

同樣，Content里面也可以用類似的方法添加控件，只需要把上面例子的Expander.Header改成Expander.Content就可以了。

我們可以通過(guò)這樣的方法豐富Expander，達(dá)到想要的效果。

指定寬度

我們運(yùn)行程序發(fā)現(xiàn)，當(dāng)Expander控件的標(biāo)題短于內(nèi)容時(shí)，在展開(kāi)和折疊的過(guò)程中會(huì)有寬度變化，非常不美觀，影響用戶使用體驗(yàn)。

如果要防止控件寬度在展開(kāi)或折疊時(shí)更改，可以設(shè)置Width屬性，內(nèi)容為一個(gè)數(shù)值(如500)，代表控件的寬度(px)。而當(dāng)控件是StackPanel的子控件時(shí)，把Expander的HorizontalAlignment設(shè)置為Stretch，并讓StackPanel控制大小。

展開(kāi)和折疊事件

運(yùn)行時(shí)，如果展開(kāi)Expander，就會(huì)觸發(fā)展開(kāi)事件Expander_Expanding；反之，折疊就會(huì)觸發(fā)折疊事件Expander_Collapsed。利用這些事件，我們可以完成一些自動(dòng)化操作：如利用折疊事件，我們可以在折疊Expander時(shí)自動(dòng)計(jì)算內(nèi)容里數(shù)字的值，顯示在標(biāo)題上匯總。

那么我們本期專欄的內(nèi)容就到這里，下面的時(shí)間就留給大家點(diǎn)贊、投幣、收藏吧！

下期內(nèi)容你們希望我講解什么控件，在評(píng)論區(qū)敲出來(lái)……