2012-01-12 40 views
0

我想创建一个带方向箭头的扩展器,以便在4个方向上展开。就像扩展器位于页面顶部时一样,它会向下扩展,向下箭头会旋转180度。现在,当扩展器位于页面的左侧时,它应该向右扩展。但是我的箭头应该指向正确,以便用户知道必须点击扩展器才能向右扩展。试图旋转模板中的网格

目前,箭头指向4行。但他们应该指出正确的。我尝试使用rotatetransform,但我无法解决它,因为我认为我无法在模板外部寻址模板中的某个键,所以旋转-45度的doubleanimation会引发错误,指出它无法找到myTransform。

对此的任何想法?

<Style x:Key="ExpanderNoButtonStyle" TargetType="toolkit:Expander"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="toolkit:Expander"> 
        <Grid Background="Transparent"> 
         <vsm:VisualStateManager.VisualStateGroups> 
          <vsm:VisualStateGroup x:Name="ExpandDirectionStates"> 
           <vsm:VisualStateGroup.Transitions> 
            <vsm:VisualTransition GeneratedDuration="0"/> 
           </vsm:VisualStateGroup.Transitions> 
           <vsm:VisualState x:Name="ExpandLeft"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.Column)"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Row)"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
             </ObjectAnimationUsingKeyFrames> 
             <DoubleAnimation Storyboard.TargetName="myTransform" Storyboard.TargetProperty="Angle" From="0.0" To="-45.0" Duration="0" /> 
            </Storyboard> 
           </vsm:VisualState> 
          </vsm:VisualStateGroup> 
         </vsm:VisualStateManager.VisualStateGroups> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto" x:Name="rd0"/> 
           <RowDefinition Height="Auto" x:Name="rd1"/> 
          </Grid.RowDefinitions> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto" x:Name="cd0"/> 
           <ColumnDefinition Width="Auto" x:Name="cd1"/> 
          </Grid.ColumnDefinitions> 
          <ToggleButton Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" Grid.Column="0" Grid.Row="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{TemplateBinding IsExpanded}" Margin="1" MinHeight="0" MinWidth="0" x:Name="ExpanderButton" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"> 
           <ToggleButton.Template> 
            <ControlTemplate TargetType="ToggleButton"> 
             <Grid> 
              <Grid.Background> 
               <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5,1"> 
                <GradientStop Color="white" Offset="0"/> 
                <GradientStop Color="#FFAAAAAA" Offset="1"/> 
               </LinearGradientBrush> 
              </Grid.Background> 
              <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> 
               <Grid.RenderTransform> 
                <RotateTransform x:Name="myTransform" Angle="0" CenterX="7.5" CenterY="7.5"/> 
               </Grid.RenderTransform> 
               <Ellipse Width="15" Height="15" Fill="#FF888888"/> 
               <Line Stroke="White" X1="3" Y1="4" X2="7.5" Y2="8" /> 
               <Line Stroke="White" X1="12" Y1="4" X2="7.5" Y2="8" /> 
               <Line Stroke="White" X1="3" Y1="8" X2="7.5" Y2="12" /> 
               <Line Stroke="White" X1="12" Y1="8" X2="7.5" Y2="12" /> 
              </Grid> 
             </Grid> 
            </ControlTemplate> 
           </ToggleButton.Template> 
          </ToggleButton> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

编辑

这是很好的版本看起来怎么样(向下展开,见箭头)。我现在想让这些箭头旋转45度,这样我就可以将它用于侧面。

Expander

+0

乍一看XAML中显示不正确。尽管你试图做的事听起来不难,但我在尝试想象你想要完成的事情时遇到了一些麻烦。如果你不介意做一个快速的肮脏的图画来展示你正在拍摄的东西,我可以告诉你如何完成它。 – 2012-01-12 15:02:40

+0

@克里斯W.:我更新了我的问题。 – Terry 2012-01-12 15:16:54

+0

好的抱歉,图像很小。为了确保我有这个正确的方向,你有4个箭头面向内,位于该线中心的圆形图案?你希望他们点击旋转四十五度,并在窗口的每个角落都面对NW,NE,SW,SE的位置,对吗? – 2012-01-12 16:25:10

回答

0

我创建了4个可能的状态,并将它们添加到网格中的资源。这样,当某个方向被调用时,它将获取适当的模板。所以箭头对于每个模板都是独一无二的,不需要再旋转它们。

这里的4个模板的XAML,希望有人能使用它们

<ControlTemplate x:Key="ExpanderDownHeaderTemplate" TargetType="ToggleButton"> 
<Grid Background="Transparent"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CheckStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="00:00:00"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Checked"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="M 1,1.5 L 4.5,5 L 8,1.5"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Unchecked"/> 
     </VisualStateGroup> 
     <VisualStateGroup x:Name="CommonStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="0"/> 
       <VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/> 
       <VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Normal"/> 
      <VisualState x:Name="MouseOver"> 
       <Storyboard> 
        <DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Pressed" /> 
     </VisualStateGroup> 
     <VisualStateGroup x:Name="FocusStates"> 
      <VisualState x:Name="Focused" /> 
      <VisualState x:Name="Unfocused"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}"> 
     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> 
      <Path x:Name="arrow" Data="M 1,4.5 L 4.5,1 L 8,4.5" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/> 
      <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="Center" Margin="10,0,0,0" VerticalAlignment="Center"/> 
     </StackPanel> 
    </Border> 
</Grid> 
</ControlTemplate> 
<ControlTemplate x:Key="ExpanderUpHeaderTemplate" TargetType="ToggleButton"> 
<Grid Background="Transparent"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CheckStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="00:00:00"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Checked"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="M 1,5 L 4.5,1.5 L 8,5"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Unchecked"/> 
     </VisualStateGroup> 
     <VisualStateGroup x:Name="CommonStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="0"/> 
       <VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/> 
       <VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Normal"/> 
      <VisualState x:Name="MouseOver"> 
       <Storyboard> 
        <DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Pressed" /> 
     </VisualStateGroup> 
     <VisualStateGroup x:Name="FocusStates"> 
      <VisualState x:Name="Focused" /> 
      <VisualState x:Name="Unfocused"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}"> 
     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> 
      <Path x:Name="arrow" Data="M 1,1 L 4.5,4.5 L 8,1" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/> 
      <ContentPresenter x:Name="header" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="Stretch" Margin="10,0,0,0" VerticalAlignment="Center"/> 
     </StackPanel> 
    </Border> 
</Grid> 
</ControlTemplate> 
<ControlTemplate x:Key="ExpanderLeftHeaderTemplate" TargetType="ToggleButton"> 
<Grid Background="Transparent"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CheckStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="00:00:00"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Checked"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="M 4.5,1 L 1,4.5 L 4.5,8"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Unchecked"/> 
     </VisualStateGroup> 
     <VisualStateGroup x:Name="CommonStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="0"/> 
       <VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/> 
       <VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Normal"/> 
      <VisualState x:Name="MouseOver"> 
       <Storyboard> 
        <DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Pressed" /> 
     </VisualStateGroup> 
     <VisualStateGroup x:Name="FocusStates"> 
      <VisualState x:Name="Focused" /> 
      <VisualState x:Name="Unfocused"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}"> 
     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" > 
      <Path x:Name="arrow" Data="M 1,1 L 4.5,4.5 L 1,8" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/> 
      <layoutToolkit:LayoutTransformer> 
       <layoutToolkit:LayoutTransformer.LayoutTransform> 
        <TransformGroup> 
         <RotateTransform Angle="270"/> 
        </TransformGroup> 
       </layoutToolkit:LayoutTransformer.LayoutTransform> 
       <ContentPresenter x:Name="header" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" Margin="0,0,10,0" Grid.Row="1" VerticalAlignment="Stretch" > 
        <!-- Content="{TemplateBinding Content}"--> 
        <ContentPresenter.Content> 
         <TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/> 
        </ContentPresenter.Content> 
       </ContentPresenter> 
      </layoutToolkit:LayoutTransformer> 
     </StackPanel> 
    </Border> 
