wpf 如何将条纹对进度条进行填充，而不是拉伸
发布网友
发布时间：2022-04-22 12:45
共1个回答
热心网友
时间：2023-10-14 06:56
这种情况应该是填充的进度条的是有损图片资源 ，在填充后放大出现拉伸。
建议使用WPF上面的画刷 SolidColorBrush或Color进行对进度条填充，这些资源在WPF框架都是矢量的。无论你放大多少倍都不会失真。
下面是我自己用的一个ProgressBar模板，可以使用下面的模板或自己定义：
<LinearGradientBrush x:Key="WindowBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FF4785B0" Offset="0"/>
<GradientStop Color="#FF63AADA" Offset="1"/>
</LinearGradientBrush>
<Color x:Key="PrimaryColor">#FF63AADA</Color>
<Color x:Key="SecondaryColor">#FFA0FCFF</Color>
<SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}" />
<SolidColorBrush x:Key="SecondaryBrush" Color="{DynamicResource SecondaryColor}" />
<SolidColorBrush x:Key="TextBrush" Color="#FF152937" />
<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type 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="1" />
<Setter Property="Maximum" Value="100" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="BorderBrush" Value="{StaticResource PrimaryBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="Root" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Border CornerRadius="4" x:Name="White" BorderBrush="#FFFFFFFF" BorderThickness="1" 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="PART_Track" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="4,4,4,4" Grid.RowSpan="2" Opacity="0.65" />
<Grid x:Name="ProgressBarRootGrid" Grid.RowSpan="2">
<Rectangle 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="2" x:Name="PART_Indicator" StrokeThickness="0.5" RadiusX="4" RadiusY="4" Fill="{StaticResource PrimaryBrush}" />
</Grid>
</Grid>
<Border BorderBrush="#ccFFFFFF" BorderThickness="1" CornerRadius="3.5" x:Name="InnerBorder" Margin="2" 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,4,10" 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.Triggers>
<Trigger Property="IsIndeterminate" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<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>
</BeginStoryboard>
</Trigger.EnterActions>
<Setter Property="Visibility" Value="Visible" TargetName="IndeterminateRoot" />
<Setter Property="Visibility" Value="Collapsed" TargetName="DeterminateRoot" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
亲测有效，运行效果：
这样，无论将ProgressBar怎样放大，进度条不会产生失真或拉伸的现象。
