Problema di spaziatura punti di Progressbar in Windows Phone

Question

Quando utilizzo la barra di avanzamento (IsIndertiminate = true) all'interno di una griglia di larghezza dire 120, l'animazione della barra di avanzamento sembra piuttosto strana. Il punto di avanzamento sembra spostarsi in posizione laterale senza alcuna spaziatura adeguata tra di loro. Inoltre, a causa di questo (meno larghezza), l'effetto dei punti che si allontanano o si avvicinano rispettivamente all'inizio e alla fine non è abbastanza visibile.

Quindi, come posso rendere il progresso come un aspetto migliore quando lo visualizzo in larghezza limitata. Ho provato a cercare e apportare alcune modifiche in corso, ma la proprietà di Bar non è riuscita a raggiungere uno stato soddisfacente.

MODIFICA: All'interno del mio grid.row, impostando la larghezza della mia barra di avanzamento su "auto" sono riuscito a ottenere spaziatura/aspetto desiderabili (non è ancora perfetto ma funzionerà per me).

Answer 1

Richiede solo una personalizzazione di tale controllo StyleTemplate per apportare alcune modifiche alle forme che fungono da ProgressBar stesso.

Non ho un modello di stile predefinito per il WP7 ProgressBar di fronte a me al momento, ma se apri il tuo proj in Expression Blend, fai clic destro e scegli "Modifica modello -> Modifica una copia (OPPURE Modifica originale) per esporre il modello di stile, vedrai le forme e penso che anche le animazioni dello storyboard siano pronte per essere modificate per il tuo desiderio.

Se si fornisce una copia del modello predefinito Sono sicuro che potremmo ottenere una soluzione per te abbastanza velocemente se non la ottieni tu. Spero che questo aiuti :)

Answer 2

È lo stile predefinito della barra di avanzamento e puoi modificare ogni rettangolo!

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

Ad esempio basta impostare Widht = "2" Height = "2" Potrebbe essere quello che ti serve!

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

È inoltre possibile utilizzare qualsiasi forma, non solo i rettangoli. Non dimenticare di assegnare questo stile al tuo ProgresBar.

Spero che sia d'aiuto.