Silverlight ProgressBar Theme for WPF ProgressBar

Question

我嘗試使用WPF中Silverlight工具包TwilightBlue主題中的ProgressBar樣式。它不會拋出任何錯誤，但進度條不會填充。風格如下。

<!-- ProgressBar --> 
<Style TargetType="ProgressBar"> 
    <Setter Property="Foreground" Value="{StaticResource TextBrush}" /> 
    <Setter Property="Background"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FFB4B4B4" /> 
       <GradientStop Color="#FFFFFFFF" Offset="1" /> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="BorderThickness" Value="0.75,0.75,1.5,1.5" /> 
    <Setter Property="Maximum" Value="100" /> 
    <Setter Property="IsTabStop" Value="False" /> 
    <Setter Property="BorderBrush" Value="{StaticResource PrimaryBrush}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ProgressBar"> 
       <Grid x:Name="Root"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="0.5*" /> 
         <RowDefinition Height="0.5*" /> 
        </Grid.RowDefinitions> 
        <vsm:VisualStateManager.VisualStateGroups> 
         <vsm:VisualStateGroup x:Name="CommonStates"> 
          <vsm:VisualState x:Name="Determinate" /> 
          <vsm:VisualState x:Name="Indeterminate"> 
           <Storyboard RepeatBehavior="Forever"> 
            <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="IndeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="DeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
            </ObjectAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateGradientFill" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.Transform).(TransformGroup.Children)[0].X"> 
             <SplineDoubleKeyFrame KeyTime="0" Value="0" /> 
             <SplineDoubleKeyFrame KeyTime="00:00:.5" Value="20" /> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </vsm:VisualState> 
         </vsm:VisualStateGroup> 
        </vsm:VisualStateManager.VisualStateGroups> 
        <Border CornerRadius="4" x:Name="White" BorderBrush="#FFFFFFFF" BorderThickness="1.2" Grid.RowSpan="2"> 
         <Border.Background> 
          <RadialGradientBrush> 
           <RadialGradientBrush.RelativeTransform> 
            <TransformGroup> 
             <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.35" ScaleY="1.35" /> 
            </TransformGroup> 
           </RadialGradientBrush.RelativeTransform> 
           <GradientStop Color="#FFFFFFFF" Offset="0" /> 
           <GradientStop Color="#FFFFFFFF" Offset="1" /> 
          </RadialGradientBrush> 
         </Border.Background> 
        </Border> 
        <Border x:Name="ProgressBarTrack" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1.2,1.2,1.2,1.2" CornerRadius="4,4,4,4" Grid.RowSpan="2" Opacity="0.65" /> 
        <Grid x:Name="ProgressBarRootGrid" Grid.RowSpan="2"> 
         <Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="ProgressBarRootGradient" Canvas.ZIndex="1" Stroke="#FFFFFFFF" StrokeThickness="1" RadiusX="4" RadiusY="4" Opacity="0.65"> 
          <Rectangle.Fill> 
           <LinearGradientBrush EndPoint="0.7,1.263" StartPoint="0.699999988079071,0"> 
            <GradientStop Color="{StaticResource PrimaryColor}" Offset="0.312" /> 
            <GradientStop Color="{StaticResource SecondaryColor}" Offset="1" /> 
           </LinearGradientBrush> 
          </Rectangle.Fill> 
         </Rectangle> 
         <Grid x:Name="IndeterminateRoot" Visibility="Collapsed"> 
          <Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="IndeterminateSolidFill" Opacity="1" RenderTransformOrigin="0.5,0.5" Fill="{TemplateBinding Foreground}" Stroke="#FF448DCA" StrokeThickness="0" RadiusX="4" RadiusY="4" /> 
          <Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="IndeterminateGradientFill" Opacity="0.7" StrokeThickness="1" RadiusX="4" RadiusY="4"> 
           <Rectangle.Fill> 
            <LinearGradientBrush MappingMode="Absolute" SpreadMethod="Repeat" EndPoint="0,1" StartPoint="20,1"> 
             <LinearGradientBrush.Transform> 
              <TransformGroup> 
               <TranslateTransform X="0" /> 
               <SkewTransform AngleX="-30" /> 
              </TransformGroup> 
             </LinearGradientBrush.Transform> 
             <GradientStop Color="#FFFFFFFF" Offset="0" /> 
             <GradientStop Color="#00FFFFFF" Offset=".25" /> 
             <GradientStop Color="#FFFFFFFF" Offset="0.85" /> 
            </LinearGradientBrush> 
           </Rectangle.Fill> 
          </Rectangle> 
         </Grid> 
         <Grid Margin="1" x:Name="DeterminateRoot"> 
          <Rectangle HorizontalAlignment="Left" Margin="{TemplateBinding BorderThickness}" x:Name="ProgressBarIndicator" StrokeThickness="0.5" RadiusX="4" RadiusY="4" Fill="{StaticResource PrimaryBrush}" /> 
         </Grid> 
        </Grid> 
        <Border BorderBrush="#7FFFFFFF" BorderThickness="1" CornerRadius="3.5" x:Name="InnerBorder" Margin="1" Grid.RowSpan="2" /> 
        <Border CornerRadius="3.5" x:Name="Shadow" Margin="2" Opacity="0.2" Grid.RowSpan="2"> 
         <Border.OpacityMask> 
          <RadialGradientBrush> 
           <RadialGradientBrush.RelativeTransform> 
            <TransformGroup> 
             <TranslateTransform X="0" Y="-0.5" /> 
            </TransformGroup> 
           </RadialGradientBrush.RelativeTransform> 
           <GradientStop Color="#00FFFFFF" Offset="0.3" /> 
           <GradientStop Color="#FFFFFFFF" Offset="1" /> 
          </RadialGradientBrush> 
         </Border.OpacityMask> 
         <Border.Background> 
          <RadialGradientBrush> 
           <RadialGradientBrush.RelativeTransform> 
            <TransformGroup> 
             <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.75" ScaleY="2.25" /> 
             <TranslateTransform Y="0.65" /> 
            </TransformGroup> 
           </RadialGradientBrush.RelativeTransform> 
           <GradientStop Color="#00000000" Offset="0.55" /> 
           <GradientStop Color="#4C000000" Offset="1" /> 
          </RadialGradientBrush> 
         </Border.Background> 
        </Border> 
        <Border Margin="1" CornerRadius="4,4,40,40" x:Name="Highlight" Opacity="0.8" RenderTransformOrigin="0.5,1"> 
         <Border.Background> 
          <RadialGradientBrush> 
           <RadialGradientBrush.RelativeTransform> 
            <TransformGroup> 
             <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.25" ScaleY="2" /> 
             <TranslateTransform Y="-0.6" /> 
            </TransformGroup> 
           </RadialGradientBrush.RelativeTransform> 
           <GradientStop Color="#BFFFFFFF" Offset="0" /> 
           <GradientStop Color="#4CFFFFFF" Offset="1" /> 
          </RadialGradientBrush> 
         </Border.Background> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