</Grid> 
</ControlTemplate> 
<ControlTemplate x:Key="ExpanderRightHeaderTemplate" TargetType="ToggleButton"> 
<Grid Background="Transparent"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CheckStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="00:00:00"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Checked"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="M 1,1 L 4.5,4.5 L 1,8"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Unchecked"/> 
     </VisualStateGroup> 
     <VisualStateGroup x:Name="CommonStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="0"/> 
       <VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/> 
       <VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Normal"/> 
      <VisualState x:Name="MouseOver"> 
       <Storyboard> 
        <DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Pressed" /> 
     </VisualStateGroup> 
     <VisualStateGroup x:Name="FocusStates"> 
      <VisualState x:Name="Focused" /> 
      <VisualState x:Name="Unfocused"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}"> 
     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> 
      <Path x:Name="arrow" Data="M 4.5,1 L 1,4.5 L 4.5,8" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/> 
      <layoutToolkit:LayoutTransformer> 
       <layoutToolkit:LayoutTransformer.LayoutTransform> 
        <TransformGroup> 
         <RotateTransform Angle="90"/> 
        </TransformGroup> 
       </layoutToolkit:LayoutTransformer.LayoutTransform> 
       <ContentPresenter x:Name="header" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" Margin="10,0,0,0" Grid.Row="1" VerticalAlignment="Stretch"> 
        <ContentPresenter.Content> 
         <TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/> 
        </ContentPresenter.Content> 
       </ContentPresenter> 
      </layoutToolkit:LayoutTransformer> 
     </StackPanel> 
    </Border> 
</Grid> 
</ControlTemplate> 
0

如果我理解你的要求,我认为你可以得到答案,如果你看一下默认的扩展模板。您可以通过创建一个新的临时项目,在美工板上放置扩展器,然后在“对象”列表中右键单击它并创建模板副本来完成此操作。

您将看到Expander具有用于ExpandUp,ExpandDown,ExpandLeft和ExpandRight的VisualStates。对于不同的方向,每个状态都会将扩展器ToggleButton替换为上/下,左或右模板。每个方向也配置扩展器的网格将按钮和扩展器区域放在正确的位置。

您需要创建左右ToggleButton模板。这就是您可以设计箭头指向正确方向的地方。然后在扩展器的左侧和右侧VisualStates中,指向这些模板。

希望这是有道理的。我想如果你看看默认的模板,它应该很清楚,但是我已经做了一段时间了。我记得他们没有做所有的州,但。

这是我的SL示例。我们的应用程序只需要上下,所以没有左或右,但希望它可以让你开始。箭头旋转,所以你可以看到如何工作。

<ResourceDictionary 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
xmlns:System="clr-namespace:System;assembly=mscorlib" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d"> 

<ResourceDictionary.MergedDictionaries> 
    <ResourceDictionary Source="/BasicResources;component/BasicStyles.xaml"/> 
    <ResourceDictionary Source="/BasicResources;component/BasicResource.xaml"/> 
</ResourceDictionary.MergedDictionaries> 


<!-- Named fade brush for visual effect on Expander Header right edge --> 
<!-- this brush is specified here as it uses resource brushes, so will work properly with high contrast --> 
<LinearGradientBrush x:Key="ExpanderHeaderFadeBrush" StartPoint="0,0" EndPoint="1,0"> 
    <GradientStop Color="Transparent"/> 
    <GradientStop Color="{StaticResource BgColor}" Offset="1"/> 
</LinearGradientBrush> 

<Style x:Key="ExpanderHeaderBorderStyle" TargetType="Border"> 
    <Setter Property="BorderBrush" Value="{StaticResource BorderRestBrush}"/> 
    <Setter Property="BorderThickness" Value="0,0.5,0,0"/> 
    <Setter Property="VerticalAlignment" Value="Bottom"/> 
    <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Setter Property="Background" Value="{StaticResource MouseDownBgBrush}"/> 
</Style> 

<ControlTemplate x:Key="ExpanderHeaderCT" TargetType="ContentControl"> 
    <Border 
     x:Name="bdrControlFooter" 
     Style="{StaticResource ExpanderHeaderBorderStyle}" 
     Height="{TemplateBinding Height}"> 

     <Border 
      x:Name="bdrTopInner" 
      BorderBrush="{StaticResource WhiteBrush}" 
      BorderThickness="0,1,0,0"> 
      <ContentPresenter 
       Cursor="{TemplateBinding Cursor}" 
       ContentTemplate="{TemplateBinding ContentTemplate}" 
       Content="{TemplateBinding Content}" 
       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
       Margin="{TemplateBinding Padding}" 
       VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
     </Border> 
    </Border> 
</ControlTemplate> 

<Style x:Key="ExpanderHeaderContentStyle" TargetType="ContentControl"> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
    <Setter Property="VerticalContentAlignment" Value="Top" /> 
    <Setter Property="Height" Value="44" /> 
    <Setter Property="Template" Value="{StaticResource ExpanderHeaderCT}" /> 
</Style> 

<!-- down button template --> 
<ControlTemplate x:Key="ExpanderDownHeaderTemplate" TargetType="ToggleButton"> 
    <Grid Background="Transparent"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CheckStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0:0:0.1"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Checked"> 
        <Storyboard> 
         <DoubleAnimation Duration="0" To="45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="pathTwirly" /> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Unchecked"/> 
       <VisualState x:Name="Indeterminate"/> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0:0:0.3"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Normal"/> 
       <VisualState x:Name="MouseOver"> 
        <Storyboard> 
         <ColorAnimation Duration="0" To="{StaticResource OrangeColor}" FillBehavior="HoldEnd" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="header" /> 
         <ColorAnimation Duration="0" To="{StaticResource OrangeColor}" FillBehavior="HoldEnd" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="pathTwirly" /> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Pressed"> 
       </VisualState> 
       <VisualState x:Name="Disabled"/> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="FocusStates"> 
       <VisualState x:Name="Focused"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement"> 
          <DiscreteObjectKeyFrame KeyTime="0"> 
           <DiscreteObjectKeyFrame.Value> 
            <Visibility>Visible</Visibility> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Unfocused"/> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 

     <Grid Background="Transparent"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="58"/> 
       <RowDefinition Height="Auto" /> 
      </Grid.RowDefinitions> 

      <ContentControl x:Name="contentOuter" 
       Style="{StaticResource ExpanderHeaderContentStyle}" 
       VerticalContentAlignment="Stretch" 
       VerticalAlignment="Stretch" 
       Height="58"> 

       <Grid x:Name="gInnerGrid" 
        Background="{StaticResource GradientHeaderBgBrush}" > 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="50"/> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 

        <Path x:Name="pathTwirly" 
         Data="F1 M 0.000,10.000 L 5.500,4.999 L 0.000,0.000 L 0.000,10.000 Z" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center" 
         Margin="35,0,0,0" 
         RenderTransformOrigin="0.5,0.5"> 
         <Path.RenderTransform> 
          <CompositeTransform/> 
         </Path.RenderTransform> 
         <Path.Fill> 
          <SolidColorBrush x:Name="brushPathFill" Color="{StaticResource BlueColor}" /> 
         </Path.Fill> 
        </Path> 

        <Rectangle x:Name="rectFade" 
         Grid.Column="1" 
         Width="75" 
         HorizontalAlignment="Right" 
         Fill="{StaticResource ExpanderHeaderFadeBrush}"/> 

        <TextBlock x:Name="header" 
         Text="{TemplateBinding Content}" 
         Style="{StaticResource BlueSmallHeadingText}" 
         Grid.Column="1" 
         HorizontalAlignment="Stretch" 
         Margin="4,0,0,0" 
         VerticalAlignment="Center"> 
         <TextBlock.Foreground> 
          <SolidColorBrush x:Name="brushHeader" Color="{StaticResource BlueColor}"/> 
         </TextBlock.Foreground> 
        </TextBlock> 
       </Grid> 
      </ContentControl> 
     </Grid> 

     <!-- strokedasharray specified here .. silverlight bug that it won't pick up that style element. works fine in up! --> 
     <Rectangle x:Name="FocusVisualElement" 
      Style="{StaticResource LinkRectangleFocusStyle}" 
      IsHitTestVisible="false" 
      StrokeThickness="1" 
      StrokeDashArray="1,3" 
      Visibility="Collapsed"/> 
    </Grid> 
