|
-
Feb 26th, 2009, 03:06 PM
#1
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
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|