﻿<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>
    <Grid.Resources>
      <Storyboard
        x:Key="volumeOff"
        Storyboard.TargetName="media"
        Storyboard.TargetProperty="IsMuted">
        <BooleanAnimationUsingKeyFrames>
          <DiscreteBooleanKeyFrame Value="True"/>
        </BooleanAnimationUsingKeyFrames>
      </Storyboard>
      <Storyboard
        x:Key="fadeIn"
        Storyboard.TargetName="chkVolume"
        Storyboard.TargetProperty="Opacity"
        Duration="00:00:00.5">
        <DoubleAnimation
          From="0.2"
          To="1.0"/>
      </Storyboard>
    </Grid.Resources>
    <MediaElement
      x:Name="media"
      Source="c:\temp\video.wmv"
      Margin="10"
      Stretch="Fill"/>
    <CheckBox
      x:Name="chkVolume"
      Width="1.5in"
      Height="1.5in"
      Margin="10"
      HorizontalAlignment="Left"
      VerticalAlignment="Bottom"
      Opacity="0.2">
      <CheckBox.Triggers>
        <EventTrigger RoutedEvent="CheckBox.Checked">
          <EventTrigger.Actions>
            <BeginStoryboard
              Storyboard="{StaticResource volumeOff}"
              Name="mute"/>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="CheckBox.Unchecked">
          <EventTrigger.Actions>
            <StopStoryboard BeginStoryboardName="mute"/>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="CheckBox.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard
              Storyboard="{StaticResource fadeIn}"
              Name="fade"/>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="CheckBox.MouseLeave">
          <EventTrigger.Actions>
            <StopStoryboard BeginStoryboardName="fade"/>
          </EventTrigger.Actions>
        </EventTrigger>
      </CheckBox.Triggers>
      <CheckBox.Template>
        <ControlTemplate TargetType="{x:Type CheckBox}">
          <ControlTemplate.Resources>
            <Storyboard x:Key="TurnOn">
              <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame
                  KeySpline="0.72,0.09,1,1"
                  KeyTime="00:00:00.50"
                  Value="23.18"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="rectangle1"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame
                  KeySpline="0.72,0.09,1,1"
                  KeyTime="00:00:00.50"
                  Value="23.51"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="rectangle1"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame
                  KeySpline="0.72,0.09,1,1"
                  KeyTime="00:00:00.50"
                  Value="14.90"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="rectangle1"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame
                  KeySpline="0.72,0.09,1,1"
                  KeyTime="00:00:00.50"
                  Value="4.69"/>
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="TurnOff">
              <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame
                  KeySpline="0.72,0.09,1,1"
                  KeyTime="00:00:00"
                  Value="23.18"/>
                <SplineDoubleKeyFrame
                  KeyTime="00:00:00.60"
                  Value="0"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="rectangle1"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame
                  KeySpline="0.72,0.09,1,1"
                  KeyTime="00:00:00"
                  Value="23.51"/>
                <SplineDoubleKeyFrame
                  KeyTime="00:00:00.60"
                  Value="0"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="rectangle1"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame
                  KeySpline="0.72,0.09,1,1"
                  KeyTime="00:00:00"
                  Value="14.90"/>
                <SplineDoubleKeyFrame
                  KeyTime="00:00:00.60"
                  Value="0.55"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Duration="00:00:00.00"
                Storyboard.TargetName="rectangle1"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame
                  KeySpline="0.72,0.09,1,1"
                  KeyTime="00:00:00"
                  Value="4.69"/>
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </ControlTemplate.Resources>
          <Viewbox>
            <Grid
              Width="191"
              Height="188">
              <Grid.RowDefinitions>
                <RowDefinition Height="0.15*"/>
                <RowDefinition Height="0.68*"/>
                <RowDefinition Height="0.16*"/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.15*"/>
                <ColumnDefinition Width="0.68*"/>
                <ColumnDefinition Width="0.15*"/>
              </Grid.ColumnDefinitions>
              <Ellipse
                Width="Auto"
                Grid.ColumnSpan="3"
                Grid.RowSpan="3"
                HorizontalAlignment="Stretch"
                Margin="3,3,3,3">
                <Ellipse.Fill>
                  <RadialGradientBrush>
                    <GradientStop Offset="0"
                                  Color="#FF3D3D3D"/>
                    <GradientStop Offset="1"
                                  Color="#FF131313"/>
                  </RadialGradientBrush>
                </Ellipse.Fill>
                <Ellipse.Stroke>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FFA2A2A2"/>
                    <GradientStop Offset="1"
                                  Color="#FF535353"/>
                  </LinearGradientBrush>
                </Ellipse.Stroke>
                <Ellipse.Effect>
                  <DropShadowEffect
                    Direction="240"
                    ShadowDepth="3"/>
                </Ellipse.Effect>
              </Ellipse>
              <Ellipse
                Width="Auto"
                Grid.Column="1"
                Grid.Row="1"
                HorizontalAlignment="Stretch"
                Margin="0.17,0.71,-0.18,0.16">
                <Ellipse.Stroke>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FF262626"/>
                    <GradientStop Offset="1"
                                  Color="#FF000000"/>
                  </LinearGradientBrush>
                </Ellipse.Stroke>
                <Ellipse.Fill>
                  <RadialGradientBrush>
                    <GradientStop Offset="0"
                                  Color="#FF3D3D3D"/>
                    <GradientStop Offset="1"
                                  Color="#FF131313"/>
                  </RadialGradientBrush>
                </Ellipse.Fill>
              </Ellipse>
              <Rectangle
                x:Name="rectangle"
                Grid.Column="1"
                Grid.Row="1"
                Margin="51.02,0.71,50.69,0"
                RadiusX="1.21"
                RadiusY="1.21"
                RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                  <TransformGroup>
                    <ScaleTransform
                      ScaleX="1"
                      ScaleY="1"/>
                    <SkewTransform AngleX="0"
                                   AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0"
                                        Y="0"/>
                  </TransformGroup>
                </Rectangle.RenderTransform>
                <Rectangle.Fill>
                  <RadialGradientBrush>
                    <GradientStop Offset="0"
                                  Color="#FF3D3D3D"/>
                    <GradientStop Offset="1"
                                  Color="#FF131313"/>
                  </RadialGradientBrush>
                </Rectangle.Fill>
                <Rectangle.Stroke>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FF262626"/>
                    <GradientStop Offset="1"
                                  Color="#FF000000"/>
                  </LinearGradientBrush>
                </Rectangle.Stroke>
              </Rectangle>
              <Rectangle
                x:Name="rectangle1"
                Height="32.36"
                Grid.Column="1"
                Grid.Row="1"
                Margin="61.89,8,63.24,0"
                VerticalAlignment="Top"
                Fill="#FFC9C9C9"
                RadiusX="1.21"
                RadiusY="1.21"
                RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                  <TransformGroup>
                    <ScaleTransform
                      ScaleX="1"
                      ScaleY="1"/>
                    <SkewTransform AngleX="0"
                                   AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0"
                                        Y="0"/>
                  </TransformGroup>
                </Rectangle.RenderTransform>
                <Rectangle.Stroke>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FF262626"/>
                    <GradientStop Offset="1"
                                  Color="#FF000000"/>
                  </LinearGradientBrush>
                </Rectangle.Stroke>
              </Rectangle>
              <Ellipse
                Grid.Column="1"
                Margin="56.64,8,58.15,3.89"
                VerticalAlignment="Stretch"
                Fill="{x:Null}">
                <Ellipse.Stroke>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FF767676"/>
                    <GradientStop Offset="1"
                                  Color="#FFDCDCDC"/>
                  </LinearGradientBrush>
                </Ellipse.Stroke>
              </Ellipse>
              <Rectangle
                Width="2.35"
                Height="16.69"
                Grid.Column="1"
                HorizontalAlignment="Right"
                Margin="0,0,33.98,-2.11"
                VerticalAlignment="Bottom"
                RadiusX="1.21"
                RadiusY="1.21"
                RenderTransformOrigin="0.5,0.5"
                Stroke="{x:Null}">
                <Rectangle.Fill>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FF7D7D7D"/>
                    <GradientStop Offset="1"
                                  Color="#FFDFDFDF"/>
                  </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.RenderTransform>
                  <TransformGroup>
                    <ScaleTransform
                      ScaleX="1"
                      ScaleY="1"/>
                    <SkewTransform AngleX="0"
                                   AngleY="0"/>
                    <RotateTransform Angle="25.51"/>
                    <TranslateTransform X="0"
                                        Y="0"/>
                  </TransformGroup>
                </Rectangle.RenderTransform>
              </Rectangle>
            </Grid>
          </Viewbox>
          <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="ToggleButton.Unchecked">
              <BeginStoryboard
                x:Name="TurnOff_BeginStoryboard"
                Storyboard="{StaticResource TurnOff}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="ToggleButton.Checked">
              <BeginStoryboard
                x:Name="TurnOn_BeginStoryboard"
                Storyboard="{StaticResource TurnOn}"/>
            </EventTrigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </CheckBox.Template>
    </CheckBox>
  </Grid>
</Page>
