Expander控件－左边导航栏

Expander控件

Expander是一个可以展开和折叠的控件，它包含两部分——标头和内容。

标头通Header属性来设置，内容通过Conent属性设置，如下面一个简单的例子：

[html]  view plain  copy

 print ?

1. <Expander ExpandDirection="Down" Width="96">  
2.     <Expander.Header>  
3.         <TextBlock Text="标题" FontWeight="Bold"/>  
4.     </Expander.Header>  
5.     <Expander.Content>  
6.         <TextBlock TextWrapping="Wrap"  Text="这里是内容。"/>  
7.     </Expander.Content>  
8. </Expander>  

Expander控件的Header和Content都可以为任何对象，只要能正常显示即可。

下面就是该控件运行时的截图。

 

                                 

这个控件最实用的地方，就是做导航栏。

[html]  view plain  copy

 print ?

1. <StackPanel Margin="20,20" Width="100" Height="460" HorizontalAlignment="Left"  
2.             VerticalAlignment="Top">  
3.     <Expander VerticalAlignment="Stretch" ExpandDirection="Down" HorizontalContentAlignment="Left" SnapsToDevicePixels="True">  
4.         <Expander.Header>  
5.             <TextBlock Text="用户管理" FontSize="14" FontWeight="Bold" />  
6.         </Expander.Header>  
7.         <Expander.Content>  
8.             <Grid>  
9.                 <Grid.RowDefinitions>  
10.                     <RowDefinition Height="auto"/>  
11.                     <RowDefinition Height="auto"/>  
12.                 </Grid.RowDefinitions>  
13.                 <RadioButton Grid.Row="0">会员管理</RadioButton>  
14.                 <RadioButton Grid.Row="1">角色管理</RadioButton>  
15.             </Grid>  
16.         </Expander.Content>  
17.     </Expander>  
18.     <Expander VerticalAlignment="Stretch" ExpandDirection="Down" HorizontalContentAlignment="Left" SnapsToDevicePixels="True">  
19.         <Expander.Header>  
20.             <TextBlock Text="文档管理" FontSize="14" FontWeight="Bold" />  
21.         </Expander.Header>  
22.         <Expander.Content>  
23.             <Grid>  
24.                 <Grid.RowDefinitions>  
25.                     <RowDefinition Height="auto"/>  
26.                     <RowDefinition Height="auto"/>  
27.                     <RowDefinition Height="auto"/>  
28.                 </Grid.RowDefinitions>  
29.                 <RadioButton Grid.Row="0">部门资料</RadioButton>  
30.                 <RadioButton Grid.Row="1">员工资料</RadioButton>  
31.                 <RadioButton Grid.Row="2">职位资料</RadioButton>  
32.             </Grid>  
33.         </Expander.Content>  
34.     </Expander>  
35.     <Expander VerticalAlignment="Stretch" ExpandDirection="Down" HorizontalContentAlignment="Left" SnapsToDevicePixels="True">  
36.         <Expander.Header>  
37.             <TextBlock Text="采购管理" FontSize="14" FontWeight="Bold" />  
38.         </Expander.Header>  
39.         <Expander.Content>  
40.             <Grid>  
41.                 <Grid.RowDefinitions>  
42.                     <RowDefinition Height="auto"/>  
43.                     <RowDefinition Height="auto"/>  
44.                     <RowDefinition Height="auto"/>  
45.                     <RowDefinition Height="auto"/>  
46.                     <RowDefinition Height="auto"/>  
47.                 </Grid.RowDefinitions>  
48.                 <RadioButton Grid.Row="0">采购计划</RadioButton>  
49.                 <RadioButton Grid.Row="1">需求分析</RadioButton>  
50.                 <RadioButton Grid.Row="2">采购单</RadioButton>  
51.                 <RadioButton Grid.Row="3">入库验收</RadioButton>  
52.                 <RadioButton Grid.Row="4">入库退回</RadioButton>  
53.             </Grid>  
54.         </Expander.Content>  
55.     </Expander>  
56.     <Expander VerticalAlignment="Stretch" ExpandDirection="Down" HorizontalContentAlignment="Left" SnapsToDevicePixels="True">  
57.         <Expander.Header>  
58.             <TextBlock Text="供应商" FontSize="14" FontWeight="Bold" />  
59.         </Expander.Header>  
60.         <Expander.Content>  
61.             <Grid>  
62.                 <Grid.RowDefinitions>  
63.                     <RowDefinition Height="auto"/>  
64.                     <RowDefinition Height="auto"/>  
65.                     <RowDefinition Height="auto"/>  
66.                 </Grid.RowDefinitions>  
67.                 <RadioButton Grid.Row="0">基本资料</RadioButton>  
68.                 <RadioButton Grid.Row="1">往来单位</RadioButton>  
69.                 <RadioButton Grid.Row="2">上游供应商</RadioButton>  
70.             </Grid>  
71.         </Expander.Content>  
72.     </Expander>  
73. </StackPanel>  

另外，通过ExpandDirection属性可控其展开的方向。

[html]  view plain  copy

 print ?

1. <Expander VerticalAlignment="Stretch" ExpandDirection="Right" HorizontalContentAlignment="Left" SnapsToDevicePixels="True">  
2.          ............  
3.   
4.  </Expander>