WPF——Expander控件（轉)

Expander是一個可以展開和折疊的控件，它包含兩部分標頭和內容。 標頭通Header屬性來設置，內容通過Conent屬性設置，如下面一個簡單的例子： Expander ExpandDirection = Down Width = 96 Expander.Header TextBlock Text = 標題 FontWeight = Bold / / Expander.Header Expander.Content TextBlock TextWrapping = Wrap T

　　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>