WPF Expander控件（擴展面板）

    這算是我比較喜歡的一個控件，以前在Winform中也常用類似的。它包裝了一塊內容，通過單擊一個小箭頭按鈕可以顯示或隱藏所包含的內容。在線幫助以及Web頁面經常使用這種技術，因為既可以包含大量內容，而又不會讓用戶面對大量的多余信息而感到無所適從。

    使用 Expander控件是非常簡單的——只需要在該控件內部包裝希望使其能夠折疊的內容，通常，每個 Expander 控件開始都是折疊的，但是可以在代碼或標記中設置 IsExpanded 屬性來改變這種行為。控件的折疊是非常有趣，展開於疊起自動排版，這是我非常喜歡的。下面是我編寫的一個Grid面板具有4個Expander控件的例子：

 

（折疊效果）

 

（展開效果）

 

XAML代碼：

<Window x:Class="_1022_Expander.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Expander Margin="5" Padding="5" Header="面板(1)">
            <TextBlock>這是第一塊面板內容，TextBlock</TextBlock>
        </Expander>
        <Expander Grid.Column="1" Margin="5" Padding="5" Header="面板(2)" ExpandDirection="Right">
            <TextBlock TextWrapping="Wrap">第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。第二塊面板多內容測試。。</TextBlock>
        </Expander>
        <Expander Grid.Row="1" Margin="5" Padding="5" Header="面板(3)">
            <DockPanel>
                <Label HorizontalAlignment="Left">伸縮面板：</Label>
                <TextBox>Andrew-blog</TextBox>
            </DockPanel>
        </Expander>
        <Expander Grid.Row="1" Grid.Column="1" Header="面板(4)">
            <Label>http://Andrew-blog.cnblogs.com</Label>
        </Expander>
    </Grid>
</Window>

 

源碼下載：http://files.cnblogs.com/andrew-blog/1022_Expander.rar

開發工具：VS2012

參考：http://www.wxzzz.com/?id=132