Expander组件常用做边栏目录的分类，比如Windows中“我的文档”的侧边栏。本文将为大家介绍该组件的基本特性以及实际应用。

组件所在命名空间：

System.Windows.Controls

组件常用方法：

OnCollapsed：当IsExpanded属性由true转变为false时，引发已闭合（Collapsed）事件。

OnExpanded：当IsExpanded属性由false转变为true时，引发已展开（Expanded）事件。

组件常用属性：

ExpandDirection：获取或设置该组件内容窗口的打开方向。

IsExpanded：获取或设置一个值用来表示该组件的内容窗口是否可见。

组件常用事件：

Collapsed：当该组件的内容窗口闭合且只有组件头部可见时发生。

Expanded：当该组件的内容窗口打开并且同时显示组件头部和内容窗口时发生。

实例：

说明：本实例还同时介绍该组件模板的自定义。

详细内容在代码注释中给出。

MainPage.xaml文件代码：

<UserControl

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" x:Class="SilverlightClient.MainPage"

d:DesignWidth="320" d:DesignHeight="240">

<Grid x:Name="LayoutRoot" Width="320" Height="240" Background="White">

<controlsToolkit:Expander x:Name="sampleExpander" Margin="90,22,110,0" VerticalAlignment="Top" Width="120">

<!--Expander头部模板开始-->

<controlsToolkit:Expander.HeaderTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<Image Source="sidelist.png" Height="16" Width="16"/>

<TextBlock Text="头部" FontSize="14"/>

</StackPanel>

</DataTemplate>

</controlsToolkit:Expander.HeaderTemplate>

<!--Expander头部模板结束-->

<!--Expander内容模板开始-->

<controlsToolkit:Expander.ContentTemplate>

<DataTemplate>

<StackPanel>

<TextBlock Text="Test Content 1"/>

<TextBlock Text="Test Content 2"/>

<TextBlock Text="Test Content 3"/>

</StackPanel>

</DataTemplate>

</controlsToolkit:Expander.ContentTemplate>

<!--Expander内容模板结束-->

</controlsToolkit:Expander>

<Border Height="54" Margin="146,0,8,8" VerticalAlignment="Bottom" BorderBrush="Black" BorderThickness="1">

<TextBlock x:Name="tbResult" Foreground="Red" FontSize="14" Margin="0,0,-2,-2" TextWrapping="Wrap"/>

</Border>

<Button x:Name="btnOpen" Height="25" HorizontalAlignment="Left" Margin="8,0,0,66" VerticalAlignment="Bottom" Width="63" Content="展开" FontSize="13.333"/>

<Button x:Name="btnClose" Height="25" HorizontalAlignment="Left" Margin="75,0,0,66" VerticalAlignment="Bottom" Width="63" Content="闭合" FontSize="13.333"/>

<ComboBox x:Name="cbExpandDirection" Height="25" FontSize="14" HorizontalAlignment="Left" Margin="8,0,0,8" VerticalAlignment="Bottom" Width="130"/>

<TextBlock Height="25" Margin="11,0,0,33" Text="展开方向：" TextWrapping="Wrap" FontSize="12" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="60"/>

<TextBlock Height="25" Margin="146,0,101,66" VerticalAlignment="Bottom" Text="事件结果：" TextWrapping="Wrap" d:LayoutOverrides="HorizontalAlignment" FontSize="13.333"/>

</Grid>

</UserControl>

MainPage.xaml.cs文件代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SilverlightClient

{

//定义辅助类

public class ExpanderDirectionHelper

{

public string ExpanderDirectionName { get; set; }

public ExpandDirection theDirection { get; set; }

}

public partial class MainPage : UserControl

{

List<ExpanderDirectionHelper> cbExpanderDirectionList = new List<ExpanderDirectionHelper>();

public MainPage()

{

InitializeComponent();

//注册事件触发

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

this.btnOpen.Click += new RoutedEventHandler(btnOpen_Click);

this.btnClose.Click += new RoutedEventHandler(btnClose_Click);

this.cbExpandDirection.SelectionChanged += new SelectionChangedEventHandler(cbExpandDirection_SelectionChanged);

this.sampleExpander.Expanded += new RoutedEventHandler(sampleExpander_Expanded);

this.sampleExpander.Collapsed += new RoutedEventHandler(sampleExpander_Collapsed);

}

void sampleExpander_Collapsed(object sender, RoutedEventArgs e)

{

tbResult.Text = "闭合事件发生！";

}

void sampleExpander_Expanded(object sender, RoutedEventArgs e)

{

tbResult.Text = "展开事件发生！";

}

void cbExpandDirection_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (cbExpandDirection.SelectedItem != null)

{

//设置Expander展开方向

sampleExpander.ExpandDirection = (cbExpandDirection.SelectedItem as ExpanderDirectionHelper).theDirection;

}

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

//cbExpandDirection填充内容准备

cbExpanderDirectionList.Add(new ExpanderDirectionHelper() { ExpanderDirectionName = "上", theDirection = ExpandDirection.Up });

cbExpanderDirectionList.Add(new ExpanderDirectionHelper() { ExpanderDirectionName = "下", theDirection = ExpandDirection.Down });

cbExpanderDirectionList.Add(new ExpanderDirectionHelper() { ExpanderDirectionName = "左", theDirection = ExpandDirection.Left });

cbExpanderDirectionList.Add(new ExpanderDirectionHelper() { ExpanderDirectionName = "右", theDirection = ExpandDirection.Right });

cbExpandDirection.ItemsSource = cbExpanderDirectionList;

cbExpandDirection.DisplayMemberPath = "ExpanderDirectionName";

cbExpandDirection.SelectedIndex = 1;

}

void btnClose_Click(object sender, RoutedEventArgs e)

{

sampleExpander.IsExpanded = false;

}

void btnOpen_Click(object sender, RoutedEventArgs e)

{

sampleExpander.IsExpanded = true;

}

}

}

最终效果图：