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>
下图是本人在实际项目中的应用: