Question

I have a Control Template for Progress Bar in my Resource Dictionary. Complete code goes like this:

<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>

But the animation won’t work. What I want to achieve is create an animated progress bar filling. I figured it out, that I only need to change ImageBrush’s viewport values.
Probably it is TargetProperty which is wrong.

Answer 1

To animate a rect (the ViewPort type) use a RectAnimation rather than a QuaternionAnimation. The storyboard.TargetName property of the animation needs be set to imgbrush as well.
Try:

<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>