To mark my moving to Switzerland and starting a new job here is a Windows 8 Metro style clock in Silverlight 4.
Bear in mind this is just to demonstrate layout and design, the clock updates every minute but not necessarily on the minute so it doesn’t run like clockwork. Plus the wi-fi and battery icons are just for show and don’t dynamically update with actual readings.
Source
DigitalClock.xaml.cs
using System;
using System.Windows.Threading;
namespace SilverlightMetroClock
{
public partial class DigitalClock
{
public DigitalClock()
{
InitializeComponent();
// updates every minute but perhaps not on the minute :)
DispatcherTimer timer = new DispatcherTimer {Interval = new TimeSpan(0, 0, 1, 0)};
timer.Tick += timer_Tick;
timer.Start();
UpdateDisplay();
}
void timer_Tick(object sender, EventArgs e)
{
UpdateDisplay();
}
void UpdateDisplay()
{
var now = DateTime.Now;
TimeTextBlock.Text = now.ToString("HH:mm");
DayTextBlock.Text = now.ToString("dddd");
DateTextBlock.Text = now.ToString("MMMM d");
}
}
}
DigitalClock.xaml
<UserControl x:Class="SilverlightMetroClock.DigitalClock"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500"
Height="150">
<Grid Background="{StaticResource BackgroundBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="25" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="WifiIcon"
Grid.Row="0"
Grid.Column="1"
Height="25"
Margin="0,0,0,5"
VerticalAlignment="Bottom">
<Path Width="26"
Height="26"
Margin="0,0,0,0"
Data="M33.172937,38.270306C33.636298,38.265931 34.098408,38.31531 34.548637,38.417819 33.938327,39.957959 33.588148,41.638111 33.588148,43.398272 33.588148,45.628473 34.138429,47.718663 35.088913,49.578833 32.867781,50.43891 30.286466,49.918863 28.64563,48.058694 26.524549,45.658476 26.804692,41.968142 29.255941,39.777943 30.381515,38.780352 31.782854,38.283432 33.172937,38.270306z M42.515223,36.582736C41.955198,36.582736 41.395174,36.79527 40.970165,37.22034 40.120026,38.070478 40.120026,39.460438 40.970165,40.310577L44.15025,43.490663 41.150105,46.490808C40.300089,47.340947 40.300089,48.730907 41.150105,49.581045 42.000122,50.430941 43.390204,50.430941 44.240344,49.581045L47.240488,46.5809 50.12051,49.460922C50.980659,50.311062 52.360731,50.311062 53.210749,49.460922 54.060764,48.611028 54.070774,47.220823 53.210749,46.370685L50.330604,43.490663 53.390688,40.430457C54.240828,39.580561 54.240828,38.190357 53.390688,37.340463 52.540672,36.490324 51.150589,36.480314 50.300572,37.340463L47.240488,40.400425 44.06028,37.22034C43.635272,36.79527,43.075247,36.582736,42.515223,36.582736z M47.180427,32.67007C53.110767,32.670071 57.910927,37.470352 57.910927,43.400571 57.910927,49.331034 53.110767,54.131071 47.180427,54.131071 41.260096,54.131071 36.449927,49.331034 36.449927,43.400571 36.449927,37.470352 41.260096,32.670071 47.180427,32.67007z M33.018136,20.500918C36.1167,20.47427 39.221307,21.069399 42.202856,22.325673 46.113247,24.105708 49.633599,27.405772 53.063942,31.165845 51.283764,30.305828 49.293565,29.815819 47.183354,29.815819 44.04304,29.815819 41.15275,30.89584 38.85252,32.685874 33.091944,29.145806 28.101444,30.305828 20.820716,36.945957L20.400673,37.315964 13.629995,29.655815 14.030037,29.285808C19.4137,23.627574,26.201293,20.559546,33.018136,20.500918z M34.071325,0.0013465881C39.261796,0.043453217 44.356957,1.0763702 48.876303,3.4138107 57.485651,8.124321 62.65526,12.764826 66.664957,17.205307L58.505575,24.436091C54.71586,20.265638 50.416186,16.30521 44.456637,13.274881 32.057576,7.4142456 15.908798,12.43479 7.4394379,21.795804L7.0194702,22.185847 0,14.244986 0.42996979,13.854944C6.9197903,6.2569313,20.806787,-0.10626984,34.071325,0.0013465881z"
Fill="{StaticResource ForegroundBrush}"
Stretch="Uniform" />
</Viewbox>
<Viewbox x:Name="BatteryIcon"
Grid.Row="1"
Grid.Column="1"
Height="25"
Margin="0,5,0,0"
VerticalAlignment="Top">
<Path Width="26"
Height="26"
Margin="0,0,0,0"
Data="M5.0491318,48.393315C4.3017105,48.393315,3.6969174,48.522218,3.6969172,48.682416L3.6969172,58.229268C3.6969174,58.389474,4.3017105,58.519574,5.0491318,58.519574L21.312653,58.519574C22.059346,58.519574,22.663838,58.389474,22.663838,58.229268L22.663838,48.682416C22.663838,48.522218,22.059346,48.393315,21.312653,48.393315z M5.0491318,34.039033C4.3017105,34.039033,3.6969174,34.167933,3.6969172,34.329535L3.6969172,43.876489C3.6969174,44.035188,4.3017105,44.166688,5.0491318,44.166688L21.312653,44.166688C22.059346,44.166688,22.663838,44.035188,22.663838,43.876489L22.663838,34.329535C22.663838,34.167933,22.059346,34.039033,21.312653,34.039033z M5.0491318,19.686151C4.3017105,19.686151,3.6969174,19.815052,3.6969172,19.975152L3.6969172,29.522107C3.6969174,29.682307,4.3017105,29.813907,5.0491318,29.813907L21.312653,29.813907C22.059346,29.813907,22.663838,29.682307,22.663838,29.522107L22.663838,19.975152C22.663838,19.815052,22.059346,19.686151,21.312653,19.686151z M1.4384639,10.689999L24.397816,10.689999C25.190506,10.689999,25.835001,11.192702,25.835001,11.811106L25.835001,61.174687C25.835001,61.794492,25.190506,62.296994,24.397816,62.296994L1.4384639,62.296994C0.64354791,62.296994,3.776515E-07,61.794492,0,61.174687L0,11.811106C3.776515E-07,11.192702,0.64354791,10.689999,1.4384639,10.689999z M7.0463995,0L18.789292,0C19.762597,0,20.552,0.78900433,20.552,1.76159L20.552,5.0504084C20.552,6.0229974,19.762597,6.8119996,18.789292,6.8119998L7.0463995,6.8119998C6.0730642,6.8119996,5.2840003,6.0229974,5.2840008,5.0504084L5.2840008,1.76159C5.2840003,0.78900433,6.0730642,0,7.0463995,0z"
Fill="{StaticResource ForegroundBrush}"
Stretch="Uniform" />
</Viewbox>
<TextBlock x:Name="TimeTextBlock"
Grid.RowSpan="2"
Grid.Column="3"
Style="{StaticResource TimeTextBlockStyle}"
Text="14:38" />
<TextBlock x:Name="DayTextBlock"
Grid.Column="5"
Style="{StaticResource DayTextBlockStyle}"
Text="Saturday" />
<TextBlock x:Name="DateTextBlock"
Grid.Row="1"
Grid.Column="5"
Style="{StaticResource DateTextBlockStyle}"
Text="September 29" />
</Grid>
</UserControl>
App.xaml
<Application x:Class="SilverlightMetroClock.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
<SolidColorBrush x:Key="ForegroundBrush" Color="White" />
<SolidColorBrush x:Key="BackgroundBrush" Color="#E4000000" />
<Style x:Key="TimeTextBlockStyle" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="/SilverlightMetroClock;component/Fonts/Fonts.zip#Segoe UI Light" />
<Setter Property="FontSize" Value="82" />
<Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
</Style>
<Style x:Key="DayTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="/SilverlightMetroClock;component/Fonts/Fonts.zip#Segoe UI Light" />
<Setter Property="FontSize" Value="32" />
<Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Margin" Value="0,0,0,-5" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
<Style x:Key="DateTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="/SilverlightMetroClock;component/Fonts/Fonts.zip#Segoe UI Light" />
<Setter Property="FontSize" Value="32" />
<Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Margin" Value="0,-2,0,0" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
</Application.Resources>
</Application>
Online Demo
http://stevenhollidge.com/blog-source-code/silverlightmetroclock/
No comments:
Post a Comment