繼續聊WPF——Expander控制項（1）

 

歡迎加入.NET技術交流群：189931386 Expander是一個可以展開和摺疊的控制項，它包含兩部分——標題和內容。標題通Header屬性來設定，內容通過Conent屬性設定，如下面一個簡單的例子：

        <Expander ExpandDirection="Down" Width="96">            <Expander.Header>                <TextBlock Text="標題" FontWeight="Bold"/>            </Expander.Header>            <Expander.Content>                <TextBlock TextWrapping="Wrap"  Text="這裡是內容。"/>            </Expander.Content>        </Expander>

Expander控制項的Header和Content都可以為任何對象，只要能正常顯示即可。下面就是該控制項運行時的。                                  

這個控制項最實用的地方，就是做導覽列。

    <StackPanel Margin="20,20" Width="100" Height="460" HorizontalAlignment="Left"                VerticalAlignment="Top">        <Expander VerticalAlignment="Stretch" ExpandDirection="Down" HorizontalContentAlignment="Left" SnapsToDevicePixels="True">            <Expander.Header>                <TextBlock Text="使用者管理" FontSize="14" FontWeight="Bold" />            </Expander.Header>            <Expander.Content>                <Grid>                    <Grid.RowDefinitions>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                    </Grid.RowDefinitions>                    <RadioButton Grid.Row="0">會員管理</RadioButton>                    <RadioButton Grid.Row="1">角色管理</RadioButton>                </Grid>            </Expander.Content>        </Expander>        <Expander VerticalAlignment="Stretch" ExpandDirection="Down" HorizontalContentAlignment="Left" SnapsToDevicePixels="True">            <Expander.Header>                <TextBlock Text="文件管理" FontSize="14" FontWeight="Bold" />            </Expander.Header>            <Expander.Content>                <Grid>                    <Grid.RowDefinitions>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                    </Grid.RowDefinitions>                    <RadioButton Grid.Row="0">部門資料</RadioButton>                    <RadioButton Grid.Row="1">員工資料</RadioButton>                    <RadioButton Grid.Row="2">職位資料</RadioButton>                </Grid>            </Expander.Content>        </Expander>        <Expander VerticalAlignment="Stretch" ExpandDirection="Down" HorizontalContentAlignment="Left" SnapsToDevicePixels="True">            <Expander.Header>                <TextBlock Text="採購管理" FontSize="14" FontWeight="Bold" />            </Expander.Header>            <Expander.Content>                <Grid>                    <Grid.RowDefinitions>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                    </Grid.RowDefinitions>                    <RadioButton Grid.Row="0">採購計劃</RadioButton>                    <RadioButton Grid.Row="1">需求分析</RadioButton>                    <RadioButton Grid.Row="2">採購單</RadioButton>                    <RadioButton Grid.Row="3">入庫驗收</RadioButton>                    <RadioButton Grid.Row="4">入庫退回</RadioButton>                </Grid>            </Expander.Content>        </Expander>        <Expander VerticalAlignment="Stretch" ExpandDirection="Down" HorizontalContentAlignment="Left" SnapsToDevicePixels="True">            <Expander.Header>                <TextBlock Text="供應商" FontSize="14" FontWeight="Bold" />            </Expander.Header>            <Expander.Content>                <Grid>                    <Grid.RowDefinitions>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                    </Grid.RowDefinitions>                    <RadioButton Grid.Row="0">基本資料</RadioButton>                    <RadioButton Grid.Row="1">往來單位</RadioButton>                    <RadioButton Grid.Row="2">上遊供應商</RadioButton>                </Grid>            </Expander.Content>        </Expander>    </StackPanel>

另外，通過ExpandDirection屬性可控其展開的方向。

        <Expander VerticalAlignment="Stretch" ExpandDirection="Right" HorizontalContentAlignment="Left" SnapsToDevicePixels="True">                 ............         </Expander>