Accordion組件在開發中常用于信息的分類顯示。本文將為大家介紹該組件的特性以及通過一個實例講述該組件的基本運用。

?

組件所在命名控件：

System.Windows.Controls

?

組件常用方法：

SelectAll：選擇所有位于Accordion組件中的Accordion項。（全部打開）

UnselectAll：不選擇任一位于Accordion組件中的Accordion項。（全部閉合）

?

組件常用屬性：

AccordionButtonStyle：獲取或設置被應用于在Accordion項中的Accordion按鈕元素的樣式。

ContentTemplate：獲取或設置被用于顯示每個已生成的Accordion項內容的數據模板。

ExpandDirection：獲取或設置在Accordion組件中每一個Accordion項的展開方向以及Accordion組件自身的布局方向。

ItemContainerStyle：獲取或設置被應用于為每一項生成的容器元素的樣式。

SelectedIndex：獲取或設置當前選中的Accordion項的索引。

SelectedIndices：獲取當前選中的Accordion項的所有索引。

SelectedItem：獲取或設置被選中的項。

SelectedItems：獲取被選中的所有項。

SelectionMode：獲取或設置Accordion組件的選擇模式。

SelectionSequence：獲取或設置被用于決定Accordion項選擇順序的選擇序列。

?

組件常用事件：

SelectedItemsChanged：當SelectedItems集合變動時發生。

SelectionChanged：當SelectedItem或SelectedItems屬性值發生改變時發生。

?

實例：

詳細的說明在代碼中給出。該實例還給出了Accordion組件的鼠標滑過效果顯示。

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:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit" x:Class="SilverlightClient.MainPage"

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

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

??????? <StackPanel>

??????? ??? <layoutToolkit:Accordion x:Name="acc" Grid.Column="0" Width="130" Margin="8,8,0,0">

??????????????? <layoutToolkit:AccordionItem>

??????????????????? <!--AccordionItem的Header屬性可以看成是模板-->

??????????????????? <layoutToolkit:AccordionItem.Header>

??????????????????????? <StackPanel Orientation="Horizontal">

??????????????????????????? <Image Source="gold.png"/>

??????????????????????????? <TextBlock Text="News"/>

??????????????????????? </StackPanel>

??????????????????? </layoutToolkit:AccordionItem.Header>

??????????? ??????? <!--AccordionItem的Content屬性可以看成是模板-->

??????????? ??????? <layoutToolkit:AccordionItem.Content>

??????????????? ???? ???<StackPanel>

??????????????????? ??????? <TextBlock Text="This is a test1."/>

??????????????????????? ??? <TextBlock Text="This is a test2."/>

??????????????????????? ??? <TextBlock Text="This is a test3."/>

??????????????????? ??? </StackPanel>

??????????????? ??? </layoutToolkit:AccordionItem.Content>

??????????? ??? </layoutToolkit:AccordionItem>

??????????????? <layoutToolkit:AccordionItem Content="DatabaseAndOther">

??????????????????? <layoutToolkit:AccordionItem.Header>

??????????????????????? <StackPanel Orientation="Horizontal">

??????????????????????????? <Image Source="silver.png"/>

??????????????????????????? <TextBlock Text="Data"/>

??????????????????????? </StackPanel>

??????????????????? </layoutToolkit:AccordionItem.Header>

??????????????? </layoutToolkit:AccordionItem>

??????????? </layoutToolkit:Accordion>

??????????? <layoutToolkit:Accordion x:Name="ac" Grid.Column="0" Width="130" Margin="8,8,0,0" SelectionMode="ZeroOrOne">

??????????????? <layoutToolkit:AccordionItem Content="test1" Header="Test1"/>

??????????????? <layoutToolkit:AccordionItem Content="test2" Header="Test2"/>

??????????????? <layoutToolkit:AccordionItem Content="test3" Header="Test3"/>

??????????????? <layoutToolkit:AccordionItem Content="test4" Header="Test4"/>

??????????? </layoutToolkit:Accordion>

??????? </StackPanel>

??????? <ComboBox x:Name="cbSelectionMode" Height="28" HorizontalAlignment="Right" Margin="0,10,8,0" VerticalAlignment="Top" Width="109"/>

??????? <TextBlock Height="16" Margin="151,15,121,0" VerticalAlignment="Top" Text="選擇模式" TextWrapping="Wrap" Width="48" FontSize="12"/>

??????? <TextBlock Height="20" Margin="151,45,121,0" VerticalAlignment="Top" Text="展開模式" TextWrapping="Wrap" Width="48" FontSize="12"/>

??????? <ComboBox x:Name="cbExpandDirection" Height="28" HorizontalAlignment="Right" Margin="0,42,8,0" VerticalAlignment="Top" Width="109"/>

??? </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 accselectionmode

??? {

??????? public string SelectionModeName { get; set; }

??????? public AccordionSelectionMode theSelectionMode { get; set; }

??? }

