(untagged)

7-Segment Time Display Widget in WPF

Revanth Ramesh

0.00/5 (No votes)

19 Jul 2015

Futuristic Talking 7-Segment Time Display Widget in WPF

Introduction

The tip is all about a 7-Segment Time Display Widget designed to present a futuristic appearance and also to be effective and efficient too. The UI of the app is done in WPF while the business logic is handled in C#. The app is designed such a way to delegate a widget kind off, so that it does not junk the task bar. To add more about the app, it is featured with Speech Synthesizer, Dispatcher timers and much more. The application will definitely be a pleasing one to geeks of a kind Sci-Fi and Techs; hoping so.

Background

As mentioned above, the app involves many concepts of C# out of which I have penned down some of them.

Dispatcher Timer

It is a typical timer belonging to the namespace System.Windows.Threading. It is a very useful component which helps us to process a code snippet at an interval in the priority order which we specify. Below is a basic example for the Dispatcher Timer referred from MSDN.

//
//  DispatcherTimer setup
dispatcherTimer = new System.Windows.Threading.DispatcherTimer();
dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
dispatcherTimer.Interval = new TimeSpan(0,0,1);
dispatcherTimer.Start();

//
//  System.Windows.Threading.DispatcherTimer.Tick handler 
// 
//  Updates the current seconds display and calls 
//  InvalidateRequerySuggested on the CommandManager to force  
//  the Command to raise the CanExecuteChanged event. 
private void dispatcherTimer_Tick(object sender, EventArgs e)
{
    // Updating the Label which displays the current second
    lblSeconds.Content = DateTime.Now.Second;

    // Forcing the CommandManager to raise the RequerySuggested event
    CommandManager.InvalidateRequerySuggested();
}

Speech Synthesizer

It is yet another simple and interesting feature provided by C# under the namespace System.Speech.Synthesis. Here is a code snippet which is also farmed out of from MSDN.

      // Initialize a new instance of the SpeechSynthesizer.
      SpeechSynthesizer synth = new SpeechSynthesizer();

      // Configure the audio output. 
      synth.SetOutputToDefaultAudioDevice();

      // Speak a string.
      synth.Speak("This example demonstrates a basic use of Speech Synthesizer");

Double Animation

Animates the value of a Double property between two target values using linear interpolation over a specified Duration in the namespace System.Windows.Media.Animation. MSDN

<DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" />

Using the Code

The design overview of the app tagged with the UI variable names is just below.

Front End Design Code in XAML - below have given the

