c# - 如何在 WPF 进度条中使用图像？

Question

我有一张图片，我想在WPF中用它作为进度条。

请看图片来理解这一点。

下面的代码，重复了图片。

进度条上方的移动进度框。

我试过了

<ControlTemplate
x:Key="ImageProgressBarTemplate"
TargetType="ProgressBar">    
<ControlTemplate.Triggers>
    <EventTrigger
        RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard>
            <Storyboard
                x:Name="str">
                <RectAnimation
                    x:Name="quatanim"
                    Storyboard.TargetName="imgbrush"
                    Storyboard.TargetProperty="(ImageBrush.Viewport)"
                    From="0,0,36,36"
                    To="36,0,36,36"
                    Duration="0:0:5"
                    AutoReverse="False"
                    RepeatBehavior="Forever" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</ControlTemplate.Triggers>

<!-- Custom progress bar goes here -->
<Border
    Name="PART_Track"
    Width="{TemplateBinding Width}"
    BorderBrush="{TemplateBinding BorderBrush}"
    BorderThickness="{TemplateBinding BorderThickness}"
    Background="{TemplateBinding Background}"
    Height="{TemplateBinding Height}"
    CornerRadius="0"
    Padding="1.5">

    <Grid>
        <!-- Rounded mask (stretches to fill Grid) -->
        <Border
            Name="mask"
            Background="#EEEEEE"
            CornerRadius="0" />

        <!-- Any content -->

        <Rectangle
            Name="PART_Indicator"
            HorizontalAlignment="Left"
            Height="{TemplateBinding Height}">    
            <Rectangle.OpacityMask>
                <VisualBrush
                    Visual="{Binding ElementName=mask}" />
            </Rectangle.OpacityMask>    
            <Rectangle.Fill>    
                <ImageBrush
                    x:Name="imgbrush"
                    ImageSource="/myproject;component/Assets/myimage.png"
                    AlignmentX="Left"
                    Stretch="Fill"
                    TileMode="Tile"
                    AlignmentY="Top"
                    ViewportUnits="Absolute"
                    Viewport="0,0,36,36"
                    ViewboxUnits="RelativeToBoundingBox"
                    Viewbox="0,0,1,1">
                </ImageBrush>    
            </Rectangle.Fill>    
        </Rectangle>    
    </Grid>    
</Border>    

<ProgressBar Template="{StaticResource ImageProgressBarTemplate}"/>

我所需要的只是关于如何在 wpf progressbar 中使用图像处理此类图像的详细教程。

Answer 1

您必须设计自己的进度条模板。

<ControlTemplate TargetType="ProgressBar">
  <Canvas>
    <ProgressBar x:Name="pgbar" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" 
                 Value="{TemplateBinding Value}" 
                 Minimum="{TemplateBinding Minimum}"
                 Maximum="{TemplateBinding Maximum}"/>

    <Image Source="image.PNG" Canvas.Left="{TemplateBinding Value}">
      <Image.RenderTransform>
         <!-- width / 2 and height /2-->
         <TranslateTransform X="-56" Y="-25"/>
      </Image.RenderTransform>
    </Image>
  </Canvas>
</ControlTemplate>