<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="clr-namespace:PSCHelpdesk.Controls">
  <Design.PreviewWith>
    <Border Padding="20">
      <controls:ProgressRing Foreground="Blue" Background="White" IsActive="True"/>
    </Border>
  </Design.PreviewWith>

  <Style Selector="controls|ProgressRing">
    <Setter Property="Width" Value="60" />
    <Setter Property="Height" Value="60" />
    <Setter Property="MinWidth" Value="20" />
    <Setter Property="MinHeight" Value="20" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    
    <Setter Property="Template">
      <ControlTemplate TargetType="controls:ProgressRing">
        <Border Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
          <Border.Styles>
            <Style Selector="Ellipse">
              <Setter Property="HorizontalAlignment" Value="Left" />
              <Setter Property="Opacity" Value="1" />
              <Setter Property="VerticalAlignment" Value="Top" />
            </Style>

            <!--<Style Selector="Canvas#e1 > Ellipse">
              <Style.Animations>
                <Animation Duration="0:0:3.47" IterationCount="Infinite">
                  <KeyFrame Cue="0">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.51%">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.80%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>

            <Style Selector="Canvas#e2 > Ellipse">
              <Style.Animations>
                <Animation Duration="0:0:3.47" IterationCount="Infinite" Delay="0.167">
                  <KeyFrame Cue="0">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.51%">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.80%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>

            <Style Selector="Canvas#e3 > Ellipse">
              <Style.Animations>
                <Animation Duration="0:0:3.47" IterationCount="Infinite" Delay="0.334">
                  <KeyFrame Cue="0">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.51%">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.80%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>

            <Style Selector="Canvas#e4 > Ellipse">
              <Style.Animations>
                <Animation Duration="0:0:3.47" IterationCount="Infinite" Delay="0.501">
                  <KeyFrame Cue="0">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.51%">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.80%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>

            <Style Selector="Canvas#e5 > Ellipse">
              <Style.Animations>
                <Animation Duration="0:0:3.47" IterationCount="Infinite" Delay="0.668">
                  <KeyFrame Cue="0">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.51%">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.80%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>

            <Style Selector="Canvas#e6 > Ellipse">
              <Style.Animations>
                <Animation Duration="0:0:3.47" IterationCount="Infinite" Delay="0.835">
                  <KeyFrame Cue="0">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.51%">
                    <Setter Property="Opacity" Value="1" />
                  </KeyFrame>
                  <KeyFrame Cue="92.80%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="0" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>-->

            <Style Selector="Canvas#e1">
              <Style.Animations>
                <Animation Duration="0:0:3.217" IterationCount="Infinite">
                  <KeyFrame Cue="0">
                    <Setter Property="RotateTransform.Angle" Value="-110" />
                  </KeyFrame>
                  <KeyFrame Cue="13.8%">
                    <Setter Property="RotateTransform.Angle" Value="10" />
                  </KeyFrame>
                  <KeyFrame Cue="37.3%">
                    <Setter Property="RotateTransform.Angle" Value="93" />
                  </KeyFrame>
                  <KeyFrame Cue="50.3%">
                    <Setter Property="RotateTransform.Angle" Value="205" />
                  </KeyFrame>
                  <KeyFrame Cue="62.7%">
                    <Setter Property="RotateTransform.Angle" Value="357" />
                  </KeyFrame>
                  <KeyFrame Cue="86.5%">
                    <Setter Property="RotateTransform.Angle" Value="439" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="RotateTransform.Angle" Value="585" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>

            <Style Selector="Canvas#e2">
              <Style.Animations>
                <Animation Duration="0:0:3.217" IterationCount="Infinite" Delay="0.167">
                  <KeyFrame Cue="0">
                    <Setter Property="RotateTransform.Angle" Value="-116" />
                  </KeyFrame>
                  <KeyFrame Cue="13.8%">
                    <Setter Property="RotateTransform.Angle" Value="4" />
                  </KeyFrame>
                  <KeyFrame Cue="37.3%">
                    <Setter Property="RotateTransform.Angle" Value="93" />
                  </KeyFrame>
                  <KeyFrame Cue="50.3%">
                    <Setter Property="RotateTransform.Angle" Value="199" />
                  </KeyFrame>
                  <KeyFrame Cue="62.7%">
                    <Setter Property="RotateTransform.Angle" Value="351" />
                  </KeyFrame>
                  <KeyFrame Cue="86.5%">
                    <Setter Property="RotateTransform.Angle" Value="433" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="RotateTransform.Angle" Value="579" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>

            <Style Selector="Canvas#e3">
              <Style.Animations>
                <Animation Duration="0:0:3.217" IterationCount="Infinite" Delay="0.334">
                  <KeyFrame Cue="0">
                    <Setter Property="RotateTransform.Angle" Value="-122" />
                  </KeyFrame>
                  <KeyFrame Cue="13.8%">
                    <Setter Property="RotateTransform.Angle" Value="-2" />
                  </KeyFrame>
                  <KeyFrame Cue="37.3%">
                    <Setter Property="RotateTransform.Angle" Value="81" />
                  </KeyFrame>
                  <KeyFrame Cue="50.3%">
                    <Setter Property="RotateTransform.Angle" Value="193" />
                  </KeyFrame>
                  <KeyFrame Cue="62.7%">
                    <Setter Property="RotateTransform.Angle" Value="345" />
                  </KeyFrame>
                  <KeyFrame Cue="86.5%">
                    <Setter Property="RotateTransform.Angle" Value="427" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="RotateTransform.Angle" Value="573" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>

            <Style Selector="Canvas#e4">
              <Style.Animations>
                <Animation Duration="0:0:3.217" IterationCount="Infinite" Delay="0.501">
                  <KeyFrame Cue="0">
                    <Setter Property="RotateTransform.Angle" Value="-128" />
                  </KeyFrame>
                  <KeyFrame Cue="13.8%">
                    <Setter Property="RotateTransform.Angle" Value="-8" />
                  </KeyFrame>
                  <KeyFrame Cue="37.3%">
                    <Setter Property="RotateTransform.Angle" Value="75" />
                  </KeyFrame>
                  <KeyFrame Cue="50.3%">
                    <Setter Property="RotateTransform.Angle" Value="187" />
                  </KeyFrame>
                  <KeyFrame Cue="62.7%">
                    <Setter Property="RotateTransform.Angle" Value="339" />
                  </KeyFrame>
                  <KeyFrame Cue="86.5%">
                    <Setter Property="RotateTransform.Angle" Value="421" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="RotateTransform.Angle" Value="567" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>

            <Style Selector="Canvas#e5">
              <Style.Animations>
                <Animation Duration="0:0:3.217" IterationCount="Infinite" Delay="0.668">
                  <KeyFrame Cue="0">
                    <Setter Property="RotateTransform.Angle" Value="-134" />
                  </KeyFrame>
                  <KeyFrame Cue="13.8%">
                    <Setter Property="RotateTransform.Angle" Value="-14" />
                  </KeyFrame>
                  <KeyFrame Cue="37.3%">
                    <Setter Property="RotateTransform.Angle" Value="69" />
                  </KeyFrame>
                  <KeyFrame Cue="50.3%">
                    <Setter Property="RotateTransform.Angle" Value="181" />
                  </KeyFrame>
                  <KeyFrame Cue="62.7%">
                    <Setter Property="RotateTransform.Angle" Value="331" />
                  </KeyFrame>
                  <KeyFrame Cue="86.5%">
                    <Setter Property="RotateTransform.Angle" Value="415" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="RotateTransform.Angle" Value="561" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>

            <Style Selector="Canvas#e6">
              <Style.Animations>
                <Animation Duration="0:0:3.217" IterationCount="Infinite" Delay="0.835">
                  <KeyFrame Cue="0">
                    <Setter Property="RotateTransform.Angle" Value="-140" />
                  </KeyFrame>
                  <KeyFrame Cue="13.8%">
                    <Setter Property="RotateTransform.Angle" Value="-20" />
                  </KeyFrame>
                  <KeyFrame Cue="37.3%">
                    <Setter Property="RotateTransform.Angle" Value="63" />
                  </KeyFrame>
                  <KeyFrame Cue="50.3%">
                    <Setter Property="RotateTransform.Angle" Value="175" />
                  </KeyFrame>
                  <KeyFrame Cue="62.7%">
                    <Setter Property="RotateTransform.Angle" Value="325" />
                  </KeyFrame>
                  <KeyFrame Cue="86.5%">
                    <Setter Property="RotateTransform.Angle" Value="409" />
                  </KeyFrame>
                  <KeyFrame Cue="100%">
                    <Setter Property="RotateTransform.Angle" Value="555" />
                  </KeyFrame>
                </Animation>
              </Style.Animations>
            </Style>
          </Border.Styles>
          
          <Grid MaxWidth="{Binding MaxSideLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                MaxHeight="{Binding MaxSideLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                Margin="{TemplateBinding Padding}"
                Background="Transparent"
                RenderTransformOrigin="50%,50%"
                IsVisible="{TemplateBinding IsActive}">

            <Canvas RenderTransformOrigin="50%,50%" Name="e1">
              <Canvas.RenderTransform>
                <RotateTransform />
              </Canvas.RenderTransform>
              <Ellipse Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Margin="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Fill="{TemplateBinding Foreground}" />
            </Canvas>
            
            <Canvas RenderTransformOrigin="50%,50%" Name="e2">
              <Canvas.RenderTransform>
                <RotateTransform />
              </Canvas.RenderTransform>
              <Ellipse x:Name="E2"
                       Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Margin="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Fill="{TemplateBinding Foreground}" />
            </Canvas>
            
            <Canvas RenderTransformOrigin="50%,50%" Name="e3">
              <Canvas.RenderTransform>
                <RotateTransform />
              </Canvas.RenderTransform>
              <Ellipse x:Name="E3"
                       Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Margin="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Fill="{TemplateBinding Foreground}" />
            </Canvas>
            
            <Canvas RenderTransformOrigin="50%,50%" Name="e4">
              <Canvas.RenderTransform>
                <RotateTransform />
              </Canvas.RenderTransform>
              <Ellipse x:Name="E4"
                       Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Margin="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Fill="{TemplateBinding Foreground}" />
            </Canvas>
            
            <Canvas RenderTransformOrigin="50%,50%" Name="e5">
              <Canvas.RenderTransform>
                <RotateTransform />
              </Canvas.RenderTransform>
              <Ellipse x:Name="E5"
                       Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Margin="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Fill="{TemplateBinding Foreground}" />
            </Canvas>
            
            <Canvas RenderTransformOrigin="50%,50%"
                    IsVisible="True"
                    Name="e6">
              <Canvas.RenderTransform>
                <RotateTransform />
              </Canvas.RenderTransform>
              <Ellipse x:Name="E6"
                       Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Margin="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                       Fill="{TemplateBinding Foreground}">
              </Ellipse>
            </Canvas>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter>
  </Style>
</Styles>