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.
<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>
using System.Windows.Shapes;
using System.Windows.Threading;
namespace EstablishConn
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
}
}
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;
}
}
What did i do?
Well i used a canvas and ellipses within that. This did the job for me and below are the screen shotsHow 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 namespacesusing 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