2012-01-12 41 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>