silverlight 之 – Blend 之 Accordion (五)

今天我们来研究下怎么美化Accordion,首先没有安装Toolkit 的同学请下载安装;

下载地址:http://www.codeplex.com/Silverlight/

先上最后效果图吧:

  截图17

1. 先在画布上画一个(或在代码里面写一个) AccordionItem , 注意不是 Accordion;

为什么是 AccordionItem  呢,因为Accordion的样式基本都在 AccordionItem  里面;

截图12

        <layoutToolkit:AccordionItem Content="Content" Header="Header"></layoutToolkit:AccordionItem>

2. 编辑副本》 创建一个style;

截图10

3. 编辑模板,发现这里面啥都没有,就两个对象,被骗了??

截图14

4. 继续往下创建副本,藏得够深的!!!

    后面带一个小对勾的是控件中的控件 ,(这里把他的高度调到30,默认的太小)

截图11 

5. 如果说Accordion的样式基本都在 AccordionItem  里面;

那么 AccordionItem 的样式基本都在 AccordionButton 里面;

截图16

6 . 修改AccordionButton 的style,得到想要的效果;

     回到页面敲入代码:

		<layoutToolkit:Accordion Margin="8,217,0,17" VerticalAlignment="Stretch" Width="257" BorderThickness="0" Background="{StaticResource CD}">
		   <layoutToolkit:AccordionItem  Content="Content1" Header="Header1" Style="{StaticResource MyAccordionItemStyle}" BorderThickness="0" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto"  />
		   <layoutToolkit:AccordionItem  Content="Content2" Header="Header2" Style="{StaticResource MyAccordionItemStyle}"  />
		   <layoutToolkit:AccordionItem  Content="Content3" Header="Header3" Style="{StaticResource MyAccordionItemStyle}"  />
		</layoutToolkit:Accordion>

  搞定!

  截图17

这里其实只是初步搞定了 Accordion, 像一些细节,

比如鼠标动作的样式变化都还没有做;

像 Content 只有文字肯定是不能满足要求的,应该是链接那种才比较合理;

至少找到地方改了,回头再优化吧。。。。

style.xaml 生成的新代码:

