該例程使用Expression Blend創(chuàng)建一個(gè)簡(jiǎn)單的圖形化Accordion幻燈效果。 主要利用ListBox的Selected和UnSelected事件，重新設(shè)計(jì)ItemContainerStyle樣式，沒(méi)有后臺(tái)代碼支持，僅僅XAML。

源碼請(qǐng)看：

<UserControl.Resources>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="grid" Background="{TemplateBinding Background}" Width="55">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" To="55" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid" >
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseIn" Springiness="6" Oscillations="0"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" To="500" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid" >
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseIn" Springiness="6" Oscillations="0" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="#FFAFAFAF" Margin="10">
<ListBox SelectedIndex="0" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" BorderBrush="{x:Null}" Background="{x:Null}" VerticalAlignment="Center" HorizontalAlignment="Center" Height="285" Margin="10">
<Image Source="B.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="A.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="C.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="D.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="E.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
</ListBox>
</Grid>