WPF和Silverlight的進度條不同嗎？爲什麼這不起作用？

Answer 1

有兩個問題我在這裏看到：

1.您的前景刷子可以不定義。在調試器下運行時，在輸出窗口中查找綁定錯誤。

試試這個改變

<Setter Property="Foreground" Value="{StaticResource TextBrush}" /> 

到

<Setter Property="Foreground" Value="Black" /> 

如果其他部分沒有顯示出來，你可能有其他不確定的刷子。

2.您的名字可能與WPF中預期的PART名稱不匹配。下面是WPF自定義進度欄的風格，可能是一個更好的起點：

<Style x:Key="ProgressBar-sterling" TargetType="{x:Type ProgressBar}"> 
    <Setter Property="Foreground" Value="{x:Null}"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type ProgressBar}"> 
     <Border Background="#00E6E6E6" BorderBrush="#FFA6A6A6" BorderThickness="1" SnapsToDevicePixels="True" > 
      <DockPanel x:Name="PART_Track" LastChildFill="false"> 
      <Border x:Name="PART_Indicator" HorizontalAlignment="Left" SnapsToDevicePixels="True"> 
       <Grid Margin="1"> 
       <Rectangle Fill="#FF737373" SnapsToDevicePixels="True" /> 
       <Rectangle x:Name="Overlay" IsHitTestVisible="False" Opacity="0.4" SnapsToDevicePixels="True"> 
       <Rectangle.Fill> 
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="Transparent" Offset="1"/> 
         <GradientStop Color="#FFFFFFFF" Offset="0"/> 
         <GradientStop Color="#FFFFFFFF" Offset="0.124"/> 
         <GradientStop Color="Transparent" Offset="0.72"/> 
        </LinearGradientBrush> 
      </Rectangle.Fill> 
       </Rectangle> 
       </Grid> 
      </Border> 
      </DockPanel> 
     </Border> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

有一件事我會做它來創建一個示例Silverlight應用程序和非常任SL的風格，你想之前導入SL工作將它們移植到WPF。另外，Expression Blend在Simple和SketchFlow樣式中都提供了樣例樣式，並且可以使從現有控件創建自定義樣式更容易。