Progressbar Punkte Abstand Problem in Windows Phone

Question

Wenn ich Fortschrittsbalken (IsIntertiminate = true) in einem Raster der Breite sagen, 120, dann scheint die Fortschrittsbalken Animation ziemlich seltsam. Der Fortschrittspunkt scheint sich seitlich zu bewegen, ohne irgendeinen richtigen Abstand dazwischen. Aufgrund dieser (geringeren Breite) ist auch der Effekt, dass sich die Punkte am Anfang und am Ende weg bewegen/näher kommen, nicht ganz sichtbar.

Also, wie kann ich die Fortschrittsbalken besser aussehen, wenn ich es in begrenzter Breite anzeigen. Ich habe versucht zu suchen und einige Änderungen in ProgressBars Eigenschaft selbst vorzunehmen, konnte aber keinen befriedigenden Zustand erreichen.

BEARBEITEN: Innerhalb meines grid.row, durch Einstellen der Breite meiner progressBar auf "auto" konnte ich wünschenswerten Abstand erreichen/Aussehen (es ist immer noch nicht perfekt, aber wird für mich arbeiten).

Answer 1

Es erfordert nur einige Anpassung der Steuerelemente StyleTemplate, um einige Anpassungen an den Formen vorzunehmen, die als ProgressBar selbst fungieren.

Ich habe momentan keine Standardvorlage für die WP7 ProgressBar vor mir, aber wenn Sie Ihr Projekt in Expression Blend öffnen, klicken Sie mit der rechten Maustaste darauf und wählen "Vorlage bearbeiten -> Kopie bearbeiten (ODER Original bearbeiten), um die Style-Vorlage zu sehen, Sie sehen die Formen und ich denke, sogar die Storyboard-Animation (en) können nach Ihren Wünschen bearbeitet werden

Wenn Sie eine Kopie der Standardvorlage bereitstellen ich bin sicher, dass wir eine Lösung für Sie ziemlich schnell zücken konnte, wenn man es nicht selbst tun bekommen. Hoffe, das hilft :)

Answer 2

es ist Standardstil von Fortschrittsbalken, und Sie können jedes Rechteck ändern!

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

Zum Beispiel einfach Widht = "2" Height = "2" setzen Vielleicht ist es das, was Sie brauchen!

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

Sie können auch eine beliebige Form verwenden, nicht nur Rechtecke. Vergessen Sie nicht, diesen Stil für Ihre ProgresBar zuzuweisen.

Hoffen Sie, dass es hilft.