<UserControl x:Class="Tango.Visuals.Led"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:converters="clr-namespace:Tango.Visuals.Converters"
             mc:Ignorable="d" 
             d:DesignHeight="150" d:DesignWidth="150">
    <UserControl.Resources>
        <converters:BooleanToVisibilityConverter x:Key="v"></converters:BooleanToVisibilityConverter>

        <RadialGradientBrush x:Key="outer"
		Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5" 
		SpreadMethod="Pad" ColorInterpolationMode="SRgbLinearInterpolation" >
            <GradientStop Color="Transparent" Offset="0" />
            <GradientStop Color="Transparent" Offset="1" />
        </RadialGradientBrush>

        <RadialGradientBrush x:Key="inner"
		Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5" 
		SpreadMethod="Pad" ColorInterpolationMode="SRgbLinearInterpolation" >
            <GradientStop Color="#FF98FF00" Offset="0" />
            <GradientStop Color="#FF01472B" Offset="1" />
        </RadialGradientBrush>

        <RadialGradientBrush x:Key="innerOff"
		Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5" 
		SpreadMethod="Pad" ColorInterpolationMode="SRgbLinearInterpolation" >
            <GradientStop Color="Red" Offset="0" />
            <GradientStop Color="#FF670000" Offset="1" />
        </RadialGradientBrush>
    </UserControl.Resources>

    <Grid>
        <Grid x:Name="grid">
            <Grid.RowDefinitions>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="60*"/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="60*"/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>

            <Ellipse Fill="{StaticResource outer}" Grid.RowSpan="3" Grid.ColumnSpan="3" Stroke="Gray" StrokeThickness="1"></Ellipse>
            <!--<Ellipse Fill="#FF3E3E3E" Grid.Row="1" Grid.Column="1">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="Fill.Color" To="#404040" Duration="00:00:0.2"></ColorAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="Fill.Color" To="#FF464646" Duration="00:00:0.2"></ColorAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>-->

            <Ellipse Margin="2" Grid.Row="1" Grid.Column="1" Stroke="#FF7F7F7F" StrokeThickness="2">
                <Ellipse.Style>
                    <Style>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=IsChecked}" Value="True">
                                <Setter Property="Ellipse.Fill" Value="{DynamicResource inner}"></Setter>
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Fill.(GradientBrush.GradientStops)[1].(GradientStop.Offset)" From="0.8" To="1" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="Forever"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=IsChecked}" Value="False">
                                <Setter Property="Ellipse.Fill" Value="{DynamicResource innerOff}"></Setter>
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Fill.(GradientBrush.GradientStops)[1].(GradientStop.Offset)" From="0.5" To="1" Duration="0:0:0.2" AutoReverse="False"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Ellipse.Style>
            </Ellipse>
        </Grid>

        <Grid x:Name="gridMask" Visibility="Hidden">
            <Grid.RowDefinitions>
                <RowDefinition Height="11*"/>
                <RowDefinition Height="30*"/>
                <RowDefinition Height="11*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="11*"/>
                <ColumnDefinition Width="30*"/>
                <ColumnDefinition Width="11*"/>
            </Grid.ColumnDefinitions>

            <Ellipse Fill="{StaticResource outer}" Grid.RowSpan="3" Grid.ColumnSpan="3"></Ellipse>
            <Ellipse Fill="#FF464646" Grid.Row="1" Grid.Column="1">
            </Ellipse>

            <Ellipse Fill="#707070" Margin="2" Grid.Row="1" Grid.Column="1">
            </Ellipse>
        </Grid>
    </Grid>
</UserControl>