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(一)

你可能感兴趣的:(silverlight)