<Window x:Class="Futuristic_Seven_Segment_Time_Display.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="150" Width="500" 
        AllowsTransparency="True" WindowState="Normal" 
        WindowStyle="None" ResizeMode="NoResize" 
        WindowStartupLocation="Manual" Background="Transparent" 
        MouseLeftButtonDown="Window_MouseLeftButtonDown" 
        MouseRightButtonUp="Window_MouseRightButtonUp" 
        MouseDoubleClick="Window_MouseDoubleClick" 
        ShowInTaskbar="False" MouseWheel="Window_MouseWheel">
    <Border Name="MainBorder" Background="Black" 
    CornerRadius="10,10,10,10" Width="450" Height="90" 
    HorizontalAlignment="Center" VerticalAlignment="Center" >
        <Grid Name="ClockGrid" HorizontalAlignment="Center" 
        VerticalAlignment="Center" >
            <Ellipse Name="Nyt_1_Ellipse" Margin="7.5,10,0,0" 
            Width="30" Height="30" Stroke="Cyan" 
            StrokeThickness="3"  HorizontalAlignment="Left" 
            VerticalAlignment="Top" />
            <Ellipse Name="Nyt_2_Ellipse" Margin="13.5,16,0,0" 
            Width="18" Height="18" Stroke="Cyan" 
            StrokeThickness="1.5" HorizontalAlignment="Left" 
            VerticalAlignment="Top" />

            <Ellipse Name="Mrng_1_Ellipse" Margin="7.5,45,0,0" 
            Width="30" Height="30" Stroke="DarkOrange" 
            StrokeThickness="3"  HorizontalAlignment="Left" 
            VerticalAlignment="Top" />
            <Ellipse Name="Mrng_2_Ellipse" Margin="13.5,51,0,0" 
            Width="18" Height="18" Stroke="#FFFFA100" 
            StrokeThickness="1.5"  HorizontalAlignment="Left" 
            VerticalAlignment="Top" />

            <Rectangle Name="Clock_Border" Margin="0,0,0,0" 
            Width="440" Height="85" Fill="#9B000000" 
            HorizontalAlignment="Left" VerticalAlignment="Top" 
            RadiusX="10" RadiusY="10" Panel.ZIndex="0" />

            <Grid Name="Hours_0" Margin="40,2.5,0,0" 
            Width="60" Height="83" 
            HorizontalAlignment="Left" VerticalAlignment="Top" >
                <Polyline Name="H_0_P_1" Fill="#FF00F2FF" 
                Points="10,5,47,5,50,8,47,11,10,11,7,8,10,5" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_0_P_2" Fill="#FF00F2FF" 
                Points="55,12,55,36,52,39,49,36,49,12,52,9,55,12" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_0_P_3" Fill="#FF00F2FF" 
                Points="10,38,47,38,50,41,47,44,10,44,7,41,10,38" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_0_P_4" Fill="#FF00F2FF" 
                Points="8,12,8,36,5,39,2,36,2,12,5,9,8,12" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_0_P_5" Fill="#FF00F2FF" 
                Points="55,46,55,70,52,73,49,70,49,46,52,42,55,46" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_0_P_6" Fill="#FF00F2FF" 
                Points="10,71,47,71,50,74,47,78,10,78,7,74,10,71" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_0_P_7" Fill="#FF00F2FF" 
                Points="8,46,8,70,5,73,2,70,2,46,5,42,8,46" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
            </Grid>
            <Grid Name="Hours_1" Margin="102,2.5,0,0" 
            Width="60" Height="83" HorizontalAlignment="Left" 
            VerticalAlignment="Top" >
                <Polyline Name="H_1_P_1" Fill="#FF00F2FF" 
                Points="10,5,47,5,50,8,47,11,10,11,7,8,10,5" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_1_P_2" Fill="#FF00F2FF" 
                Points="55,12,55,36,52,39,49,36,49,12,52,9,55,12" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_1_P_3" Fill="#FF00F2FF" 
                Points="10,38,47,38,50,41,47,44,10,44,7,41,10,38" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_1_P_4" Fill="#FF00F2FF" 
                Points="8,12,8,36,5,39,2,36,2,12,5,9,8,12" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_1_P_5" Fill="#FF00F2FF" 
                Points="55,46,55,70,52,73,49,70,49,46,52,42,55,46" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_1_P_6" Fill="#FF00F2FF" 
                Points="10,71,47,71,50,74,47,78,10,78,7,74,10,71" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="H_1_P_7" Fill="#FF00F2FF" 
                Points="8,46,8,70,5,73,2,70,2,46,5,42,8,46" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
            </Grid>
            <Grid Name="HMColon" Width="15" 
            HorizontalAlignment="Left" Margin="163,0,0,0">
                <Rectangle Name="HM_1_Colon" Margin="0,35,0,0" 
                Fill="Cyan" Height="7" Width="7"  
                Stroke="Cyan" HorizontalAlignment="Center" 
                VerticalAlignment="Center" ></Rectangle>
                <Rectangle Name="HM_2_Colon" Margin="0,-25,0,0" 
                Fill="Cyan" Height="7" Width="7"  
                Stroke="Cyan" HorizontalAlignment="Center" 
                VerticalAlignment="Center" ></Rectangle>
            </Grid>
            <Grid Name="Minutes_0" Margin="180,2.5,0,0" 
            Width="60" Height="83" HorizontalAlignment="Left" VerticalAlignment="Top" >
                <Polyline Name="M_0_P_1" Fill="#FF00F2FF" 
                Points="10,5,47,5,50,8,47,11,10,11,7,8,10,5" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_0_P_2" Fill="#FF00F2FF" 
                Points="55,12,55,36,52,39,49,36,49,12,52,9,55,12" 
		Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_0_P_3" Fill="#FF00F2FF" 
                Points="10,38,47,38,50,41,47,44,10,44,7,41,10,38" 
		Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_0_P_4" Fill="#FF00F2FF" 
                Points="8,12,8,36,5,39,2,36,2,12,5,9,8,12" 
		Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_0_P_5" Fill="#FF00F2FF" 
                Points="55,46,55,70,52,73,49,70,49,46,52,42,55,46" 
		Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_0_P_6" Fill="#FF00F2FF" 
                Points="10,71,47,71,50,74,47,78,10,78,7,74,10,71" 
		Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_0_P_7" Fill="#FF00F2FF" 
                Points="8,46,8,70,5,73,2,70,2,46,5,42,8,46" 
		Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
            </Grid>
            <Grid Name="Minutes_1" Margin="240,2.5,0,0" 
            Width="60" Height="83" 
            HorizontalAlignment="Left" VerticalAlignment="Top" >
                <Polyline Name="M_1_P_1" Fill="#FF00F2FF" 
                Points="10,5,47,5,50,8,47,11,10,11,7,8,10,5" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_1_P_2" Fill="#FF00F2FF" 
                Points="55,12,55,36,52,39,49,36,49,12,52,9,55,12" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_1_P_3" Fill="#FF00F2FF" 
                Points="10,38,47,38,50,41,47,44,10,44,7,41,10,38" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_1_P_4" Fill="#FF00F2FF" 
                Points="8,12,8,36,5,39,2,36,2,12,5,9,8,12" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_1_P_5" Fill="#FF00F2FF" 
                Points="55,46,55,70,52,73,49,70,49,46,52,42,55,46" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_1_P_6" Fill="#FF00F2FF" 
                Points="10,71,47,71,50,74,47,78,10,78,7,74,10,71" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="M_1_P_7" Fill="#FF00F2FF" 
                Points="8,46,8,70,5,73,2,70,2,46,5,42,8,46" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
            </Grid>
            <Grid Name="MSColon" Width="15" 
            HorizontalAlignment="Left" Margin="302,0,0,0">
                <Rectangle Name="MS_1_Colon" Margin="0,35,0,0" 
                Fill="Cyan" Height="7" Width="7"  
                Stroke="Cyan" HorizontalAlignment="Center" 
                VerticalAlignment="Center" ></Rectangle>
                <Rectangle Name="MS_2_Colon" Margin="0,-25,0,0" 
                Fill="Cyan" Height="7" Width="7"  
                Stroke="Cyan" HorizontalAlignment="Center" 
                VerticalAlignment="Center" ></Rectangle>
            </Grid>
            <Grid Name="Seconds_0" Margin="318,2.5,0,0" 
            Width="60" Height="83" HorizontalAlignment="Left" 
            VerticalAlignment="Top" >
                <Polyline Name="S_0_P_1" Fill="#FF00F2FF" 
                Points="10,5,47,5,50,8,47,11,10,11,7,8,10,5" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_0_P_2" Fill="#FF00F2FF" 
                Points="55,12,55,36,52,39,49,36,49,12,52,9,55,12" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_0_P_3" Fill="#FF00F2FF" 
                Points="10,38,47,38,50,41,47,44,10,44,7,41,10,38" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_0_P_4" Fill="#FF00F2FF" 
                Points="8,12,8,36,5,39,2,36,2,12,5,9,8,12" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_0_P_5" Fill="#FF00F2FF" 
                Points="55,46,55,70,52,73,49,70,49,46,52,42,55,46" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_0_P_6" Fill="#FF00F2FF" 
                Points="10,71,47,71,50,74,47,78,10,78,7,74,10,71" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_0_P_7" Fill="#FF00F2FF" 
                Points="8,46,8,70,5,73,2,70,2,46,5,42,8,46" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
            </Grid>
            <Grid Name="Seconds_1" Margin="380,2.5,0,0" 
            Width="60" Height="83" HorizontalAlignment="Left" 
            VerticalAlignment="Top" >
                <Polyline Name="S_1_P_1" Fill="#FF00F2FF" 
                Points="10,5,47,5,50,8,47,11,10,11,7,8,10,5" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_1_P_2" Fill="#FF00F2FF" 
                Points="55,12,55,36,52,39,49,36,49,12,52,9,55,12" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_1_P_3" Fill="#FF00F2FF" 
                Points="10,38,47,38,50,41,47,44,10,44,7,41,10,38" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_1_P_4" Fill="#FF00F2FF" 
                Points="8,12,8,36,5,39,2,36,2,12,5,9,8,12" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_1_P_5" Fill="#FF00F2FF" 
                Points="55,46,55,70,52,73,49,70,49,46,52,42,55,46" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_1_P_6" Fill="#FF00F2FF" 
                Points="10,71,47,71,50,74,47,78,10,78,7,74,10,71" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
                <Polyline Name="S_1_P_7" Fill="#FF00F2FF" 
                Points="8,46,8,70,5,73,2,70,2,46,5,42,8,46" 
                Stroke="Cyan" StrokeThickness="0.2"  ></Polyline>
            </Grid>

        </Grid>
    </Border>
</Window>

Regular Methods

Set_StartUP_Location - Contains the code to specify the startup location of the application

private void Set_StartUP_Location()
{
    this.Left = SystemParameters.FullPrimaryScreenWidth - this.Width - 20;
    this.Top = 20;
}

Initialize_NotifyIcon - Contains the code to make the application available with the notification icon in the hidden icon panel (The application will not be available in the taskbar).

private void Initialize_NotifyIcon()
{
     System.Windows.Forms.MenuItem[] NotifyMenu = new System.Windows.Forms.MenuItem[] 
     {   new System.Windows.Forms.MenuItem("About", new System.EventHandler(About_Show)), 
     new System.Windows.Forms.MenuItem("Exit", new System.EventHandler(Close_Application)) };

     System.Windows.Forms.ContextMenu ClickMenu = new System.Windows.Forms.ContextMenu(NotifyMenu);
     this.NotifyWidget.Icon = Futuristic_Seven_Segment_Time_Display.Properties.Resources._7SegIcon_ico;
            this.NotifyWidget.ContextMenu = ClickMenu;
            this.NotifyWidget.Visible = true;
            this.NotifyWidget.Click += new EventHandler(NotifyWidget_Click);
}

Initiate_Hour_Digits, Initiate_Minutes_Digits & Initiate_Seconds_Digits - This method initiates the UI with current time in 12 hrs format. In this method, the place value (HH,MM,SS) is painted with the respective color based on the time value by passing the place value name and time value to the method PassControls() method.

