简洁流畅，快速响应是Windows Phone的特点也是他的买点，我们在开发App时候，也要在手机有限的硬件性能上最大限度做到UI快速响应，微软在优化手机快速响应这块做了很多底层优化工作，其中有一个就是我们要讨论的Composite Thread。

Composite Thread这个中文叫组合线程也有翻译叫构图线程。很多人对Composite Thread都并不了解，也不知道这是干什么的，因为毕竟有关Composite Thread的有关资料确实很少，而且Composite Thread最早不是在WPF/Silverlight上实现的，而是首先在Silverlight For Windows Phone 7上实现的，等到Silverlight5才引进Composite Thread。

说了那么多，那Composite Thread到底是可以用来干嘛用的，一言以蔽之就是，可以把动画剥离开UI线程到组合线程上执行。

在WP7开发中，我们如果用让用户等待一个耗时操作的完成，会用一个ProgressBar控件来提示让用户等待流程的完成。但ProgressBar有一个很不好的地方就是他是在UI线程上执行的，如果这个时候UI线程大量计算操作时候，ProgressBar就会卡成白痴（注:WP8的ProgressBar没有这个问题）。这个时候，一个叫做PerformanceProgressBar控件就闪亮登场出来救场了，PerformanceProgressBar很对得起它的Performance的Title，因为他可以做到不卡UI线程。

可能大家很好奇，因为我们知道一般更改UI操作只能是在UI线程上进行，而动画也是在更改UI，但PerformanceProgressBar却可以在非UI线程上执行动画。PerformanceProgressBar是Silverlight For WP Toolkit下一个开源控件，我们可以直接通过源码来看到他的具体实现。

通过源码我们可以看到PerformanceProgressBar仅仅只是在ProgressBar的基础上重新定制了他的Style

<PerformanceProgressBar

                x:Name="customIndeterminateProgressBar"

                IsIndeterminate="true"

                Style="{StaticResource CustomIndeterminateProgressBar}"

            />
<Style x:Key="CustomIndeterminateProgressBar" TargetType="ProgressBar">

            <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>

            <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>

            <Setter Property="Maximum" Value="100"/>

            <Setter Property="IsHitTestVisible" Value="False"/>

            <Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ProgressBar">

                        <unsupported:RelativeAnimatingContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

                            <unsupported:RelativeAnimatingContentControl.Resources>

                                <ExponentialEase EasingMode="EaseOut" Exponent="1" x:Key="ProgressBarEaseOut"/>

                                <ExponentialEase EasingMode="EaseOut" Exponent="1" x:Key="ProgressBarEaseIn"/>

                            </unsupported:RelativeAnimatingContentControl.Resources>

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Determinate"/>

                                    <VisualState x:Name="Indeterminate">

                                        <Storyboard RepeatBehavior="Forever" Duration="00:00:04.4">

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateRoot">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Visible</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DeterminateRoot">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Collapsed</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="X" Storyboard.TargetName="R1TT">

                                                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="33.1" EasingFunction="{StaticResource ProgressBarEaseOut}"/>

                                                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="100.1" EasingFunction="{StaticResource ProgressBarEaseIn}"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="R2TT">

                                                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="33.1" EasingFunction="{StaticResource ProgressBarEaseOut}"/>

                                                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="100.1" EasingFunction="{StaticResource ProgressBarEaseIn}"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="X" Storyboard.TargetName="R3TT">

                                                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="33.1" EasingFunction="{StaticResource ProgressBarEaseOut}"/>

                                                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="100.1" EasingFunction="{StaticResource ProgressBarEaseIn}"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="X" Storyboard.TargetName="R4TT">

                                                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="33.1" EasingFunction="{StaticResource ProgressBarEaseOut}"/>

                                                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="100.1" EasingFunction="{StaticResource ProgressBarEaseIn}"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="X" Storyboard.TargetName="R5TT">

                                                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="33.1" EasingFunction="{StaticResource ProgressBarEaseOut}"/>

                                                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="100.1" EasingFunction="{StaticResource ProgressBarEaseIn}"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R1">

                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>

                                                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R2">

                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>

                                                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R3">

                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>

                                                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R4">

                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>

                                                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R5">

                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>

                                                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>

                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Grid>

                                <Grid x:Name="DeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Visible">

                                    <Rectangle x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" Height="4" Opacity="0.1"/>

                                    <Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="4"/>

                                </Grid>

                                <Border x:Name="IndeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Collapsed">

                                    <Grid HorizontalAlignment="Left">

                                        <Rectangle Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R1" Opacity="0" CacheMode="BitmapCache">

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform x:Name="R1TT"/>

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                        <Rectangle Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R2" Opacity="0" CacheMode="BitmapCache">

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform x:Name="R2TT"/>

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                        <Rectangle Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R3" Opacity="0" CacheMode="BitmapCache">

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform x:Name="R3TT"/>

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                        <Rectangle Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R4" Opacity="0" CacheMode="BitmapCache">

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform x:Name="R4TT"/>

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                        <Rectangle Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R5" Opacity="0" CacheMode="BitmapCache">

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform x:Name="R5TT"/>

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                    </Grid>

                                </Border>

                            </Grid>

                        </unsupported:RelativeAnimatingContentControl>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

在上面的Style里，ProgressBar的进度动画被封装在VisualStateGroup里，动画类型是DoubleAnimation,凡是DoubleAnimation的动画都会自动在Composite Thread上执行，从而做到不卡UI线程，Silverlight的动画就是在一个时间轴上不停改变依赖属性的值，也就是只要是动画Double类型的依赖属性(比如动画TranslateTransform X Y的值，动画UI的Opacity透明度)，那么这些动画都会转到Composite Thread上执行。

总结

Composite Thread的存在是为了从UI线程剥离DoubleAnimation动画出来,提高UI快速响应能力。

DoubleAnima类型的动画会自动在Composite Thread上运行。

开发WP7时候，要用Toolkit下的PerformanceProgressBar替代系统的自带的ProgressBar来获得更好的UI体验。

最新文章

  1. JAVA语言的本质优势
  2. Docker的单主机容器网络
  3. Spark延长SparkContext初始化时间
  4. hadoop作业调优参数整理及原理(转)
  5. 有趣的EditView为空时的抖动效果（用户名和密码）--第三方开源--ClearEditText
  6. github创建repo，本地导入git项目到github
  7. JS input文本框禁用右键和复制粘贴功能的代码
  8. 关于T-SQL重编译那点事，内联函数和表值函数在编译生成执行计划的区别
  9. IE 第三方设置cookie失效
  10. BZOJ 1367([Baltic2004]sequence-左偏树+中位数贪心)
  11. 【leetcode列】3Sum
  12. 201521123051《Java程序设计》第十四周学习总结
  13. 调用webService的几种方式
  14. php对某个页面设置基础认证登录设置
  15. 关于Promise的记录和理解
  16. linux apache2部署php
  17. SpringBoot执行定时任务
  18. 通过改hosts访问wikipedia
  19. 20165313 《Java程序设计》第八周学习总结
  20. java重载

热门文章

  1. java多线程的使用2
  2. ISO14229系列之一：简介
  3. vmware虚拟机挂起后无法再恢复(转)
  4. oninput 属性
  5. HDU 3535 【背包】
  6. Sqoop导入MySQL数据
  7. 【转】又一波你可能不知道的 Linux 命令行网络监控工具
  8. Hive分布式的数据仓库
  9. .NET调用Java写的WebServices(可能会碰到的问题)
  10. 使用JDBC构建简单的数据访问层