Windows Phone零距离开发(Composite Thread组合线程)

时间：2023-03-10 00:24:55
Windows Phone零距离开发(Composite Thread组合线程)

简洁流畅，快速响应是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体验。