?

??? public class accexpanddirection

??? {

??????? public string ExpandDirectionName { get; set; }

??????? public ExpandDirection theDerection { get; set; }

??? }

?

??? public partial class MainPage : UserControl

??? {

??????? //ComboBox數據源定義

??????? List<accselectionmode> cbSelectionModeList = new List<accselectionmode>();

??????? List<accexpanddirection> cbExpandDirectionList = new List<accexpanddirection>();

?

??????? public MainPage()

??????? {

??????????? InitializeComponent();

??????????? //注冊事件觸發處理

??????????? this.Loaded += new RoutedEventHandler(MainPage_Loaded);

??????????? this.cbSelectionMode.SelectionChanged += new SelectionChangedEventHandler(cbSelectionMode_SelectionChanged);

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

??????????? this.ac.Loaded += new RoutedEventHandler(ac_Loaded);

??????? }

?

??????? void MainPage_Loaded(object sender, RoutedEventArgs e)

??????? {

??????????? //初始化cbSelectionMode

??????????? cbSelectionModeList.Add(new accselectionmode() { SelectionModeName = "一個", theSelectionMode = AccordionSelectionMode.One });

??????????? cbSelectionModeList.Add(new accselectionmode() { SelectionModeName = "一個或多個", theSelectionMode = AccordionSelectionMode.OneOrMore });

?????? ?????cbSelectionModeList.Add(new accselectionmode() { SelectionModeName = "零個或一個", theSelectionMode = AccordionSelectionMode.ZeroOrOne });

??????????? cbSelectionModeList.Add(new accselectionmode() { SelectionModeName = "零個或多個", theSelectionMode = AccordionSelectionMode.ZeroOrMore });

??????????? cbSelectionMode.ItemsSource = cbSelectionModeList;

??????????? cbSelectionMode.DisplayMemberPath = "SelectionModeName";

??????????? //初始化cbExpandDirection

??????????? cbExpandDirectionList.Add(new accexpanddirection() { ExpandDirectionName = "上", theDerection = ExpandDirection.Up });

??????????? cbExpandDirectionList.Add(new accexpanddirection() { ExpandDirectionName = "下", theDerection = ExpandDirection.Down });

??????????? cbExpandDirectionList.Add(new accexpanddirection() { ExpandDirectionName = "左", theDerection = ExpandDirection.Left });

??????????? cbExpandDirectionList.Add(new accexpanddirection() { ExpandDirectionName = "右", theDerection = ExpandDirection.Right });

??????????? cbExpandDirection.ItemsSource = cbExpandDirectionList;

??????????? cbExpandDirection.DisplayMemberPath = "ExpandDirectionName";

??????? }

?

??????? void cbExpandDirection_SelectionChanged(object sender, SelectionChangedEventArgs e)

??????? {

??????????? //調整Accordion的展開方向

??????????? if (cbExpandDirection.SelectedItem != null)

??????????? {

??????????????? accexpanddirection ad = cbExpandDirection.SelectedItem as accexpanddirection;

??????????????? acc.ExpandDirection = ad.theDerection;

??????????? }

??????? }

?

??????? void cbSelectionMode_SelectionChanged(object sender, SelectionChangedEventArgs e)

??????? {

??????????? //調整Accordion的選擇模式

??????????? if (cbSelectionMode.SelectedItem != null)

??????????? {

??????????????? accselectionmode am = cbSelectionMode.SelectedItem as accselectionmode;

??????????????? acc.SelectionMode = am.theSelectionMode;

??????????? }

??????? }

?

??????? //滑動展開效果

??????? void ac_Loaded(object sender, RoutedEventArgs e)

??????? {

??????????? foreach (AccordionItem ai in ac.Items)

??????????? {

??????????????? AccordionItem container = ai;

??????????????? if (container != null)

??????????????? {

??????????????????? container.MouseEnter += (s, args) =>

??????????????????? {

??????????????????????? if (!container.IsLocked)

??????????????????????? {

???????????????????? ???????container.IsSelected = true;

??????????????????????? }

??????????????????? };

?

??????????????????? container.MouseLeave += (s, args) =>

??????????????????? {

??????????????????????? if (!container.IsLocked)

??????????????????????? {

??????????????? ????????????container.IsSelected = false;

??????????????????????? }

??????????????????? };

??????????????? }

??????????? }

??????? }

??? }

}

?

最終效果圖

作者：Kinglee
文章出處：Kinglee’s Blog (http://www.cnblogs.com/Kinglee/)
版權聲明：本文的版權歸作者與博客園共有。轉載時須注明本文的詳細鏈接，否則作者將保留追究其法律責任。

轉載于:https://www.cnblogs.com/Kinglee/archive/2009/09/13/1565982.html

總結

以上是生活随笔為你收集整理的有关Accordion组件的研究——Silverlight学习笔记[27]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。