Click here to Skip to main content
15,886,110 members
Search within:


Articles / Desktop Programming / WPF
 
Tip/Trick

7-Segment Time Display Widget in WPF

Rate me:
Please Sign up or sign in to vote.
4.75/5 (7 votes)
19 Jul 2015CPOL3 min read 23.7K   482   14   7
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.

C#
//
//  DispatcherTimer setup
dispatcherTimer = new System.Windows.Threading.DispatcherTimer();
dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
dispatcherTimer.Interval = new TimeSpan(0,0,1);
dispatcherTimer.Start();
C#
//
//  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.

C#
// 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

C#
<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

XML
<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

C#
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).

C#
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.

C#
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.

C#
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.

C#
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.

C#
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.

C#
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.

C#
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.

C#
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.

C#
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Revanth Ramesh
Technical Writer Cognizant Technology Solutions
India India
"Sweet Moments are like Stored Procedures.. It happens(compile) once but will make you feel happy(execute) every time you re(call) it."

Comments and Discussions

 
First Prev Next
QuestionNice!!! Pin
Mohammed Ibrahim.L20-Jul-15 8:08
professionalMohammed Ibrahim.L20-Jul-15 8:08 
AnswerRe: Nice!!! Pin
Revanth Ramesh21-Jul-15 11:21
professionalRevanth Ramesh21-Jul-15 11:21 
GeneralRe: Nice!!! Pin
Mohammed Ibrahim.L21-Jul-15 11:44
professionalMohammed Ibrahim.L21-Jul-15 11:44 
SuggestionMissing images Pin
Emre Ataseven20-Jul-15 4:10
professionalEmre Ataseven20-Jul-15 4:10 
QuestionScreenshot is really needed for widget/user control articles Pin
Claudio Nicora19-Jul-15 23:41
Claudio Nicora19-Jul-15 23:41 
First thing I look for in a widget/user control article is a screenshot to quickly have an idea of what I'm going to read.

Won't download and compile anything just to see if it feets my needs.

Please add one.
Visit my website for some interesting .NET free tools: http://coolsoft.altervista.org
QuestionNo screen shot found Pin
Tridip Bhattacharjee19-Jul-15 23:07
professionalTridip Bhattacharjee19-Jul-15 23:07 
QuestionScreenshot? Pin
Marc Clifton19-Jul-15 11:21
mvaMarc Clifton19-Jul-15 11:21 
Last Visit: 31-Dec-99 18:00     Last Update: 25-Apr-24 18:54Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 19 Jul 2015

Article Copyright 2015 by Revanth Ramesh
Everything else Copyright © CodeProject, 1999-2024

Web02 2.8:2024-04-02:1