private void Initiate_Hour_Digits()
        {
            Hours = DateTime.Now.Hour.ToString();

            //Converting time from 24 hours format to 12 hours format
            if (int.Parse(Hours) > 12)
            {
                Hours = (int.Parse(Hours) - 12).ToString();
            }

            Hrs = Hours.ToCharArray();

            if (int.Parse(Hours) > 9)
            {
                PassControls("H_0_P_1", Hrs[0]);
                PassControls("H_1_P_1", Hrs[1]);
            }
            else
            {
                PassControls("H_1_P_1", Hrs[0]);
                //if the Minutes value is less than 9, initiating first Hours digit to '0'
                PassControls("H_0_P_1", '0');
            }
        }

        private void Initiate_Minutes_Digits()
        {
            Minutes = DateTime.Now.Minute.ToString();
            Mins = Minutes.ToCharArray();

            if (int.Parse(Minutes) > 9)
            {
                PassControls("M_0_P_1", Mins[0]);
                PassControls("M_1_P_1", Mins[1]);
            }
            else
            {
                PassControls("M_1_P_1", Mins[0]);
                //if the Minutes value is less than 9, initiating first Minutes digit to '0'
                PassControls("M_0_P_1", '0');                
            }
        }

        private void Initiate_Seconds_Digits()
        {
            Seconds = DateTime.Now.Second.ToString();
            Secs = Seconds.ToCharArray();

            if (int.Parse(Seconds) > 9)
            {
                PassControls("S_0_P_1", Secs[0]);
                PassControls("S_1_P_1", Secs[1]);
            }
            else
            {
                //if the Minutes value is less than 9, initiating first Seconds digit to '0'
                PassControls("S_0_P_1", '0');
                PassControls("S_1_P_1", Secs[0]);
            }
        }

Dispatcher_Timer - Like initiate methods, this method also sends the values to the PassControls() method every second.

