Windows Phoneでプログレスバードット間隔の問題が発生する

Question

グリッド内で進捗バー（IsIndertiminate = true）を120と指定すると、プログレスバーアニメーションが非常に奇妙に見えます。進歩のドットは、両サイドの間に適切な間隔を置かずにサイドサイドサイドを動いているようです。また、これ（幅が狭い）のために、ドットの移動が始まりと終わりのそれぞれに近づくという効果は、あまり見えません。

これで、限られた幅で表示しているときに、progressBarの表示を改善する方法を教えてください。 私は進行中にいくつかの変更を検索して試してみましたが、自分自身の財産でしたが、満足できる状態には達しませんでした。

EDIT：私のprogressBarの幅を "auto"に設定することで、私は望ましい間隔/見栄えを達成することができました（まだ完全ではありませんが、私にとってはうまくいくでしょう）。

Answer 1

コントロールStyleTemplateをカスタマイズするだけで、ProgressBarとして機能するシェイプを調整するだけで済みます。

現時点で私の目の前にWP7 ProgressBar用のデフォルトのスタイルテンプレートはありませんが、Expression Blendでプロジエクトを開いた場合は、右クリックして[テンプレートの編集 - >コピーを編集OR Edit Original）を使用してスタイルテンプレートを公開すると、図形が表示され、ストーリーボードアニメーションでも編集可能な状態になります。

デフォルトテンプレートもしあなたがそれを手に入れなければ、私たちはあなたのための解決策を素早く手早く引き出すことができると確信しています：

Answer 2

これはデフォルトスタイルのプログレスバーで、各矩形を変更できます！

<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にこのスタイルを割り当てるのを忘れないでください。

ヘルプが必要です。