"Connecting ... " screen for C# and WPF

Recently i came across a situation where i had to create a screen which showed a establishing connection , i searched the "interweb" for this but found no good resource that provided me with the code ready to use. hence i decided to create one by my own.


What did i do? 

Well i used a canvas and ellipses within that. This  did the job for me and below are the screen shots





How to do it? 

I have provided inline comments with the code below,

The XAML code is below 


<Window x:Class="EstablishConn.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowState="Normal" WindowStyle="ToolWindow"
        Title="Connecting ..." Height="125" Width="525">
    <Grid>
        <Canvas Name="MyCanvas"> </Canvas>
    </Grid>
</Window>



Your code Behind will be as below

You will have to include the below namespaces


using System.Windows.Shapes;
using System.Windows.Threading;

namespace EstablishConn
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
    }
}

The Main Logic 

/*
Global declaration
*/
int ELLIPSE_COUNT = 25;
int CURRENT_ELLIPSE_ID = 0;
private List<Ellipse> ellipseList;
Brush DEFAULT_ELLIPSE_COLOR = Brushes.LightSteelBlue;
Brush ELLIPSE_COLOR = Brushes.Blue;
Brush LIGHT_ELLIPSE_COLOR = Brushes.SkyBlue;
Brush DARK_ELLIPSE_COLOR = Brushes.DarkBlue;

/*
The dispatch timer object will be a timer that will raise a tick event every specified interval given in timespan
*/
DispatcherTimer timer = new DispatcherTimer { Interval =   TimeSpan.FromSeconds(0.05) };

/*
Constructor
*/
public MainWindow()
{
   InitializeComponent();
   ellipseList = new List<Ellipse>();
   CreateEllipseList();
   /*
   assign an handler for the DispatchTimer
   then start the timer
   */
   this.timer.Tick += new EventHandler(timer_Tick);
   this.timer.Start();
}


/*
this method will create the Ellipse s and allocate it to the 
Canvas
The created ellipses will also be added to a list to be    handled later
*/
private void CreateEllipseList()
{
   double LEFT = 10;
   for (int i = 0; i < ELLIPSE_COUNT; i++)
   {
       Ellipse e = new Ellipse();
       e.Height = 10;
       e.Width = 10;
       e.Fill = DEFAULT_ELLIPSE_COLOR;
       Canvas.SetLeft(e, LEFT);
       Canvas.SetTop(e, 50);
       MyCanvas.Children.Add(e);
       ellipseList.Add(e);
       LEFT = LEFT + 20;
   }
}

/*
This is the event handler for the timer 
Here the actual animation takes place
*/
private void timer_Tick(object sender, EventArgs e)
{
   ellipseList[CURRENT_ELLIPSE_ID].Fill = LIGHT_ELLIPSE_COLOR;
   ellipseList[CURRENT_ELLIPSE_ID + 1].Fill = ELLIPSE_COLOR;
   if (!(CURRENT_ELLIPSE_ID >= ELLIPSE_COUNT - 2))
      ellipseList[CURRENT_ELLIPSE_ID + 2].Fill = DARK_ELLIPSE_COLOR;

   if (CURRENT_ELLIPSE_ID > 0)
      ellipseList[CURRENT_ELLIPSE_ID - 1].Fill = DEFAULT_ELLIPSE_COLOR;

   CURRENT_ELLIPSE_ID = CURRENT_ELLIPSE_ID + 1;
   if (CURRENT_ELLIPSE_ID >= ELLIPSE_COUNT - 2)
   {
      ellipseList[CURRENT_ELLIPSE_ID - 1].Fill    = DEFAULT_ELLIPSE_COLOR;
      ellipseList[CURRENT_ELLIPSE_ID].Fill        = DEFAULT_ELLIPSE_COLOR;
      ellipseList[CURRENT_ELLIPSE_ID + 1].Fill    = DEFAULT_ELLIPSE_COLOR;

      CURRENT_ELLIPSE_ID = 0;
   }
}

No comments:

Post a Comment