Why is a brush inside my border overlapping the border

I'm trying to create a custom progress bar control that is always going to be used in a 'marquee' style so I dont ever need to interact with it, I just need it to animate itself and thats it. So I thought rather than trying to restyle the existing progressbar control I would just create one from scratch in a UserControl.

Its all working fine, it animates as it should, but one little annoyance is that the brush I am animating the location of seems to overlap the border control that it has been placed in. I have set ClipToBounds to true on the UserControl, the Border and the Brush but no effect.

Here is the entire thing:

Code:

---

<UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        x:Class="CustomProgBar"
        x:Name="UserControl" Width="370" Height="55" ClipToBounds="True">
        <UserControl.Resources>
                <Storyboard x:Key="ProgressAnimationSB" RepeatBehavior="Forever">
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GlowLayer" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-395"/>
                                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="401"/>
                        </DoubleAnimationUsingKeyFrames>
                </Storyboard>
        </UserControl.Resources>
        <UserControl.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                        <BeginStoryboard Storyboard="{StaticResource ProgressAnimationSB}"/>
                </EventTrigger>
        </UserControl.Triggers>

        <Border Width="Auto" Height="Auto" ClipToBounds="True" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="2,2,2,2">
                <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFFFFBFB" Offset="0"/>
                                                <GradientStop Color="#FFC1C1C1" Offset="1"/>
                                        </LinearGradientBrush>
                                </Border.Background>
                        <Rectangle Stroke="{x:Null}" RenderTransformOrigin="0.5,0.5" x:Name="GlowLayer" RadiusX="0" Margin="0,-17,0,0" ClipToBounds="True" Opacity="1" StrokeThickness="1" IsEnabled="True">
                        <Rectangle.RenderTransform>
                                <TransformGroup>
                                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                                        <SkewTransform AngleX="0" AngleY="0"/>
                                        <RotateTransform Angle="0"/>
                                        <TranslateTransform X="0" Y="0"/>
                                </TransformGroup>
                        </Rectangle.RenderTransform>
                        <Rectangle.Fill>
                                <RadialGradientBrush GradientOrigin="0.503,0.563">
                                        <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1" ScaleY="1.695"/>
                                                        <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                                                        <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
                                                        <TranslateTransform X="-0.001" Y="0.483"/>
                                                </TransformGroup>
                                        </RadialGradientBrush.RelativeTransform>
                                        <GradientStop Color="#FF01CC0F" Offset="0"/>
                                        <GradientStop Color="#00E2E2E2" Offset="0.996"/>
                                </RadialGradientBrush>
                        </Rectangle.Fill>
                </Rectangle>
               
        </Border>
</UserControl>

---

Any ideas? Let me know if you need more info or a screenshot

If you just want the progress bar to animate it self, why don't you use the IsIndeterminate property ? and just have a custom style and apply it to your progressbar.

It seems to me the best solution.

because whilst it looks fine on Vista, when you use the app on an XP machine it automatically changes to the boring old XP style progress bar (which looks quite out of place in my app) and as you cannot control the animation speed when using the IsIndeterminate property, it animates far too slow for my liking and isnt very smooth. So I thought I would just make a new one because like I said, I dont need to interact with it at all it just needs to constantly be animating itself.

Just to let you know I have caught the error in your Xaml Highlighting and will update for the next release.

I didnt even notice it haha but yeah, get it fixed! :P