Question

wpf 如何将条纹对进度条进行填充，而不是拉伸

Answer 1

这种情况应该是填充的进度条的是有损图片资源 ，在填充后放大出现拉伸。

建议使用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怎样放大，进度条不会产生失真或拉伸的现象。