</ControlTemplate> 

<!-- up button template --> 
<ControlTemplate x:Key="ExpanderUpHeaderTemplate" TargetType="ToggleButton"> 
    <Grid Background="Transparent"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CheckStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="00:00:0.1"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Checked"> 
        <Storyboard> 
         <DoubleAnimation Duration="0" To="-45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="pathTwirly" /> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Unchecked"/> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0:0:0.3"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Normal"/> 
       <VisualState x:Name="MouseOver"> 
        <Storyboard> 
         <ColorAnimation Duration="0" To="{StaticResource OrangeColor}" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="header" /> 
         <ColorAnimation Duration="0" To="{StaticResource OrangeColor}" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="pathTwirly" /> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Pressed"/> 
       <VisualState x:Name="Disabled"/> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="FocusStates"> 
       <VisualState x:Name="Focused"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Unfocused"/> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 

     <Grid Background="Transparent"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="58"/> 
       <RowDefinition Height="Auto" /> 
      </Grid.RowDefinitions> 

      <ContentControl x:Name="contentOuter" 
       Style="{StaticResource ExpanderHeaderContentStyle}" 
       VerticalContentAlignment="Stretch" 
       Height="58"> 

       <Grid x:Name="gInnerGrid" 
        Background="{StaticResource GradientHeaderBgBrush}"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="50"/> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 

        <Path x:Name="pathTwirly" 
         Data="F1 M 0.000,10.000 L 5.500,4.999 L 0.000,0.000 L 0.000,10.000 Z" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center" 
         Margin="35,0,0,0" 
         RenderTransformOrigin="0.5,0.5"> 
         <Path.RenderTransform> 
          <CompositeTransform/> 
         </Path.RenderTransform> 
         <Path.Fill> 
          <SolidColorBrush x:Name="brushPathFill" Color="{StaticResource BlueColor}"/> 
         </Path.Fill> 
        </Path> 

        <Rectangle x:Name="rectFade" 
         Grid.Column="1" 
         Width="75" 
         HorizontalAlignment="Right" 
         Fill="{StaticResource ExpanderHeaderFadeBrush}"/> 

        <TextBlock x:Name="header" 
         Text="{TemplateBinding Content}" 
         Style="{StaticResource BlueSmallHeadingText}" 
         Grid.Column="1" 
         HorizontalAlignment="Stretch" 
         Margin="4,0,0,0" 
         VerticalAlignment="Center"> 
         <TextBlock.Foreground> 
          <SolidColorBrush x:Name="brushHeader" Color="{StaticResource BlueColor}"/> 
         </TextBlock.Foreground> 
        </TextBlock> 
       </Grid> 
      </ContentControl> 
     </Grid> 

     <Rectangle x:Name="MouseOverBorderElement" 
      Style="{StaticResource RectangleMouseOverStyle}" 
      Grid.ColumnSpan="2" 
      Opacity="0"/> 

     <Rectangle x:Name="FocusVisualElement" 
      Style="{StaticResource LinkRectangleFocusStyle}" 
      IsHitTestVisible="false" 
      Visibility="Collapsed"/> 

    </Grid> 
</ControlTemplate> 

<!-- main expander template --> 
<ControlTemplate x:Key="ExpanderCT" TargetType="toolkit:Expander"> 
    <Grid Background="Transparent"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Normal"/> 
       <VisualState x:Name="Disabled"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="DisabledVisualElement"> 
          <DiscreteObjectKeyFrame KeyTime="0"> 
           <DiscreteObjectKeyFrame.Value> 
            <Visibility>Visible</Visibility> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="MouseOver"/> 
       <VisualState x:Name="Pressed"/> 
      </VisualStateGroup> 
      <!-- focus comes from the expander togglebutton --> 
      <VisualStateGroup x:Name="FocusStates"> 
       <VisualState x:Name="Focused"/> 
       <VisualState x:Name="Unfocused"/> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="ExpansionStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Collapsed"/> 
       <VisualState x:Name="Expanded"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ExpandSite"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="ExpandDirectionStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="ExpandDown"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd1"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="ExpandUp"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Template" Storyboard.TargetName="ExpanderButton"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpanderUpHeaderTemplate}"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpanderButton"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="ExpandLeft" /> 
       <VisualState x:Name="ExpandRight" /> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 

     <!-- begin layout --> 
     <Border x:Name="Background" 
      BorderBrush="{TemplateBinding BorderBrush}" 
      BorderThickness="{TemplateBinding BorderThickness}" 
      Background="{TemplateBinding Background}"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition x:Name="cd0" Width="Auto"/> 
        <ColumnDefinition x:Name="cd1" Width="Auto"/> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition x:Name="rd0" Height="Auto"/> 
        <RowDefinition x:Name="rd1" Height="Auto"/> 
       </Grid.RowDefinitions> 

       <ToggleButton x:Name="ExpanderButton" 
        ContentTemplate="{TemplateBinding HeaderTemplate}" 
        Content="{TemplateBinding Header}" 
        Grid.Column="0" 
        Foreground="{TemplateBinding Foreground}" 
        FontWeight="{TemplateBinding FontWeight}" 
        FontStyle="{TemplateBinding FontStyle}" 
        FontStretch="{TemplateBinding FontStretch}" 
        FontSize="{TemplateBinding FontSize}" 
        FontFamily="{TemplateBinding FontFamily}" 
        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
        IsChecked="{TemplateBinding IsExpanded}" 
        Margin="0" 
        MinWidth="0" 
        MinHeight="0" 
        Padding="{TemplateBinding Padding}" 
        Grid.Row="0" 
        Template="{StaticResource ExpanderDownHeaderTemplate}" 
        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 

       <ContentControl x:Name="ExpandSite" 
        ContentTemplate="{TemplateBinding ContentTemplate}" 
        Content="{TemplateBinding Content}" 
        Grid.Column="0" 
        Foreground="{TemplateBinding Foreground}" 
        FontWeight="{TemplateBinding FontWeight}" 
        FontStyle="{TemplateBinding FontStyle}" 
        FontStretch="{TemplateBinding FontStretch}" 
        FontSize="{TemplateBinding FontSize}" 
        FontFamily="{TemplateBinding FontFamily}" 
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
        Margin="{TemplateBinding Padding}" 
        Grid.Row="1" 
        Visibility="Collapsed" 
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
      </Grid> 
     </Border> 

     <Border x:Name="DisabledVisualElement" 
      Style="{StaticResource BorderDisabledStyle}" 
      IsHitTestVisible="false" 
      Visibility="Collapsed"/> 

     <Border x:Name="FocusVisualElement" 
      Style="{StaticResource BorderFocusStyle}" 
      IsHitTestVisible="false" 
      Visibility="Collapsed"/> 
    </Grid> 
</ControlTemplate> 

<!-- styles the expander header .. the top line and background color --> 

<Style TargetType="toolkit:Expander"> 
    <Setter Property="BorderThickness" Value="0"/> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
    <Setter Property="Template" Value="{StaticResource ExpanderCT}"/> 
</Style>