private void Dispatcher_Timer()
{
    DispatcherTimer Sys_timer = new DispatcherTimer
	(new TimeSpan(0, 0, 0, 1), DispatcherPriority.Normal, delegate
    {
         Seconds = DateTime.Now.Second.ToString();
         Secs = Seconds.ToCharArray();

         Minutes = DateTime.Now.Minute.ToString();
         Mins = Minutes.ToCharArray();

         Hours = DateTime.Now.Hour.ToString();

         if (int.Parse(Hours) > 12)
         {
             Hours = (int.Parse(Hours) - 12).ToString();
         }

         Hrs = Hours.ToCharArray();

         if (int.Parse(Seconds) > 9)
         {
             //To reduce lines of execution
             //Control enters the below IF block only if the 2nd Digit of the Seconds value reaches 0.
             //Only by then the 1st Digit of the Seconds value experience a change
             if (Secs[1] == '0')
             {
                 PassControls("S_0_P_1", Secs[0]);
             }
             PassControls("S_1_P_1", Secs[1]);
         }
         else
         {
              //To reduce lines of execution
              //Control enters the below IF block only if the absolute Seconds value is 0.
              //Only by then the Minutes value experience a change
              if (Secs[0] == '0')
              {
                  if (int.Parse(Minutes) > 9)
                  {
                      //To reduce lines of execution
                      //Control enters the below IF block only 
                      //if the 2nd Digit of the Minutes value reaches 0.
                      //Only by then the 1st Digit of the Minutes value experience a change                        
                       if (Mins[1] == '0')
                       {
                           PassControls("M_0_P_1", Mins[0]);
                        }
                        PassControls("M_1_P_1", Mins[1]);
                   }
                   else
                   {
                       //To reduce lines of execution
                       //Control enters the below IF block only if the absolute Minutes value is 0.
                       //Only by then the Hours value experience a change
                       if (Mins[0] == '0')
                       {
                           if (int.Parse(Hours) > 9)
                           {
                               PassControls("H_0_P_1", Hrs[0]);
                               PassControls("H_1_P_1", Hrs[1]);
                            }
                            else
                            {
                                PassControls("H_1_P_1", Hrs[0]);
                                PassControls("H_0_P_1", '0');
                             }
                        }

                        PassControls("M_1_P_1", Mins[0]);
                        PassControls("M_0_P_1", '0');
                   }
            }

            PassControls("S_1_P_1", Secs[0]);
            PassControls("S_0_P_1", '0');
      }

   }, this.Dispatcher);
}

PassControls - This method takes the place value and its corresponding time value and paints it respectively. To reduce the lines of code, the place values are assigned to new polyline UI variables.

