Stopbyte

How to make a wpf progress bar with animated diagonal lines (like barber pole)?

Software Development WPF
#1

Hi,

i want to create a wpf progress bar style that allows to have some animated diagonal lines, that look like a barber pole effect, like the image bellow:

i searched the internet for days and couldn’t find any answer somewhere else?

thanks in advance.

1 Like
#2

I encountered the same problem, and this is how i solved it:

<SolidColorBrush x:Key="ProgressBarBorderBrush" Color="Transparent" />
    <SolidColorBrush x:Key="ProgressBarBackgroundBrush" Color="White" />
    <SolidColorBrush x:Key="ProgressBarTrackBackgroundBrush" Color="#63D055" />

    <Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <local:ClippingBorder x:Name="BorderBackground" CornerRadius="3" BorderThickness="0"
                            BorderBrush="{StaticResource ProgressBarBorderBrush}"
                            Background="{StaticResource ProgressBarBackgroundBrush}">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Determinate" />
                                    <VisualState x:Name="Indeterminate" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="PART_Track" Margin="0" BorderThickness="0" CornerRadius="3" />
                            <Border x:Name="PART_Indicator" Margin="0" BorderThickness="0" CornerRadius="3" HorizontalAlignment="Left"
                                    Background="{StaticResource ProgressBarTrackBackgroundBrush}" ClipToBounds="True">
                                <Border x:Name="DiagonalDecorator" Width="5000">
                                    <Border.Background>
                                        <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,36,34" ViewportUnits="Absolute">
                                            <DrawingBrush.RelativeTransform>
                                                <TranslateTransform X="0" Y="0" />
                                            </DrawingBrush.RelativeTransform>
                                            <DrawingBrush.Drawing>
                                                <GeometryDrawing Brush="#48C739" Geometry="M0,0 18,0 36,34 18,34 Z" />
                                            </DrawingBrush.Drawing>
                                        </DrawingBrush>
                                    </Border.Background>
                                    <Border.Triggers>
                                        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation
                                                        Storyboard.TargetProperty="(Border.Background).(DrawingBrush.RelativeTransform).(TranslateTransform.X)"
                                                        From="0" To=".36" RepeatBehavior="Forever" Duration="0:0:18" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </Border.Triggers>
                                </Border>
                            </Border>
                        </Grid>
                    </local:ClippingBorder>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

it should give u the exact same result u wanted.