c# - 在 ProgressBar 控件模板中为 WPF ImageBrush 设置动画

Question

我的资源词典中有一个进度条控制模板。完整的代码是这样的:

<ControlTemplate x:Key="KinasticPB" TargetType="ProgressBar">

  <ControlTemplate.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard>
                <Storyboard x:Name="str">
                    <QuaternionAnimation x:Name="quatanim"
                                         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="/Kinastic.UCLibrary;component/Media/tex.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>

</ControlTemplate>

但是动画不起作用。我想要实现的是创建一个动画进度条填充。我想通了，我只需要更改 ImageBrush 的视口(viewport)值。可能是 TargetProperty 出错了。

Answer 1

要为矩形(ViewPort 类型)设置动画，请使用 RectAnimation 而不是 QuaternionAnimation。动画的 storyboard.TargetName 属性也需要设置为 imgbrush。尝试:

<ControlTemplate
    x:Key="KinasticPB"
    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="/Kinastic.UCLibrary;component/Media/tex.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>    
</ControlTemplate>