尝试旋转模板中的网格

时间：2012-01-12 13:14:03

标签： silverlight templates xaml

我想创建一个带有方向箭头的扩展器，以便在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度，这样我就可以将它用于侧面。

Expander

2 个答案:

答案 0 :(得分：0)

如果我理解你在问什么，我想如果你看一下默认的Expander模板就可以得到答案。您可以通过创建新的临时项目，在画板上删除Expander，然后在“对象”列表中右键单击它并创建模板副本来完成此操作。

你会看到Expander有ExpandUp，ExpandDown，ExpandLeft和ExpandRight的VisualStates。对于不同的方向，每个州都会将Expander ToggleButton换成上/下，左或右模板。每个方向还配置Expander的网格，将按钮和扩展区域放在正确的位置。

您需要创建左右ToggleButton模板。这就是你可以设计箭头指向正确方向的地方。然后在Expander的左右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>

答案 1 :(得分：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>
相关问题
最新问题