<UserControl x:Class="NuGet.PackageManagement.UI.Spinner"
             x:ClassModifier="internal"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:NuGet.PackageManagement.UI"
             xmlns:system="clr-namespace:System;assembly=mscorlib"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="32"
             d:DesignWidth="32">
  <UserControl.Resources>
    <system:Double x:Key="CanvasSize">120</system:Double>
    <local:EllipseData x:Key="EllipseData"/>
    <local:CanvasScaleConverter x:Key="CanvasScaleConverter"/>
    <Storyboard x:Key="StoryboardRotate" >
      <DoubleAnimation
            Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" 
            From="0" 
            To="360" 
            Duration="0:0:01" 
            RepeatBehavior="Forever" />
    </Storyboard>
    <Style x:Key="AnimatedCanvasStyle" TargetType="{x:Type Canvas}">
      <Style.Triggers>
        <EventTrigger RoutedEvent="Loaded">
          <BeginStoryboard x:Name="CanvasRotation" Storyboard="{StaticResource StoryboardRotate}" />
        </EventTrigger>
        <Trigger Property="Visibility" Value="Visible">
          <Trigger.EnterActions>
            <ResumeStoryboard BeginStoryboardName="CanvasRotation" />
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <PauseStoryboard BeginStoryboardName="CanvasRotation"/>
          </Trigger.ExitActions>
        </Trigger>
      </Style.Triggers>
      <Setter Property="Width" Value="{StaticResource CanvasSize}"/>
      <Setter Property="Height" Value="{StaticResource CanvasSize}"/>
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
      <Setter Property="RenderTransform">
        <Setter.Value>
          <RotateTransform Angle="12"/>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Resources>

  <Grid SnapsToDevicePixels="True">
    <Grid.RenderTransform>
      <ScaleTransform 
          ScaleX="{Binding ActualWidth,RelativeSource={RelativeSource AncestorType={x:Type Grid}},Converter={StaticResource CanvasScaleConverter},ConverterParameter={StaticResource CanvasSize}}"
          ScaleY="{Binding ActualHeight,RelativeSource={RelativeSource AncestorType={x:Type Grid}},Converter={StaticResource CanvasScaleConverter},ConverterParameter={StaticResource CanvasSize}}" />
    </Grid.RenderTransform>
    <ItemsControl ItemsSource="{Binding Source={StaticResource EllipseData}}">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <Canvas Style="{StaticResource AnimatedCanvasStyle}" Visibility="{Binding Visibility,RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"/>
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
          <Setter Property="Canvas.Left" Value="{Binding Left}" />
          <Setter Property="Canvas.Top" Value="{Binding Top}" />
        </Style>
      </ItemsControl.ItemContainerStyle>
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <Ellipse Width="{Binding Width}" Height="{Binding Height}" Stretch="Fill" Fill="{Binding Fill}"/>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
  </Grid>
</UserControl>
