ProgressBar_v1.xaml

<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Microsoft.UI.Xaml.Controls"
    xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
    xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)">

    <Style TargetType="local:ProgressBar">
        <Setter Property="Foreground" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource ProgressBarBorderThemeThickness}" />
        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
        <Setter Property="MinHeight" Value="{ThemeResource ProgressBarThemeMinHeight}" />
        <Setter Property="Maximum" Value="100" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:ProgressBar">

                    <Grid x:Name="LayoutRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">

                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Updating" To="Determinate">
                                        <Storyboard>
                                            <RepositionThemeAnimation TargetName="DeterminateProgressBarIndicator" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.IndicatorLengthDelta}" />
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition From="UpdatingError" To="Error">
                                        <Storyboard>
                                            <RepositionThemeAnimation TargetName="DeterminateProgressBarIndicator" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.IndicatorLengthDelta}" />
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition From="Paused" To="Determinate">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="DeterminateProgressBarIndicator"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0:0:0.25" />
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition From="Error" To="Determinate">
                                        <Storyboard>
                                            <ColorAnimation
                                                Storyboard.TargetName="DeterminateProgressBarIndicator"
                                                Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                                To="{TemplateBinding Foreground}"
                                                Duration="0:0:0.25"/>
                                            <ColorAnimation
                                                Storyboard.TargetName="ProgressBarRoot"
                                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                To="{TemplateBinding Background}"
                                                Duration="0:0:0.25"/>
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition From="Indeterminate" To="Determinate">
                                        <Storyboard>
                                            <Storyboard>
                                                <FadeInThemeAnimation TargetName="IndeterminateProgressBarIndicator" />
                                                <FadeInThemeAnimation TargetName="IndeterminateProgressBarIndicator2" />
                                            </Storyboard>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Determinate" />
                                <VisualState x:Name="Updating" />
                                <VisualState x:Name="UpdatingError">
                                    <Storyboard>
                                        <ColorAnimation
                                        Storyboard.TargetName="DeterminateProgressBarIndicator"
                                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                        To="{Binding Source={ThemeResource SystemControlErrorTextForegroundBrush},Path=Color}"
                                        Duration="0:0:0.0"/>
                                        <ColorAnimation
                                        Storyboard.TargetName="ProgressBarRoot"
                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                        To="{StaticResource SystemControlErrorBackgroundColor}"
                                        Duration="0:0:0.0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Indeterminate">
                                    <Storyboard RepeatBehavior="Forever">
                                        <DoubleAnimationUsingKeyFrames
                                            Storyboard.TargetName="IndeterminateProgressBarIndicator"
                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContainerAnimationStartPosition}"/>
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContainerAnimationEndPosition}" KeySpline="0.4, 0.0, 0.6, 1.0" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContainerAnimationEndPosition}"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames
                                            Storyboard.TargetName="IndeterminateProgressBarIndicator2"
                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.Container2AnimationStartPosition}"/>
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.75" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.Container2AnimationStartPosition}"/>
                                            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.Container2AnimationEndPosition}" KeySpline="0.4, 0.0, 0.6, 1.0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="IndeterminateProgressBarIndicator"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0" />
                                        <DoubleAnimation Storyboard.TargetName="IndeterminateProgressBarIndicator2"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0" />
                                        <FadeOutThemeAnimation TargetName="DeterminateProgressBarIndicator" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="IndeterminateError">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                                            Storyboard.TargetName="IndeterminateProgressBarIndicator"
                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                                            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContainerAnimationEndPosition}" KeySpline="0.4, 0.0, 0.6, 1.0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="IndeterminateProgressBarIndicator">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames
                                            Storyboard.TargetName="IndeterminateProgressBarIndicator2"
                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                                            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.Container2AnimationEndPosition}" KeySpline="0.4, 0.0, 0.6, 1.0" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.Container2AnimationStartPosition}" KeySpline="0.4, 0.0, 0.6, 1.0" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.5" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContainerAnimationMidPosition}" KeySpline="0.4, 0.0, 0.6, 1.0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="IndeterminateProgressBarIndicator2">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="0" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:1.51" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames
                                            Storyboard.TargetName="IndeterminateProgressBarIndicator2"
                                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                            <LinearColorKeyFrame Value="{ThemeResource SystemAccentColor}" KeyTime="0:0:2.75" />
                                            <LinearColorKeyFrame Value="{Binding Source={ThemeResource SystemControlErrorTextForegroundBrush},Path=Color}" KeyTime="0:0:3" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames
                                            Storyboard.TargetName="ProgressBarRoot"
                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                            <LinearColorKeyFrame Value="{ThemeResource SystemBaseLowColor}" KeyTime="0:0:2.75" />
                                            <LinearColorKeyFrame Value="{StaticResource SystemControlErrorBackgroundColor}" KeyTime="0:0:3" />
                                        </ColorAnimationUsingKeyFrames>
                                        <FadeOutThemeAnimation TargetName="DeterminateProgressBarIndicator" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Error">
                                    <Storyboard>
                                        <ColorAnimation
                                            Storyboard.TargetName="DeterminateProgressBarIndicator"
                                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                            To="{Binding Source={ThemeResource SystemControlErrorTextForegroundBrush},Path=Color}"
                                            Duration="0:0:0.25"/>
                                        <ColorAnimation
                                            Storyboard.TargetName="ProgressBarRoot"
                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                            To="{StaticResource SystemControlErrorBackgroundColor}"
                                            Duration="0:0:0.25"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="IndeterminatePaused">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                                            Storyboard.TargetName="IndeterminateProgressBarIndicator"
                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                                            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContainerAnimationEndPosition}" KeySpline="0.4, 0.0, 0.6, 1.0" />

                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="IndeterminateProgressBarIndicator">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames
                                            Storyboard.TargetName="IndeterminateProgressBarIndicator2"
                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                                            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.Container2AnimationEndPosition}" KeySpline="0.4, 0.0, 0.6, 1.0" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.Container2AnimationStartPosition}" KeySpline="0.4, 0.0, 0.6, 1.0" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.5" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContainerAnimationMidPosition}" KeySpline="0.4, 0.0, 0.6, 1.0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="IndeterminateProgressBarIndicator2">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="0" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:1.51" Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:2.51" Value="{ThemeResource ProgressBarIndicatorPauseOpacity}" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames
                                            Storyboard.TargetName="IndeterminateProgressBarIndicator2"
                                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                            <LinearColorKeyFrame Value="{ThemeResource SystemAccentColor}" KeyTime="0:0:2.5" />
                                            <LinearColorKeyFrame Value="{ThemeResource SystemBaseMediumLowColor}" KeyTime="0:0:2.75" />
                                        </ColorAnimationUsingKeyFrames>
                                        <FadeOutThemeAnimation TargetName="DeterminateProgressBarIndicator" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Paused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="DeterminateProgressBarIndicator"
                                            Storyboard.TargetProperty="Fill" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemBaseMediumLowColor}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation
                                            Storyboard.TargetName="DeterminateProgressBarIndicator"
                                            Storyboard.TargetProperty="Opacity"
                                            To="{ThemeResource ProgressBarIndicatorPauseOpacity}"
                                            Duration="0:0:0.25" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Border x:Name="ProgressBarRoot"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
                            contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}">
                            
                            <Border Clip="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClipRect}">
                                <Grid>
                                    <Rectangle x:Name="DeterminateProgressBarIndicator"
                                        Margin="{TemplateBinding Padding}"
                                        Fill="{TemplateBinding Foreground}"         
                                        HorizontalAlignment="Left"
                                        contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                        contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
                                        contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                        contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}">
                                    </Rectangle>

                                    <Rectangle x:Name="IndeterminateProgressBarIndicator"
                                        Margin="{TemplateBinding Padding}"
                                        Fill="{TemplateBinding Foreground}"         
                                        HorizontalAlignment="Left"
                                        Opacity="0"
                                        contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                        contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
                                        contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                        contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}">
                                        <Rectangle.RenderTransform>
                                            <CompositeTransform/>
                                        </Rectangle.RenderTransform>
                                    </Rectangle>

                                    <Rectangle x:Name="IndeterminateProgressBarIndicator2"
                                        Margin="{TemplateBinding Padding}"
                                        Fill="{TemplateBinding Foreground}"         
                                        HorizontalAlignment="Left"
                                        Opacity="0"
                                        contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                        contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
                                        contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                        contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}">
                                        <Rectangle.RenderTransform>
                                            <CompositeTransform/>
                                        </Rectangle.RenderTransform>
                                    </Rectangle>
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>