5

幅120のグリッド内でプログレスバー(IsIndertiminate = true)を使用すると、プログレスバーのアニメーションがかなり奇妙に見えます。プログレスドットは、間に適切な間隔がない状態で並んで移動しているようです。また、これ(幅が狭い)により、開始時と終了時にそれぞれドットが遠ざかったり近づいたりする効果はあまり目立ちません。

それで、限られた幅で表示しているときに、progressBarの見栄えを良くするにはどうすればよいですか。自分でprogressBarのプロパティを検索して変更しようとしましたが、満足のいく状態に到達できませんでした。

編集:grid.row内で、progressBarの幅を「auto」に設定することで、望ましい間隔/外観を実現できました(まだ完璧ではありませんが、機能します)。

4

2 に答える 2

1

これはプログレス バーのデフォルト スタイルであり、各 Rectangle を変更できます。

<Style x:Key="PerformanceProgressBarStyle1" TargetType="toolkit:PerformanceProgressBar">
        <Setter Property="IsIndeterminate" Value="False"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="IsHitTestVisible" Value="False"/>
        <Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:PerformanceProgressBar">
                    <ProgressBar x:Name="EmbeddedProgressBar" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsIndeterminate="{TemplateBinding ActualIsIndeterminate}" Padding="{TemplateBinding Padding}">
                        <ProgressBar.Template>
                            <ControlTemplate TargetType="ProgressBar">
                                <toolkitPrimitives:RelativeAnimatingContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                                    <toolkitPrimitives:RelativeAnimatingContentControl.Resources>
                                        <ExponentialEase x:Key="ProgressBarEaseOut" EasingMode="EaseOut" Exponent="1"/>
                                        <ExponentialEase x:Key="ProgressBarEaseIn" EasingMode="EaseIn" Exponent="1"/>
                                    </toolkitPrimitives:RelativeAnimatingContentControl.Resources>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Determinate"/>
                                            <VisualState x:Name="Indeterminate">
                                                <Storyboard Duration="00:00:04.4" RepeatBehavior="Forever">
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateRoot">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Visible</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 EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="R2TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="X" Storyboard.TargetName="R3TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="X" Storyboard.TargetName="R4TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="X" Storyboard.TargetName="R5TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </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>
                                    <Border x:Name="IndeterminateRoot" Margin="{TemplateBinding Padding}">
                                        <Grid HorizontalAlignment="Left">
                                            <Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R1TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R2" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R2TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R3" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R3TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R4" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R4TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R5" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R5TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                        </Grid>
                                    </Border>
                                </toolkitPrimitives:RelativeAnimatingContentControl>
                            </ControlTemplate>
                        </ProgressBar.Template>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="VisibilityStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.25" To="Normal"/>
                                    <VisualTransition GeneratedDuration="0:0:0.75" To="Hidden"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="EmbeddedProgressBar"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ProgressBar>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

たとえば、設定するだけWidht = "2" Height = "2"で、必要なものになるかもしれません。

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

長方形だけでなく、任意の形状を使用することもできます。ProgresBar にこのスタイルを割り当てることを忘れないでください。

その助けを願っています。

于 2013-04-09T06:24:00.743 に答える