Accordion去掉头部箭头,完全自定义头部样式。
样式如下:
<Style TargetType="toolkit:AccordionItem" x:Key="AccordionItemBgStyle">
<Setter Property="BorderBrush" Value="#777A7C"/>
<Setter Property="BorderThickness" Value="1,1,1,0"/>
<Setter Property="FontFamily" Value="SimSun" />
<Setter Property="FontSize" Value="12" />
</Style>
<Style x:Key="AccordionButtonStyle" TargetType="toolkit:AccordionButton">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="White"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="FontFamily" Value="SimSun" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:AccordionButton">
<Grid Background="Transparent" Margin="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpandDirectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="ExpandDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="header">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="header">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd1">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandUp">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="header">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="header">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd1">
<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="header">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="header">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd1">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="header">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="header">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="header">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd1">
<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="header">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TransformGroup>
<RotateTransform Angle="-90"/>
</TransformGroup>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed"/>
<VisualState x:Name="Expanded">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ExpandedBackground">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ExpandedBackground">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked"/>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition From="MouseOver" GeneratedDuration="00:00:00.1" To="Normal"/>
<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>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="MouseOverBackground">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBackground">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="MouseOverBackground">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard/>
</VisualState>
</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>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualElement">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.385"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="background" CornerRadius="1,1,1,1" >
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#e8e8e8"/>
<GradientStop Color="#f2f2f2" Offset="0.517"/>
<GradientStop Color="#d5d5d5" Offset="0.954"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Border x:Name="ExpandedBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="1,1,1,1" Height="Auto" Margin="0,0,0,0" Opacity="0" VerticalAlignment="Stretch"/>
<Border x:Name="MouseOverBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="1,1,1,1" Height="Auto" Margin="0,0,0,0" Opacity="0" VerticalAlignment="Stretch"/>
<Grid Background="Transparent">
<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>
<toolkit:LayoutTransformer x:Name="header" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="6,6,6,0" Grid.Row="0" Grid.RowSpan="1"/>
</Grid>
</Grid>
</Border>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" RadiusY="1" RadiusX="1" Stroke="Transparent" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
在Accordion控件中的引用:
<toolkit:Accordion Width="350">
<toolkit:AccordionItem Header="AAA" Style="{StaticResource AccordionItemBgStyle}" AccordionButtonStyle="{StaticResource AccordionButtonStyle}">
<Grid>
<TextBlock Text=" AAA"/>
</Grid>
</toolkit:AccordionItem>
<toolkit:AccordionItem Header="BBB" Style="{StaticResource AccordionItemBgStyle}" AccordionButtonStyle="{StaticResource AccordionButtonStyle}">
<Grid>
<TextBlock Text=" BBB"/>
</Grid>
</toolkit:AccordionItem>
<toolkit:AccordionItem Header="CCC" Style="{StaticResource AccordionItemBgStyle}" AccordionButtonStyle="{StaticResource AccordionButtonStyle}">
<Grid>
<TextBlock Text=" CCC"/>
</Grid>
</toolkit:AccordionItem>
</toolkit:Accordion>
下图是本人在实际项目中的应用: