导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

如何为 Windows Phone 8 创建自定义的不确定进度条

2014/6/18

适用于:Windows Phone OS 7.1

Microsoft 建议您在您的应用中,使用 ProgressBar 控件来指示较长操作的进度。但是,如果您计划添加一个不确定的进度条,那么使用 ProgressBar 类可能会降低您的 Windows Phone OS 7.1 应用的性能。这是因为 ProgressBar 的 Windows Phone OS 7.1 实现在 UI 线程上运行不确定的进度条,而不是在组合线程上。

若要获得最佳性能,可以使用 CustomIndeterminateProgressBar 示例添加一个在组合线程上运行的不确定进度条。本主题介绍此示例的工作方式,以及如何使用它来向应用中添加不确定的进度条。

说明注意:

在 Windows Phone 8 中,已更新了 ProgressBar 控件,不再存在当其被用作不确定的进度条时出现的相同性能问题。如果您正在创建面向 Windows Phone 8 的应用,您应该使用 ProgressBar

本主题包括以下部分。

本节介绍此示例的工作方式,但您无需为了使用此示例而阅读本节。如果您希望按原样使用此示例,请跳至下一节并遵循说明。

创建 CustomIndeterminateProgressBar 示例的目的是为了解决两个问题:

  • 需要不确定的进度条运行在组合线程上以获得最佳性能。

  • 需要可以处理缩放(方向更改的结果)的进度条。

在 XAML 代码和另外的 .cs 文件中实现该解决方案。

在 XAML 代码中

  1. 在 App.xaml 中用于 CustomIndeterminateProgressBar 的 Style 包含一个用于 Indeterminate 状态的自定义 VisualStateDoubleAnimationUsingKeyFrames 对象用于模拟不确定的进度条。

  2. 每个关键帧的 Value 都是以“.1”或“.2”结尾的数字,用作一种命名惯例来标识值。当页面方向改变时,自定义处理器查找具有此后缀的值并将其分别转换为控件宽度或高度的百分比。

  3. CustomIndeterminateProgressBar 在 MainPage.xaml 中实例化。在此示例中,一个按钮控制进度条是否可见,并且切换 Visibility 和 IsIndeterminateProperty 标记。为了获得最佳性能,当您生成应用时,您可能希望确定进度条是否可见以及当屏幕上不显示时是否正在运行。

在代码隐藏文件中

RelativeAnimatingContentControl.cs 文件包含在方向发生更改时缩放不确定进度条的逻辑。当方向更改时,采取以下步骤:

  1. 对于任何包含 StoryboardVisualState,每个 DoubleAnimationDoubleAnimationUsingKeyFrames 值发送给两个处理方法之一。

  2. 以“.1”结尾的任何双动画关键帧值都去掉“.1”并且更新为控件宽度的百分比。例如,Value="33.1" 用于 33% 的百分比。如果方向发生更改并且控件的新宽度为 480,那么这个关键帧值将更改为大约 160。

  3. 以“.2”结尾的任何双动画关键帧值都去掉“.2”并且更新为控件高度的百分比。

获取示例并创建项目的步骤

  1. 下载 CustomIndeterminateProgressBar 示例

  2. “Visual Studio”中创建新的“Windows Phone 应用”项目。

  3. “解决方案资源浏览器”中,右键单击项目名称,然后使用“添加”“现有项”将示例中的 RelativeAnimatingContentControl.cs 文件添加到根目录。

添加 CustomIndeterminateProgressBar 样式的步骤

  1. 打开 App.xaml 文件。在 <Application> 标记中,添加具有其他命名空间声明的以下 XMLNS 声明:

    xmlns:unsupported="clr-namespace:Microsoft.Phone.Controls.Unsupported"
    
  2. <Application.Resources> 标记内添加以下 XAML 代码:

    <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>
    

添加 CustomInderminateProgressBar 的步骤

  1. 以下代码将 IsIndeterminate 标记设置为 true,因此当您运行此示例时就会立即看到进度条。若要在 XAML 代码中添加进度条,请使用以下代码:

    <ProgressBar 
       IsIndeterminate="true"
       x:Name="customIndeterminateProgressBar"
       Style="{StaticResource CustomIndeterminateProgressBar}"
    />
    

    将上面的代码添加到 MainPage.xaml 的 <Grid> 标记内,该标记的 ContentPanel 为 x:Name。

  2. 在您的应用中使用进度条时,确保该进度条设置为 IsIndeterminate = false 并且当未使用进度条时 Visibility 属性设置为 Collapsed。为了进行演示,此示例通过设置一个在单击处理程序中切换这些值的按钮来完成该操作。或者,如果您不希望设置和切换这些值,则可以设置在 IsIndeterminate 上使用数据绑定。

    出于此示例(使用一个按钮来切换值)的目的,向 MainPage.xaml 中添加以下代码,直接放在上一步中的 ProgressBar 代码下面:

    <Button Content="Toggle ProgressBar" Height="72" HorizontalAlignment="Left" Margin="81,450,0,0" Name="toggleButton" VerticalAlignment="Top" Width="300" Click="toggleButton_Click" />
    
    

    在单击处理程序中使用以下代码来切换值:

    customIndeterminateProgressBar.IsIndeterminate = !(customIndeterminateProgressBar.IsIndeterminate);
    
    if (customIndeterminateProgressBar.Visibility == Visibility.Collapsed)
    {
       customIndeterminateProgressBar.Visibility = Visibility.Visible;
    }
    else
    {
       customIndeterminateProgressBar.Visibility = Visibility.Collapsed;
    }
    
    

显示:
© 2015 Microsoft