This is a short tutorial on how to create a Tron looking clock in expression blend. It is based on a simple code for an analog clock and then with a few minor tweaks we give it a nice Tron themed look and feel. By "analog clock" I mean the same coding applies when building an analog clock but instead of rotating the angle with it pinned to the base we will be using the StartAngle in an arc (ring shape) for the seconds, minutes and hours with a smooth animation.
This is what the clock will look like when we are done.
So its a simple layout. It uses 3 arcs (ring shapes) and 2 textboxes for the actual time and the date. The arcs have a drop shadow effect, which might vary depending on the size you want the thing to be.
And then both textboxes also have a drop shadow effect, to give it a Tron sort of look and feel.
Like I said the code is pretty basic . It's just using a DispatcherTimer method for everything. You can check it out; I don't think I am going to go into to much detail, the code pretty much says it all. The main difference here is that I changed what would normally be a rotatetransform element of what would be the hands of the clock to the StartAngle on the arc.
Storyboard.TargetProperty="StartAngle"
and then just referred to the <ed:Arc> using its x:Name with all of the double animations in one story board.
# Full XAML code #
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" mc:Ignorable="d"
x:Class="Tron_clock.MainWindow"
x:Name="Window" Title="MainWindow" Loaded="Window1_Loaded" Height="354" Width="349" WindowStartupLocation="CenterScreen"
ResizeMode="NoResize">
<Window.Resources>
<Storyboard x:Key="OnLoaded1">
<DoubleAnimation x:Name="secondAnimation" Storyboard.TargetName="secondArc" Storyboard.TargetProperty="StartAngle"
Duration="0:1:0" RepeatBehavior="Forever" By="360" />
<DoubleAnimation x:Name="minuteAnimation" Storyboard.TargetName="minuteArc" Storyboard.TargetProperty="StartAngle"
Duration="1:0:0" RepeatBehavior="Forever" By="360" />
<DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="hourArc" Storyboard.TargetProperty="StartAngle"
Duration="24:0:0" RepeatBehavior="Forever" By="360" />
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="OnLoaded1_BeginStoryboard" Storyboard="{StaticResource OnLoaded1}"/>
</EventTrigger>
</Window.Triggers>
<Canvas Background="#FF3F3D3D">
<TextBox Height="24.667" x:Name="date" TextWrapping="Wrap" BorderBrush="{x:Null}" FontSize="13.333" FontWeight="Bold" SelectionBrush="{x:Null}" Background="{x:Null}" Width="88.667" Foreground="#FF1DD4F7" FontFamily="Segoe WP Light" Canvas.Left="116.999"
Canvas.Top="159.996">
<TextBox.Effect>
<DropShadowEffect ShadowDepth="0" Color="#FF5EE5FF" BlurRadius="18"/>
</TextBox.Effect>
</TextBox>
<ed:Arc x:Name="secondArc" ArcThickness="12" ArcThicknessUnit="Pixel" EndAngle="360" Stretch="None" StartAngle="0" Fill="#FF1DD4F7"
HorizontalAlignment="Left" Width="273" Height="273" VerticalAlignment="Top" Canvas.Left="26.5" Canvas.Top="20" >
<ed:Arc.Effect>
<DropShadowEffect Color="#FF73D0EF" BlurRadius="18" ShadowDepth="0"/>
</ed:Arc.Effect>
</ed:Arc>
<ed:Arc x:Name="minuteArc" ArcThickness="15" ArcThicknessUnit="Pixel" EndAngle="360" Stretch="None" StartAngle="0" Fill="#FF1DD4F7"
HorizontalAlignment="Left" Width="223.666" Height="223.666" VerticalAlignment="Top" Canvas.Left="51.331" Canvas.Top="43.833" >
<ed:Arc.Effect>
<DropShadowEffect Color="#FF73D0EF" BlurRadius="18" ShadowDepth="0"/>
</ed:Arc.Effect>
</ed:Arc>
<ed:Arc x:Name="hourArc" ArcThickness="15" ArcThicknessUnit="Pixel" EndAngle="360" Stretch="None" StartAngle="0" Fill="#FF1DD4F7"
HorizontalAlignment="Left" Width="166.333" Height="166.333" VerticalAlignment="Top" Canvas.Left="81.334" Canvas.Top="73.334" >
<ed:Arc.Effect>
<DropShadowEffect Color="#FF73D0EF" BlurRadius="18" ShadowDepth="0"/>
</ed:Arc.Effect>
</ed:Arc>
<TextBlock x:Name="time" Height="35.667" Canvas.Left="116.331" TextWrapping="Wrap" Canvas.Top="128" Width="94.333" FontSize="26.667"
FontFamily="Segoe WP Light" Foreground="#FF1DD4F7" RenderTransformOrigin="0.479,0.467">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="2" Color="#FF1DD4F7" ShadowDepth="0"/>
</TextBlock.Effect>
</TextBlock>
</Canvas>
</Window>
# Full C# code #
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
//added
using System.Windows.Threading;
namespace Tron_clock
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow
{
//Create an instance of DispatcherTimer
private DispatcherTimer dT = new DispatcherTimer();
DispatcherTimer timer;
public MainWindow()
{
this.InitializeComponent();
//Sets the time
timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromSeconds(1.00);
timer.Start();
timer.Tick += new EventHandler(delegate(object s, EventArgs a)
{
time.Text = "" + DateTime.Now.Hour + ":"
+ DateTime.Now.Minute + ":"
+ DateTime.Now.Second;
});
//Sets the date
date.Text = DateTime.Now.ToShortDateString();
}
private void Window1_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
//Set the interval of the Tick event to 1 sec
dT.Interval = new TimeSpan(0, 0, 1);
//Start the DispatcherTimer
dT.Start();
secondArc.StartAngle = (DateTime.Now.Second * 6);
minuteArc.StartAngle = (DateTime.Now.Minute * 6);
hourArc.StartAngle = (DateTime.Now.Hour * 30) + (DateTime.Now.Minute * 0.5);
}
}
}