首页 > 代码库 > WPF——Expander控件（转)

WPF——Expander控件（转)

2024-07-13 19:31:18   227人阅读

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属性设置，如下面一个简单的例子：

  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都可以为任何对象，只要能正常显示即可。

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

　　

 
 

 

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

  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属性可控其展开的方向。

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


联系
我们