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>