public void PassControls(string Place_Value, char Time_Value)
        {
            Polyline x1;
            Polyline x2;
            Polyline x3;
            Polyline x4;
            Polyline x5;
            Polyline x6;
            Polyline x7;

            if (Place_Value == "S_0_P_1")
            {
                x1 = S_0_P_1 as Polyline;
                x2 = S_0_P_2 as Polyline;
                x3 = S_0_P_3 as Polyline;
                x4 = S_0_P_4 as Polyline;
                x5 = S_0_P_5 as Polyline;
                x6 = S_0_P_6 as Polyline;
                x7 = S_0_P_7 as Polyline;
            }
            else if (Place_Value == "S_1_P_1")
            {
                x1 = S_1_P_1 as Polyline;
                x2 = S_1_P_2 as Polyline;
                x3 = S_1_P_3 as Polyline;
                x4 = S_1_P_4 as Polyline;
                x5 = S_1_P_5 as Polyline;
                x6 = S_1_P_6 as Polyline;
                x7 = S_1_P_7 as Polyline;
            }
            else if (Place_Value == "M_0_P_1")
            {
                x1 = M_0_P_1 as Polyline;
                x2 = M_0_P_2 as Polyline;
                x3 = M_0_P_3 as Polyline;
                x4 = M_0_P_4 as Polyline;
                x5 = M_0_P_5 as Polyline;
                x6 = M_0_P_6 as Polyline;
                x7 = M_0_P_7 as Polyline;
            }
            else if (Place_Value == "M_1_P_1")
            {
                x1 = M_1_P_1 as Polyline;
                x2 = M_1_P_2 as Polyline;
                x3 = M_1_P_3 as Polyline;
                x4 = M_1_P_4 as Polyline;
                x5 = M_1_P_5 as Polyline;
                x6 = M_1_P_6 as Polyline;
                x7 = M_1_P_7 as Polyline;
            }
            else if (Place_Value == "H_0_P_1")
            {
                x1 = H_0_P_1 as Polyline;
                x2 = H_0_P_2 as Polyline;
                x3 = H_0_P_3 as Polyline;
                x4 = H_0_P_4 as Polyline;
                x5 = H_0_P_5 as Polyline;
                x6 = H_0_P_6 as Polyline;
                x7 = H_0_P_7 as Polyline;
            }
            else
            {
                x1 = H_1_P_1 as Polyline;
                x2 = H_1_P_2 as Polyline;
                x3 = H_1_P_3 as Polyline;
                x4 = H_1_P_4 as Polyline;
                x5 = H_1_P_5 as Polyline;
                x6 = H_1_P_6 as Polyline;
                x7 = H_1_P_7 as Polyline;
            }

            if (Time_Value == '1')
            {
                x1.Fill = SegmentDisabledColor_Brush;
                x2.Fill = SegmentEnabledColor_Brush;
                x3.Fill = SegmentDisabledColor_Brush;
                x4.Fill = SegmentDisabledColor_Brush;
                x5.Fill = SegmentEnabledColor_Brush;
                x6.Fill = SegmentDisabledColor_Brush;
                x7.Fill = SegmentDisabledColor_Brush;
            }
            else if (Time_Value == '2')
            {
                x1.Fill = SegmentEnabledColor_Brush;
                x2.Fill = SegmentEnabledColor_Brush;
                x3.Fill = SegmentEnabledColor_Brush;
                x4.Fill = SegmentDisabledColor_Brush;
                x5.Fill = SegmentDisabledColor_Brush;
                x6.Fill = SegmentEnabledColor_Brush;
                x7.Fill = SegmentEnabledColor_Brush;
            }
            else if (Time_Value == '3')
            {
                x1.Fill = SegmentEnabledColor_Brush;
                x2.Fill = SegmentEnabledColor_Brush;
                x3.Fill = SegmentEnabledColor_Brush;
                x4.Fill = SegmentDisabledColor_Brush;
                x5.Fill = SegmentEnabledColor_Brush;
                x6.Fill = SegmentEnabledColor_Brush;
                x7.Fill = SegmentDisabledColor_Brush;
            }
            else if (Time_Value == '4')
            {
                x1.Fill = SegmentDisabledColor_Brush;
                x2.Fill = SegmentEnabledColor_Brush;
                x3.Fill = SegmentEnabledColor_Brush;
                x4.Fill = SegmentEnabledColor_Brush;
                x5.Fill = SegmentEnabledColor_Brush;
                x6.Fill = SegmentDisabledColor_Brush;
                x7.Fill = SegmentDisabledColor_Brush;
            }
            else if (Time_Value == '5')
            {
                x1.Fill = SegmentEnabledColor_Brush;
                x2.Fill = SegmentDisabledColor_Brush;
                x3.Fill = SegmentEnabledColor_Brush;
                x4.Fill = SegmentEnabledColor_Brush;
                x5.Fill = SegmentEnabledColor_Brush;
                x6.Fill = SegmentEnabledColor_Brush;
                x7.Fill = SegmentDisabledColor_Brush;
            }
            else if (Time_Value == '6')
            {
                x1.Fill = SegmentEnabledColor_Brush;
                x2.Fill = SegmentDisabledColor_Brush;
                x3.Fill = SegmentEnabledColor_Brush;
                x4.Fill = SegmentEnabledColor_Brush;
                x5.Fill = SegmentEnabledColor_Brush;
                x6.Fill = SegmentEnabledColor_Brush;
                x7.Fill = SegmentEnabledColor_Brush;
            }
            else if (Time_Value == '7')
            {
                x1.Fill = SegmentEnabledColor_Brush;
                x2.Fill = SegmentEnabledColor_Brush;
                x3.Fill = SegmentDisabledColor_Brush;
                x4.Fill = SegmentDisabledColor_Brush;
                x5.Fill = SegmentEnabledColor_Brush;
                x6.Fill = SegmentDisabledColor_Brush;
                x7.Fill = SegmentDisabledColor_Brush;
            }
            else if (Time_Value == '8')
            {
                x1.Fill = SegmentEnabledColor_Brush;
                x2.Fill = SegmentEnabledColor_Brush;
                x3.Fill = SegmentEnabledColor_Brush;
                x4.Fill = SegmentEnabledColor_Brush;
                x5.Fill = SegmentEnabledColor_Brush;
                x6.Fill = SegmentEnabledColor_Brush;
                x7.Fill = SegmentEnabledColor_Brush;
            }
            else if (Time_Value == '9')
            {
                x1.Fill = SegmentEnabledColor_Brush;
                x2.Fill = SegmentEnabledColor_Brush;
                x3.Fill = SegmentEnabledColor_Brush;
                x4.Fill = SegmentEnabledColor_Brush;
                x5.Fill = SegmentEnabledColor_Brush;
                x6.Fill = SegmentEnabledColor_Brush;
                x7.Fill = SegmentDisabledColor_Brush;
            }
            else if (Time_Value == '0')
            {
                x1.Fill = SegmentEnabledColor_Brush;
                x2.Fill = SegmentEnabledColor_Brush;
                x3.Fill = SegmentDisabledColor_Brush;
                x4.Fill = SegmentEnabledColor_Brush;
                x5.Fill = SegmentEnabledColor_Brush;
                x6.Fill = SegmentEnabledColor_Brush;
                x7.Fill = SegmentEnabledColor_Brush;
            }
        }

