有关Expander组件的研究

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 =newList<ExpanderDirectionHelper>();

       

        public MainPage()

        {

            InitializeComponent();

            //注册事件触发

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);

            this.btnOpen.Click +=newRoutedEventHandler(btnOpen_Click);

            this.btnClose.Click +=newRoutedEventHandler(btnClose_Click);

            this.cbExpandDirection.SelectionChanged +=newSelectionChangedEventHandler(cbExpandDirection_SelectionChanged);

            this.sampleExpander.Expanded +=newRoutedEventHandler(sampleExpander_Expanded);

            this.sampleExpander.Collapsed +=newRoutedEventHandler(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.SelectedItemasExpanderDirectionHelper).theDirection;

            }

        }

 

        void MainPage_Loaded(object sender,RoutedEventArgs e)

        {

            //cbExpandDirection填充内容准备

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

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

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

            cbExpanderDirectionList.Add(newExpanderDirectionHelper() { 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;

        }

    }

}

 

最终效果图：

 

 

 

<Grid><Grid.RowDefinitions><RowDefinition Height="Auto"  /><RowDefinition Height="*"  /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><toolkit:Expander x:Name="radExpander" ExpandDirection="Up" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsExpanded="True"><toolkit:Expander.Header><Canvas Width="15" HorizontalAlignment="Center" VerticalAlignment="Center"><TextBlock Text="Hidden" x:Name="THeader" Canvas.Top="-8" FontSize="15" Height="Auto" FontFamily="SimSun" VerticalAlignment="Center" TextWrapping="Wrap"/></Canvas></toolkit:Expander.Header><toolkit:Expander.Content><Grid><Grid.RowDefinitions><RowDefinition Height="*"  /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="Auto" /></Grid.ColumnDefinitions><Part Name="QueryExecutePartNew" State="EDIT" PartSource="QueryExecutePartNew" EntitySource="kitAnalyzeFieldControl" PageActions="REFRESH,QUERY" ToolbarMode="Mini" /></Grid></toolkit:Expander.Content></toolkit:Expander><core:SmartWindowGrid Name="QueryResultGrid" Grid.Row="1" /></Grid>