<Style x:Key="MyAccordionButtonStyle" TargetType="layoutPrimitivesToolkit:AccordionButton">
		<Setter Property="BorderThickness" Value="0"/>
		<Setter Property="Background" Value="White"/>
		<Setter Property="Foreground" Value="{StaticResource CD}"/>
		<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="TabNavigation" Value="Once"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="layoutPrimitivesToolkit:AccordionButton">
					<Grid Margin="{TemplateBinding Padding}" Background="Transparent">
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="ExpandDirectionStates">
								<VisualStateGroup.Transitions>
									<VisualTransition GeneratedDuration="0"/>
								</VisualStateGroup.Transitions>
								<VisualState x:Name="ExpandDown">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="icon" Storyboard.TargetProperty="(Grid.Column)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="icon" Storyboard.TargetProperty="(Grid.Row)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="header" Storyboard.TargetProperty="(Grid.Column)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="header" Storyboard.TargetProperty="(Grid.Row)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
											<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="cd1" Storyboard.TargetProperty="Width">
											<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
										</ObjectAnimationUsingKeyFrames>
										<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="-90"/>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="ExpandUp">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="icon" Storyboard.TargetProperty="(Grid.Column)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="icon" Storyboard.TargetProperty="(Grid.Row)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="header" Storyboard.TargetProperty="(Grid.Column)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="header" Storyboard.TargetProperty="(Grid.Row)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
											<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="cd1" Storyboard.TargetProperty="Width">
											<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
										</ObjectAnimationUsingKeyFrames>
										<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="90"/>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="ExpandLeft">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="icon" Storyboard.TargetProperty="(Grid.Column)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="icon" Storyboard.TargetProperty="(Grid.Row)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="header" Storyboard.TargetProperty="(Grid.Column)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="header" Storyboard.TargetProperty="(Grid.Row)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
											<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="rd1" Storyboard.TargetProperty="Height">
											<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="header" Storyboard.TargetProperty="LayoutTransform">
											<DiscreteObjectKeyFrame KeyTime="0">
												<DiscreteObjectKeyFrame.Value>
													<TransformGroup>
														<RotateTransform Angle="90"/>
													</TransformGroup>
												</DiscreteObjectKeyFrame.Value>
											</DiscreteObjectKeyFrame>
										</ObjectAnimationUsingKeyFrames>
										<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="0"/>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="ExpandRight">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="icon" Storyboard.TargetProperty="(Grid.Column)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="icon" Storyboard.TargetProperty="(Grid.Row)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="header" Storyboard.TargetProperty="(Grid.Column)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="header" Storyboard.TargetProperty="(Grid.Row)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
											<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="rd1" Storyboard.TargetProperty="Height">
											<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="header" Storyboard.TargetProperty="LayoutTransform">
											<DiscreteObjectKeyFrame KeyTime="0">
												<DiscreteObjectKeyFrame.Value>
													<TransformGroup>
														<RotateTransform Angle="-90"/>
													</TransformGroup>
												</DiscreteObjectKeyFrame.Value>
											</DiscreteObjectKeyFrame>
										</ObjectAnimationUsingKeyFrames>
										<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="180"/>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
							<VisualStateGroup x:Name="ExpansionStates">
								<VisualStateGroup.Transitions>
									<VisualTransition GeneratedDuration="0"/>
								</VisualStateGroup.Transitions>
								<VisualState x:Name="Collapsed">
									<Storyboard>
										<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.3" Storyboard.TargetName="icon" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="0"/>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Expanded">
									<Storyboard>
										<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.3" Storyboard.TargetName="icon" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="90"/>
										<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExpandedBackground" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
											<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFBADDE9"/>
										</ColorAnimationUsingKeyFrames>
										<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExpandedBackground" Storyboard.TargetProperty="(UIElement.Opacity)">
											<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>
										<ColorAnimation BeginTime="0" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" To="#222"/>
										<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverBackground" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
											<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFBADDE9"/>
										</ColorAnimationUsingKeyFrames>
										<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverBackground" Storyboard.TargetProperty="(UIElement.Opacity)">
											<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.3"/>
										</DoubleAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Pressed">
									<Storyboard>
										<ColorAnimation BeginTime="0" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" To="#FF003366"/>
										<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverBackground" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
											<SplineColorKeyFrame KeyTime="00:00:00" Value="#ff737573"/>
										</ColorAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Disabled">
									<Storyboard/>
								</VisualState>
							</VisualStateGroup>
							<VisualStateGroup x:Name="FocusStates">
								<VisualState x:Name="Focused">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
											<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
										</ObjectAnimationUsingKeyFrames>
										<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
											<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.385"/>
										</DoubleAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Unfocused"/>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
						<Border x:Name="background" Background="{TemplateBinding Background}" CornerRadius="1,1,1,1">
							<Grid>
								<Border x:Name="ExpandedBackground" Height="Auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Opacity="0" Background="#FFBADDE9" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1,1,1,1" d:IsHidden="True"/>
								<Border x:Name="MouseOverBackground" Height="Auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Opacity="0" Background="#FFBDBDBD" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1,1,1,1" d:IsHidden="True"/>
								<Grid Background="{StaticResource FA}">
									<Grid.ColumnDefinitions>
										<ColumnDefinition x:Name="cd0" Width="Auto"/>
										<ColumnDefinition x:Name="cd1" Width="Auto"/>
									</Grid.ColumnDefinitions>
									<Grid.RowDefinitions>
										<RowDefinition x:Name="rd0" Height="Auto" MinHeight="24"/>
										<RowDefinition x:Name="rd1" Height="Auto"/>
									</Grid.RowDefinitions>
									<Grid x:Name="icon" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" Width="19" RenderTransformOrigin="0.5,0.5" Grid.Column="0" Grid.Row="0" Margin="0" UseLayoutRounding="False" d:LayoutRounding="Auto">
										<Grid.RenderTransform>
											<TransformGroup>
												<ScaleTransform/>
												<SkewTransform/>
												<RotateTransform Angle="-90"/>
												<TranslateTransform/>
											</TransformGroup>
										</Grid.RenderTransform>
										<Path x:Name="arrow" Stroke="#666" StrokeThickness="2" Height="Auto" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center" Width="Auto" RenderTransformOrigin="0.5,0.5" Data="M 1,1.5 L 4.5,5 L 8,1.5">
											<Path.RenderTransform>
												<TransformGroup>
													<ScaleTransform/>
													<SkewTransform/>
													<RotateTransform/>
													<TranslateTransform/>
												</TransformGroup>
											</Path.RenderTransform>
										</Path>
									</Grid>
									<layoutToolkit:LayoutTransformer x:Name="header" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="6,2,6,0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Column="1" Grid.Row="0" Grid.RowSpan="1" VerticalAlignment="Center"/>
								</Grid>
							</Grid>
						</Border>
						<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1" IsHitTestVisible="false" Visibility="Collapsed"/>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	
	<Style x:Key="MyAccordionItemStyle" TargetType="layoutToolkit:AccordionItem">
		<Setter Property="BorderThickness" Value="1"/>
		<Setter Property="BorderBrush" Value="#FFECECEC"/>
		<Setter Property="Foreground" Value="{StaticResource CD}"/>
		<Setter Property="Background" Value="White"/>
		<Setter Property="Margin" Value="0"/>
		<Setter Property="Padding" Value="0"/>
		<Setter Property="HorizontalAlignment" Value="Stretch"/>
		<Setter Property="VerticalAlignment" Value="Stretch"/>
		<Setter Property="HorizontalContentAlignment" Value="Left"/>
		<Setter Property="VerticalContentAlignment" Value="Top"/>
		<Setter Property="IsTabStop" Value="False"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="layoutToolkit:AccordionItem">
					<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Background="{TemplateBinding Background}">
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="CommonStates">
								<VisualStateGroup.Transitions>
									<VisualTransition GeneratedDuration="0"/>
								</VisualStateGroup.Transitions>
								<VisualState x:Name="Normal"/>
								<VisualState x:Name="Pressed"/>
								<VisualState x:Name="MouseOver"/>
								<VisualState x:Name="Disabled"/>
							</VisualStateGroup>
							<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">
									<Storyboard>
										<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(ExpandableContentControl.Percentage)">
											<SplineDoubleKeyFrame KeySpline="0.2,0,0,1" KeyTime="00:00:00.3" Value="0"/>
										</DoubleAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames BeginTime="00:00:00.3" Duration="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(UIElement.Visibility)">
											<DiscreteObjectKeyFrame KeyTime="00:00:00">
												<DiscreteObjectKeyFrame.Value>
													<Visibility>Collapsed</Visibility>
												</DiscreteObjectKeyFrame.Value>
											</DiscreteObjectKeyFrame>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Expanded">
									<Storyboard>
										<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(ExpandableContentControl.Percentage)">
											<SplineDoubleKeyFrame KeySpline="0.2,0,0,1" KeyTime="00:00:00.3" Value="1"/>
										</DoubleAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
							<VisualStateGroup x:Name="LockedStates">
								<VisualStateGroup.Transitions>
									<VisualTransition GeneratedDuration="0"/>
								</VisualStateGroup.Transitions>
								<VisualState x:Name="Locked">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled">
											<DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Unlocked">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled">
											<DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
							<VisualStateGroup x:Name="ExpandDirectionStates">
								<VisualStateGroup.Transitions>
									<VisualTransition GeneratedDuration="0"/>
								</VisualStateGroup.Transitions>
								<VisualState x:Name="ExpandDown">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd1" Storyboard.TargetProperty="Height">
											<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
											<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="ExpandUp">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.Row)">
											<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>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="ExpandLeft">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.ColumnSpan)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.ColumnSpan)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.RowSpan)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.RowSpan)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
										</ObjectAnimationUsingKeyFrames>
										<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>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="ExpandRight">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.ColumnSpan)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.ColumnSpan)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.RowSpan)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.RowSpan)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Row)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Column)">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
											<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd1" Storyboard.TargetProperty="Width">
											<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
						<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="1,1,1,1" Padding="{TemplateBinding Padding}">
							<Grid>
								<Grid.RowDefinitions>
									<RowDefinition x:Name="rd0" Height="Auto"/>
									<RowDefinition x:Name="rd1" Height="Auto"/>
								</Grid.RowDefinitions>
								<Grid.ColumnDefinitions>
									<ColumnDefinition x:Name="cd0" Width="Auto"/>
									<ColumnDefinition x:Name="cd1" Width="Auto"/>
								</Grid.ColumnDefinitions>
								<layoutPrimitivesToolkit:AccordionButton x:Name="ExpanderButton" Background="{TemplateBinding Background}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="True" Padding="0,0,0,0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="0,0,0,0" Style="{StaticResource MyAccordionButtonStyle}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Grid.Row="0" IsChecked="{TemplateBinding IsSelected}" Height="30"/>
								<layoutPrimitivesToolkit:ExpandableContentControl x:Name="ExpandSite" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="0,0,0,0" Style="{TemplateBinding ExpandableContentControlStyle}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Row="1" Percentage="0" RevealMode="{TemplateBinding ExpandDirection}"/>
							</Grid>
						</Border>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

说实话微软太BT了,通过鼠标操作生成这些个代码,一层一层的,还有很多类似于 0.000002,34444,33  这种莫名其妙的数字子类的;

头学两天以为这些都像css一样要自己写,吓蒙了~~~原来是用blend搞出来的。

silverlight 之 – Blend 之 Accordion (五)

silverlight 之 – Blend 之图形按钮(四)

silverlight 之 – Blend 之 Style for Button (三)

silverlight 之 – Blend 之 LinearGradientBrush (二)

silverlight 之 – Blend 一切源于Brush(一)

原文地址:https://www.cnblogs.com/zhanxp/p/1686761.html