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

  • 相关阅读:
    RESTful API 介绍,设计
    golang web框架设计7:整合框架
    golang web框架设计6:上下文设计
    golang web框架设计5:配置设计
    golang web框架设计4:日志设计
    golang web框架设计3:controller设计
    golang web框架设计2:自定义路由
    golang web框架设计1:框架规划
    深入理解golang: channels
    服务端高并发分布式十四次架构演进之路
  • 原文地址:https://www.cnblogs.com/zhanxp/p/1686761.html
Copyright © 2020-2023  润新知