我试过这个

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进度条中使用图像来获取此类图像的详细教程。

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>

Answer 2

Klaus Fischer答案的改进：

这是ProgressBar：

<ProgressBar Value="{Binding ProgressbarValue}" Template="{StaticResource Progressbar2}" />

这是模板（见Klaus Fischer的帖子）：

<ControlTemplate x:Key="Progressbar2" TargetType="ProgressBar">
<Canvas >
<ProgressBar x:Name="pgbar" Visibility="Hidden" Width="{Binding ElementName=StatusGrid,Path=ActualWidth}" Background="Transparent" Value="{TemplateBinding Value}" />
<Image Source="Resources/Images/running.png" Height="42px" Canvas.Left="{TemplateBinding Value, Converter={StaticResource WidthConverter}, ConverterParameter={x:Reference pgbar}}" />
</Canvas>
</ControlTemplate>

如您所见，

中有一个转换器

Canvas.Left

属性。

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
     var bar = ((System.Windows.Controls.ProgressBar) parameter);
     var percentPixe = bar.ActualWidth/100;
     return percentPixe*(double) value-42;
}

表达式

值-42

处理图像的大小，否则图像将位于真正的ProgressBar前面。

这应该可以胜任。

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

我试过这个

2 个答案: