Grubszy pasek postępu w pakiecie WP7, jak?

Question

Tworzę aplikację, która ma licznik i pasek postępu reprezentujący pozostały czas, więc jeśli licznik osiągnie 50%, wartość paska postępu wynosi 50. Jak na razie dobrze, wykonuję animację progu licznika i kończę.

Moje pytanie brzmi: w jaki sposób zwiększyć grubość paska postępu? Linia sama w sobie jest zbyt mała, a "główną atrakcją" mojej aplikacji jest pasek postępu i chcę go powiększyć. Czy mam zrobić szablon i użyć innej kontroli? (Podobnie jak przy użyciu prostokąta wizualnie). Próbowałem zmienić pasek postępu na prostokąt, ale nie wiem, jak wypełnić 60% (np.) Prostokąta.

Wszelkie pomysły? Dziękuję Ci!

Answer 1

Można to zrobić w stylu paska postępu.

W stylu domyślnego pasek postępu jest, trzeba

• Dodaj Wysokość do stylu ProgressBar, powiedzieć 30.
• zwiększyć wysokość dwóch prostokątów ProgressBarTrack i ProgressBarIndicator do 24. Są one wewnątrz elementu ControlTemplate programu ProgressBar.
• Zwiększenie wysokości HorizontalThumb do 24. Jest wewnątrz the PhoneProgressBarSliderStyle.
• W PhoneProgressBarSliderThumb ConttrolTemplate, zwiększają zarówno prostokąta szerokość i wysokość do 24

Oto wszystkie style na wszelki wypadek. :)

<ControlTemplate x:Key="PhoneProgressBarSliderThumb" TargetType="Thumb"> 
     <Rectangle Fill="{TemplateBinding Foreground}" Height="24" IsHitTestVisible="False" Width="24"/> 
    </ControlTemplate> 
    <Style x:Key="PhoneProgressBarSliderStyle" TargetType="Slider"> 
     <Setter Property="Maximum" Value="3000"/> 
     <Setter Property="Minimum" Value="0"/> 
     <Setter Property="Value" Value="0"/> 
     <Setter Property="Opacity" Value="0"/> 
     <Setter Property="IsTabStop" Value="False"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Slider"> 
        <Grid IsHitTestVisible="False"> 
         <Grid x:Name="HorizontalTemplate"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" Height="0" Template="{x:Null}"/> 
          <Thumb x:Name="HorizontalThumb" Grid.Column="1" Foreground="{TemplateBinding Foreground}" Height="24" IsTabStop="False" Template="{StaticResource PhoneProgressBarSliderThumb}"/> 
          <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" Height="0" Template="{x:Null}"/> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="ProgressBarStyle1" TargetType="ProgressBar"> 
     <Setter Property="Height" Value="30"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/> 
     <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/> 
     <Setter Property="Maximum" Value="100"/> 
     <Setter Property="IsHitTestVisible" Value="False"/> 
     <Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ProgressBar"> 
        <Grid> 
         <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> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DeterminateRoot"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Collapsed</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Value" Storyboard.TargetName="Slider1"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1000"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseOut" Exponent="1"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
              <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="2000"/> 
              <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="3000"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseIn" Exponent="1"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Value" Storyboard.TargetName="Slider2"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1000"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseOut" Exponent="1"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
              <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="2000"/> 
              <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="3000"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseIn" Exponent="1"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Value" Storyboard.TargetName="Slider3"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1000"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseOut" Exponent="1"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
              <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="2000"/> 
              <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="3000"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseIn" Exponent="1"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Value" Storyboard.TargetName="Slider4"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1000"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseOut" Exponent="1"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
              <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="2000"/> 
              <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="3000"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseIn" Exponent="1"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Value" Storyboard.TargetName="Slider5"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1000"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseOut" Exponent="1"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
              <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="2000"/> 
              <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="3000"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseIn" Exponent="1"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Slider1"> 
              <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="Slider2"> 
              <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="Slider3"> 
              <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="Slider4"> 
              <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="Slider5"> 
              <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/> 
              <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Grid x:Name="DeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Visible"> 
          <Rectangle x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" Height="24" Opacity="0.1"/> 
          <Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="24"/> 
         </Grid> 
         <Border x:Name="IndeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Collapsed"> 
          <Grid> 
           <Slider x:Name="Slider1" Foreground="{TemplateBinding Foreground}" Style="{StaticResource PhoneProgressBarSliderStyle}"/> 
           <Slider x:Name="Slider2" Foreground="{TemplateBinding Foreground}" Style="{StaticResource PhoneProgressBarSliderStyle}"/> 
           <Slider x:Name="Slider3" Foreground="{TemplateBinding Foreground}" Style="{StaticResource PhoneProgressBarSliderStyle}"/> 
           <Slider x:Name="Slider4" Foreground="{TemplateBinding Foreground}" Style="{StaticResource PhoneProgressBarSliderStyle}"/> 
           <Slider x:Name="Slider5" Foreground="{TemplateBinding Foreground}" Style="{StaticResource PhoneProgressBarSliderStyle}"/> 
          </Grid> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Answer 2

<ProgressBar Width="300" Background="White" Foreground="Red" Height="28" Margin="78,0" RenderTransformOrigin="0.5,0.5"> 
    <ProgressBar.RenderTransform> 
    <CompositeTransform ScaleY="-5"/> 
    </ProgressBar.RenderTransform> 
</ProgressBar>