有关Expander组件的研究——Silverlight学习笔记[33]
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;
}
}
}
最终效果图：
![有关Expander组件的研究——Silverlight学习笔记[33]_第1张图片](http://img.e-com-net.com/image/product/a22cb83a91494f1c978ed31738481077.png)
文章出处：Kinglee’s Blog ( http://www.cnblogs.com/Kinglee/)
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。