<local:TestPage
    x:Class="MUXControlsTestApp.ProgressBarReTemplatePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MUXControlsTestApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="http://schemas.modernwpf.com/2019"
    mc:Ignorable="d">

    <Page.Resources>
        <local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter" />
        <Style TargetType="controls:ProgressBar">
            <Setter Property="Maximum" Value="100" />
            <Setter Property="MinHeight" Value="{ThemeResource ProgressBarThemeMinHeight}" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:ProgressBar">
                        <Grid>
                            <Grid.Resources>
                                <!--<Storyboard x:Key="FromUpdatingToDeterminate">
                                    <RepositionThemeAnimation TargetName="DeterminateProgressBarIndicator" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.IndicatorLengthDelta}" />
                                </Storyboard>-->
                                <Storyboard x:Key="Indeterminate" RepeatBehavior="Forever">
                                    <DoubleAnimation Storyboard.TargetName="EllipseGrid"
                                    Duration="0:0:3.917"
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                                    From="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContainerAnimationStartPosition}"
                                    To="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContainerAnimationEndPosition}" />
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="E1">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        <SplineDoubleKeyFrame KeyTime="0:0:1" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationWellPosition}" KeySpline="0.4,0,0.6,1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationWellPosition}" />
                                        <SplineDoubleKeyFrame KeyTime="0:0:3" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationEndPosition}" KeySpline="0.4,0,0.6,1" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="E2">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="0" />
                                        <SplineDoubleKeyFrame KeyTime="0:0:1.167" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationWellPosition}" KeySpline="0.4,0,0.6,1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2.167" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationWellPosition}" />
                                        <SplineDoubleKeyFrame KeyTime="0:0:3.167" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationEndPosition}" KeySpline="0.4,0,0.6,1" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="E3">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.333" Value="0" />
                                        <SplineDoubleKeyFrame KeyTime="0:0:1.333" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationWellPosition}" KeySpline="0.4,0,0.6,1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2.333" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationWellPosition}" />
                                        <SplineDoubleKeyFrame KeyTime="0:0:3.333" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationEndPosition}" KeySpline="0.4,0,0.6,1" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="E4">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                                        <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationWellPosition}" KeySpline="0.4,0,0.6,1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationWellPosition}" />
                                        <SplineDoubleKeyFrame KeyTime="0:0:3.5" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationEndPosition}" KeySpline="0.4,0,0.6,1" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="E5">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0" />
                                        <SplineDoubleKeyFrame KeyTime="0:0:1.667" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationWellPosition}" KeySpline="0.4,0,0.6,1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2.667" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationWellPosition}" />
                                        <SplineDoubleKeyFrame KeyTime="0:0:3.667" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseAnimationEndPosition}" KeySpline="0.4,0,0.6,1" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="B1">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="100" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="B2">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2.167" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:3.167" Value="100" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="B3">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.833" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2.333" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:3.333" Value="100" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="B4">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="100" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="B5">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1.167" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2.667" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:3.667" Value="100" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimation Storyboard.TargetName="EllipseGrid"
                                    Storyboard.TargetProperty="Opacity"
                                    To="1"
                                    Duration="0" />
                                    <!-- Both FadeOutThemeAnimation and a DoubleAnimation on Opacity are necessary
                                             here.  The FadeOutThemeAnimation is necessary in the Indeterminate state so
                                             that we can do a FadeInThemeAnimation when transitioning back to the
                                             Determinate state.  The DoubleAnimation on Opacity is necessary to hide the
                                             DeterminateRoot immediately so that it does not slowly fade out during each
                                             iteration of the Indeterminate state animation. -->
                                    <controls:FadeOutThemeAnimation TargetName="LayoutRoot" />
                                    <DoubleAnimation Storyboard.TargetName="LayoutRoot"
                                    Storyboard.TargetProperty="Opacity"
                                    To="0"
                                    Duration="0" />
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="E1">
                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="E2">
                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.167" Value="1" />
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:3.167" Value="0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="E3">
                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.333" Value="1" />
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:3.333" Value="0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="E4">
                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:3.5" Value="0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="E5">
                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.667" Value="1" />
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:3.667" Value="0" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </Grid.Resources>

                            <VisualStateManager.CustomVisualStateManager>
                                <controls:SimpleVisualStateManager />
                            </VisualStateManager.CustomVisualStateManager>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualStateGroup.Transitions>
                                        <!--<VisualTransition From="Updating" To="Determinate" Storyboard="{StaticResource FromUpdatingToDeterminate}" />-->
                                        <VisualTransition From="Paused" To="Determinate">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="DeterminateProgressBarIndicator"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0:0:0.25" />
                                            </Storyboard>
                                        </VisualTransition>
                                        <VisualTransition From="Indeterminate" To="Determinate">
                                            <Storyboard>
                                                <controls:FadeInThemeAnimation TargetName="EllipseGrid" />
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Determinate" />
                                    <VisualState x:Name="Updating" />
                                    <VisualState x:Name="Indeterminate" Storyboard="{StaticResource Indeterminate}" />
                                    <VisualState x:Name="Error">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DeterminateProgressBarIndicator">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Paused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeterminateProgressBarIndicator" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Storyboard.TargetName="DeterminateProgressBarIndicator"
                                            Storyboard.TargetProperty="Opacity"
                                            To="{ThemeResource ProgressBarIndicatorPauseOpacity}"
                                            Duration="0:0:0.25" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="EllipseGrid" Opacity="0">
                                <Grid.RenderTransform>
                                    <TranslateTransform />
                                </Grid.RenderTransform>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Border x:Name="B1" Grid.Column="8" RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TranslateTransform />
                                    </Border.RenderTransform>
                                    <Ellipse x:Name="E1"
                                    Fill="{TemplateBinding Foreground}"
                                    Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
                                    Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
                                    RenderTransformOrigin="0.5,0.5">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Border>
                                <Rectangle Grid.Column="7" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseOffset}" />
                                <Border x:Name="B2" Grid.Column="6" RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TranslateTransform />
                                    </Border.RenderTransform>
                                    <Ellipse x:Name="E2"
                                    Fill="{TemplateBinding Foreground}"
                                    Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
                                    Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
                                    RenderTransformOrigin="0.5,0.5">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Border>
                                <Rectangle Grid.Column="5" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseOffset}" />
                                <Border x:Name="B3" Grid.Column="4" RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TranslateTransform />
                                    </Border.RenderTransform>
                                    <Ellipse x:Name="E3"
                                    Fill="{TemplateBinding Foreground}"
                                    Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
                                    Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
                                    RenderTransformOrigin="0.5,0.5">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Border>
                                <Rectangle Grid.Column="3" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseOffset}" />
                                <Border x:Name="B4" Grid.Column="2" RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TranslateTransform />
                                    </Border.RenderTransform>
                                    <Ellipse x:Name="E4"
                                    Fill="{TemplateBinding Foreground}"
                                    Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
                                    Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
                                    RenderTransformOrigin="0.5,0.5">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Border>
                                <Rectangle Grid.Column="1" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseOffset}" />
                                <Border x:Name="B5" Grid.Column="0" RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TranslateTransform />
                                    </Border.RenderTransform>
                                    <Ellipse x:Name="E5"
                                    Fill="{TemplateBinding Foreground}"
                                    Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
                                    Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
                                    RenderTransformOrigin="0.5,0.5">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Border>
                            </Grid>
                            <GridEx x:Name="LayoutRoot"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                <Border Clip="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClipRect}">
                                    <Rectangle x:Name="DeterminateProgressBarIndicator"
                                    Margin="{TemplateBinding Padding}"
                                    Fill="{TemplateBinding Foreground}"
                                    HorizontalAlignment="Left" />
                                </Border>
                            </GridEx>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel Grid.ColumnSpan="3" Orientation="Horizontal">
            <TextBlock Text="Sample Progressbar" Style="{ThemeResource StandardGroupHeader}"/>
            <controls:FontIcon Glyph="&#xF0AF;" Margin="4,0,40,3" FontSize="14" VerticalAlignment="Center"/>
            <controls:ProgressBar
                x:Name="TestProgressBar"
                Width="100"
                VerticalAlignment="Center"
                AutomationProperties.Name="TestProgressBar"
                HorizontalAlignment="Left"
                IsIndeterminate="{x:Bind ShowIsIndeterminateCheckBox.IsChecked, Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"
                ShowPaused="{Binding IsChecked, ElementName=ShowPausedCheckBox, Mode=OneWay}"
                ShowError="{Binding IsChecked, ElementName=ShowErrorCheckBox, Mode=OneWay}"/>
        </StackPanel>

        <StackPanel Grid.Row="1">
            <StackPanelEx Style="{ThemeResource StandardGroupingStackPanel}">
                <TextBlock Text="Options" Style="{ThemeResource StandardGroupHeader}"/>
                <Grid Width="300" HorizontalAlignment="Left">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBoxEx x:Name="MaximumInput" AutomationProperties.Name="MaximumInput" Header="Maximum" PlaceholderText="100" Width="90" HorizontalAlignment="Left" Grid.ColumnSpan="1"/>
                    <TextBlock x:Name="MaximumInputText" AutomationProperties.Name="MaximumInputText" Grid.Column="1" Text="{Binding ElementName=TestProgressBar, Path=Maximum, Mode=TwoWay}"/>

                    <TextBoxEx x:Name="MinimumInput" AutomationProperties.Name="MinimumInput" Header="Minimum" PlaceholderText="0" Width="90" HorizontalAlignment="Left" Grid.Row="1" Grid.ColumnSpan="1"/>
                    <TextBlock x:Name="MinimumInputText" AutomationProperties.Name="MinimumInputText" Grid.Row="1" Grid.Column="1" Text="{Binding ElementName=TestProgressBar, Path=Minimum, Mode=TwoWay}"/>

                    <TextBoxEx x:Name="WidthInput" AutomationProperties.Name="WidthInput" Header="Width" PlaceholderText="0" Width="90" HorizontalAlignment="Left" Grid.Row="2" Grid.ColumnSpan="1"/>
                    <TextBlock x:Name="WidthInputText" AutomationProperties.Name="WidthInputText" Grid.Row="2" Grid.Column="1" Text="{Binding ElementName=TestProgressBar, Path=Width, Mode=TwoWay}"/>

                    <TextBoxEx x:Name="ValueInput" AutomationProperties.Name="ValueInput" Header="Value" PlaceholderText="0" Width="90" HorizontalAlignment="Left" Grid.Row="3" Grid.ColumnSpan="1"/>
                    <TextBlock x:Name="ValueText" AutomationProperties.Name="ValueText" Grid.Row="3" Grid.Column="1" Text="{Binding ElementName=TestProgressBar, Path=Value, Mode=TwoWay}"/>
                </Grid>

                <TextBlock Text="Padding" Margin="0, 20, 0, 10"/>

                <Grid Width="300" HorizontalAlignment="Left">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBoxEx x:Name="PaddingLeftInput" AutomationProperties.Name="PaddingLeftInput" Header="Left" PlaceholderText="0" Width="90" HorizontalAlignment="Left" Grid.Row="1" Grid.ColumnSpan="1"/>
                    <TextBlock x:Name="PaddingLeftText" AutomationProperties.Name="PaddingLeftText" Grid.Row="1" Grid.Column="1" Text="{Binding ElementName=TestProgressBar, Path=Padding.Left, Mode=TwoWay}"/>

                    <TextBoxEx x:Name="PaddingRightInput" AutomationProperties.Name="PaddingRightInput" Header="Right" PlaceholderText="0" Width="90" HorizontalAlignment="Left" Grid.Row="2" Grid.ColumnSpan="1"/>
                    <TextBlock x:Name="PaddingRightText" AutomationProperties.Name="PaddingRightText" Grid.Row="2" Grid.Column="1" Text="{Binding ElementName=TestProgressBar, Path=Padding.Right, Mode=TwoWay}"/>

                </Grid>
                <TextBlock Text="States"/>
                <CheckBox x:Name="ShowPausedCheckBox" AutomationProperties.Name="ShowPausedCheckBox" Content="ShowPaused" />
                <CheckBox x:Name="ShowErrorCheckBox" AutomationProperties.Name="ShowErrorCheckBox"  Content="ShowError"/>
                <CheckBox x:Name="ShowIsIndeterminateCheckBox" AutomationProperties.Name="ShowIsIndeterminateCheckBox" Content="IsIndeterminate"/>
            </StackPanelEx>

            <StackPanelEx Style="{ThemeResource StandardGroupingStackPanel}" Margin="0,16,0,0">
                <TextBlock Text="Actions" Style="{ThemeResource StandardGroupHeader}"/>
                <Button x:Name="UpdateMinMaxButton" AutomationProperties.Name="UpdateMinMaxButton" Content="Update Min and Max" Click="UpdateMinMax_Click"/>
                <Button x:Name="UpdateWidthButton" AutomationProperties.Name="UpdateWidthButton" Content="Update Width" Click="UpdateWidth_Click"/>
                <Button x:Name="UpdateValueButton" AutomationProperties.Name="UpdateValueButton" Content="Update Value" Click="UpdateValue_Click"/>
                <RepeatButton x:Name="ChangeValueButton" AutomationProperties.Name="ChangeValueButton" Content="Hold and Change Value" Click="ChangeValue_Click" />
                <Button x:Name="UpdatePaddingButton" AutomationProperties.Name="UpdatePaddingButton" Content="Update Padding Left and Right" Click="UpdatePadding_Click"/>
            </StackPanelEx>

        </StackPanel>

        <StackPanelEx Grid.Column="1" Grid.Row="1" Margin="16,0,0,0"
                    Style="{ThemeResource StandardGroupingStackPanel}">
            <TextBlock Text="Properties" Style="{ThemeResource StandardGroupHeader}"/>

            <TextBlock Text="Value" Margin="0, 20, 0, 0"/>
            <TextBlock x:Name="ROValueText" AutomationProperties.Name="ROValueText" Margin="0, 0, 0, 20"/>

            <TextBlock Text="Indicator Width" Margin="0, 20, 0, 0"/>
            <TextBlock x:Name="IndicatorWidthText" AutomationProperties.Name="IndicatorWidthText" Margin="0, 0, 0, 20"/>

            <TextBlock Text="Is paused:" Margin="0, 20, 0, 0" FontSize="20"/>
            <TextBlock AutomationProperties.Name="ShowPausedText" Text="{Binding IsChecked, ElementName=ShowPausedCheckBox, Mode=OneWay}"/>

            <TextBlock Text="Is error:" Margin="0, 20, 0, 0" FontSize="20"/>
            <TextBlock AutomationProperties.Name="ShowErrorText" Text="{Binding IsChecked, ElementName=ShowErrorCheckBox, Mode=OneWay}"/>

            <TextBlock Text="Is indeterminate:" Margin="0, 20, 0, 0" FontSize="20"/>
            <TextBlock AutomationProperties.Name="ShowIsIndeterminateText" Text="{x:Bind ShowIsIndeterminateCheckBox.IsChecked, Mode=OneWay}"/>

            <TextBlock x:Name="VisualStateText" AutomationProperties.Name="VisualStateText" Margin="0, 20, 0, 0"/>
        </StackPanelEx>
    </Grid>
</local:TestPage>
