现在的位置: 首页 > 综合 > 正文

Silverlight 5中Accordion样式

2013年10月07日 ⁄ 综合 ⁄ 共 10907字 ⁄ 字号 评论关闭

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>

下图是本人在实际项目中的应用:

抱歉!评论已关闭.