Sự cố khoảng cách giữa các chấm tiến trình trong Windows Phone

Question

Khi tôi sử dụng thanh tiến trình (IsIndertiminate = true) bên trong lưới có chiều rộng là 120, thì hoạt ảnh thanh tiến trình có vẻ khá lạ. Dấu chấm tiến triển dường như đang di chuyển sidebyside mà không có khoảng cách thích hợp nào giữa chúng. Ngoài ra, do điều này (độ rộng ít hơn), hiệu ứng của các dấu chấm nhận được di chuyển ra/nhận được gần hơn ở đầu và cuối tương ứng là không khá rõ ràng.

Vì vậy, làm cách nào tôi có thể làm cho ProgressBar trông đẹp hơn khi tôi hiển thị nó ở độ rộng giới hạn. Tôi đã cố gắng để tìm kiếm và thực hiện một số thay đổi trong tiến trìnhBar của tài sản bản thân mình nhưng không thể đạt được một trạng thái thỏa đáng.

EDIT: Bên trong grid.row của tôi, bằng cách thiết lập chiều rộng của tiến trình của tôi thành "tự động" tôi đã có thể đạt được khoảng cách mong muốn/nhìn (nó vẫn không hoàn hảo nhưng sẽ làm việc cho tôi).

Answer 1

Nó chỉ yêu cầu một số tùy chỉnh các điều khiển đó StyleTemplate để thực hiện một số điều chỉnh cho các hình dạng hoạt động như chính số ProgressBar.

Tôi không có mẫu kiểu mặc định cho thanh tiến trình WP7 trước mặt mình, nhưng nếu bạn mở proj trong Expression Blend, hãy nhấp chuột phải vào nó và chọn "Edit Template -> Edit A Copy (HOẶC Chỉnh sửa Bản gốc) để hiển thị Mẫu Kiểu, bạn sẽ thấy các hình dạng và tôi cho rằng ngay cả các hoạt ảnh trong Kịch bản lái xe đã sẵn sàng để chỉnh sửa theo mong muốn của bạn. Tôi chắc rằng chúng tôi có thể đưa ra giải pháp cho bạn khá nhanh nếu bạn không tự mình làm được. Hy vọng điều này sẽ giúp ích:

Answer 2

Đó là kiểu thanh tiến trình mặc định và bạn có thể sửa đổi mỗi Hình chữ nhật!

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

Ví dụ: chỉ cần đặt Widht = "2" Height = "2" Có thể đó là những gì bạn cần!

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

Bạn cũng có thể sử dụng bất kỳ hình dạng nào, không chỉ hình chữ nhật. Đừng quên gán phong cách này cho ProgresBar của bạn.

Hy vọng sự trợ giúp của nó.