ProgressBar dày hơn trong WP7, làm thế nào?

Question

im tạo ứng dụng có bộ đếm và thanh tiến trình biểu thị thời gian còn lại, vì vậy nếu bộ đếm đạt đến 50%, giá trị thanh tiến trình là 50. Cho đến giờ rất tốt, tôi tạo một thanh tiến trình của tổng số lượt truy cập và tiếp tục.

Câu hỏi của tôi là: Làm thế nào tôi có thể làm cho thanh tiến trình dày hơn? Dòng chính nó quá nhỏ và "điểm thu hút chính" của ứng dụng của tôi là thanh tiến trình và tôi muốn làm cho nó lớn hơn. Tôi có phải tạo một mẫu và sử dụng một điều khiển khác không? (Giống như sử dụng một hình chữ nhật trực quan). Tôi đã thử thay đổi thanh tiến trình thành hình chữ nhật nhưng tôi không biết cách lấp đầy 60% (ví dụ) của hình chữ nhật.

Bất kỳ ý tưởng nào? Cảm ơn bạn!

Answer 1

Điều này có thể được thực hiện theo kiểu của thanh tiến trình.

Trong phong cách thanh tiến trình của mặc định, bạn cần phải

• Thêm một Height là phong cách ProgressBar, nói 30.
• Tăng Chiều cao của hai hình chữ nhật ProgressBarTrack và ProgressBarIndicator đến 24. Họ là bên trong ControlTemplate của ProgressBar.
• Tăng chiều cao HorizontalThumb đến 24. Đó là bên trong PhoneProgressBarSliderStyle.
• Trong PhoneProgressBarSliderThumb ConttrolTemplate, tăng cả Width và Height Rectangle để 24.

Dưới đây là tất cả các phong cách chỉ trong trường hợp. :)

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