Event Handlers

NotifyWidget_Click - Click Event for Notify Icon in hidden icons tray. This method brings up the application to the front of the screen if it is hidden or active behind another window.

void NotifyWidget_Click(object sender, System.EventArgs e)
{
     //if the App is Minimized/Hidden and need to be Maximized or make available
     if (MainBorder.Opacity == 0)
     {
         DoubleAnimation DA_Show_Widget = new DoubleAnimation
		(1, new Duration(new TimeSpan(0, 0, 0, 0, 450)));
         MainBorder.BeginAnimation(Border.OpacityProperty, DA_Show_Widget);
     }
     //if the App is behind the current window and need to be the Active Window
     else
     {
          DoubleAnimation DA_Show_Widget = new DoubleAnimation
		(0,1, new Duration(new TimeSpan(0, 0, 0, 0, 450)));
          MainBorder.BeginAnimation(Border.OpacityProperty, DA_Show_Widget);
           this.Activate();
     }
}

Window_MouseLeftButtonDown - This event gets triggered when you click and drag left mouse button. This changes the location of the widget to the point where your cursor is currently present.

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
     //Move the Entire Window to the Cursor Point
     this.DragMove();
}

Window_MouseRightButtonUp - This event is triggered when the right button of the mouse is released. This method hides the widget giving you a feel that it got minimized.

private void Window_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
{
    if (MainBorder.Opacity == 1)
     {
         DoubleAnimation DA_Hide_Widget = new DoubleAnimation
				(0, new Duration(new TimeSpan(0, 0, 0, 0, 450)));
         MainBorder.BeginAnimation(Border.OpacityProperty, DA_Hide_Widget);
     }
}

Window_MouseDoubleClick - This event is triggered when a double click is made on the widget window. This speaks out the current time in 24 hours format.

private void Window_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
     SpeechSynthesizer synthesizer = new SpeechSynthesizer();
     string Speak_String = "Hi The Time is " + 
	DateTime.Now.Hour.ToString() + " " + DateTime.Now.Minute.ToString(); 
     synthesizer.Volume = 100;
     synthesizer.Rate = -1;
     synthesizer.SpeakAsync(Speak_String);
}

Window_MouseWheel - This event is triggered when the widget is the active window and the mouse scrolled. If the mouse is scrolled upwards, the opacity of the widget is increased and the mouse is scrolled downwards, the opacity of the widget is decreased. Thus toggling between two backgrounds as in the image below.

private void Window_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            if (e.Delta > 0)
            {
                MainBorder.Background = Grid_Enabled_Color_Brush;
            }
            else
            {
                MainBorder.Background = Grid_Disabled_Color_Brush;
            }
        }

Points of Interest

Dispatcher_Timer and PassControls method were coded in such a way to get the maximum performance in order to sync the widget to the real time value. No external images were used throughout the application. Even the notification icon was done using the Visual Studio icon file. Similarly, 3+ functions are performed in the app just by using the mouse events to avoid inclusion of buttons or any other controls.

History

Initial version released on 7/19/2015

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here