Попытка повернуть Грид, который находится в шаблоне

Question

Я хочу создать расширитель со стрелками направления для расширения в 4 направлениях.Например, когда расширитель находится вверху страницы, он расширяется вниз, а стрелки, указывающие вниз, поворачиваются на 180 градусов.Теперь, когда расширитель находится в левой части страницы, он должен расширяться вправо.Но мои стрелки должны указывать вправо, чтобы пользователь знал, что он должен щелкнуть расширитель, чтобы развернуться вправо.

На данный момент стрелки представляют собой 4 линии, направленные вниз.Но они должны указывать правильно.Я попытался использовать rotatetransform, но я не могу обратиться к нему, потому что я думаю, что не могу обратиться к ключу в шаблоне извне шаблона, поэтому моя двойная анимация поворота на -45 градусов выдает ошибку, говорящую, что она не может найти 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 градусов, чтобы я мог использовать их для всех сторон.

Answer 1

Я создал 4 возможных состояния и добавил их в ресурсы сетки. Таким образом, когда вызывается определенное направление, оно идет за соответствующим шаблоном. Таким образом, стрелки являются уникальными для каждого шаблона, больше нет необходимости их вращать.

вот xaml для 4 шаблонов, надеюсь, кто-то может их использовать

<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>

Answer 2

Если я понимаю, что вы спрашиваете, я думаю, вы можете получить ответ, если вы посмотрите на шаблон Expander по умолчанию. Это можно сделать, создав новый временный проект, поместив Expander на монтажную область, щелкнув его правой кнопкой мыши в списке объектов и создав копию шаблона.

Вы увидите, что Expander имеет VisualStates для ExpandUp, ExpandDown, ExpandLeft и ExpandRight. Для разных направлений каждое состояние заменяет кнопку Expander ToggleButton на шаблоны вверх / вниз, влево или вправо. Каждое направление также настраивает сетку экспандера, чтобы кнопка и область экспандера находились в правильных положениях.

Вам необходимо создать левый и правый шаблоны ToggleButton. Вот где вы можете разработать стрелки, чтобы указывать правильный путь. Затем в левом и правом визуальных состояниях Expander укажите эти шаблоны.

Надеюсь, это имеет смысл. Я думаю, что если вы посмотрите на шаблон по умолчанию, это должно быть ясно, но прошло уже много времени с тех пор, как я это сделал. Я помню, что они не сделали все состояния, хотя.

Вот мой пример 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>