The Road Map

• Create new project and add DataGrid and Button controls
• Create public struct for DataGrid
• Add Click event to Button to add Columns
• Add Data to DataGrid with another button

The new Project

Creating new project is just like creating new Microsoft Word document. Load Visual Studio (in this tutorial: Visual Studio 2010). Go to File>New>Project (CTRL+SHIFT+N). Next choose a new WPF application project, name it DataGridDemo for future reference.

Create new WPF project

Once you are welcomed to WPF workspace, import DataGrid and two Buttons from the Toolbox at the left. Give it name and other properties. I named DataGrid as myGrid and two Buttons  as createColumn and addData respectively.

Add Buttons and DataGrid

Create public struct

The struct will define the pattern of the data to be stored in the DataGrid along with this it will also hold the data which is going to be added to the DataGrid.

In code screen, add a new public struct with name myData. Inside it create new public data types for your DataGrid.

public struct myData
        {
            public string Product { set; get; }
            public string Price { set; get; }
        }

Add public variables according to your need and column size.

Add Columns

Double click on Create Column button. Within the click event method, create new DataGridTextColumn object for each column and bind it with specific name.

//creates new Text Column
DataGridTextColumn myProduct = new DataGridTextColumn();
myProduct.Binding = new Binding("Product");
// add header
myProduct.Header = "Products";
//Finally add the column to the DataGrid
myGrid.Columns.Add(myProduct);

And here is the final code for all Product and Price column

 //Create new object of DatagridTextColumn for Product column
            DataGridTextColumn myProduct = new DataGridTextColumn();
            myProduct.Binding = new Binding("Product");

            // for Price column
            DataGridTextColumn myPrice = new DataGridTextColumn();
            myPrice.Binding = new Binding("Price");

            // add headers
            myProduct.Header = "Products";
            myPrice.Header = "Price";

            // add to dataGrid
            myGrid.Columns.Add(myProduct);
            myGrid.Columns.Add(myPrice);

If you are so eager for the result then hit on F5.

New Columns in DataGrid

Add Data to DataGrid

Now double click on Add Data button. Add new object of  myData to myGrid.

myGrid.Items.Add(new myData() { Product = "Samsung Mobile", Price = "200" });

Here is the final output.

Adding data to DataGrid

For automated data addition you can simple execute all of these in one function. Use column count to check the existance of the column in DataGrid. Here is a prototype:

public void addData(string product, string price) {

if (myGrid.Columns.Count<1) {

//Add columns programatically}

}

// Add Data To data grid

}

Also if you want to add data to the grid from database you can use the above addData function.

Here is a working demo to download.

Next you may want to get data/value from each cells in a selected row/cell. Subscribe us for next version of this article, it’s free.

Google Swiffy

With Google’s free online utility codenamed Swiffy,  you can convert your SWF flash content to HTML5 instantly. The swiffy conversion supports following features:

• Drop shadow, blur and glow filters for browsers with SVG filter support.
• ANSI and Shift JIS encoding.
• Bevel and Adjust Color filters.
• Handling of dynamic text fields with the same variable name
• Shape tweening.
• SWF 6 function definitions.

Click here for the demo of Google Swiffy

Adobe labs Wallaby

Yeah! in this tutorial you’ll learn how to create a RSS icon using only one HTML element, i.e. anchor tag (<a>).

The code plan

1. Create an anchor tag and shape it to orange box
2. Add dot and RSS curves
3. Done!

Creating the anchor tag

Let’s create a new anchor tag with class name #rss.

<a class='rss' href='#'></a>

We’ll be applying varying css properties only to this anchor tag to create a cool RSS icon. Since an anchor tag is an inline element we’ll need to make it a block element then size it to 60X60px. Add some background color and give the relative position property to it. Additionally you can add gardient effect, rounded corner and shadows to give it a cool look.

.rss {
	display: block;
	position: relative;
	width: 60px;
	height: 60px;
	padding: 0 2px;
	border-color: #ea6635;
	text-transform: lowercase;
	text-indent: -186px;
	font-size: 64px;
	font-weight: bold;
	color: #fff;
	background: #e36443;
	/* Shadow Effect */

	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
	box-shadow: 0 0 4px rgba(0,0,0,0.4);

	/* Gradient Effect */

	background: -webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
	background: -webkit-linear-gradient(top, #f19242, #e36443);
	background: -moz-linear-gradient(top, #f19242, #e36443);
	background: -o-linear-gradient(top, #f19242, #e36443);
	background: -ms-linear-gradient(top, #f19242, #e36443);
	background: linear-gradient(top, #f19242, #e36443);

	/* Border Radius Effect*/

	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Here is the output:

RSS icon box using CSS3

Add the RSS logo

We’ll use :before and :after pseudo codes to implement the RSS logo over the orange box. First we’ll give absolute position to these pseudo codes, add blank content and position it 7px away from bottom and left.

.rss:before, .rss:after {
	content: "";
	position: absolute;
	bottom: 7px;
	left: 7px;
}

Next thing to do is add a dot and curves to them. First we’ll add a dot to .rss:before.

.rss:before {
   width:12px;
   height:12px;
   background:#fff;
   /* Border radius equal to width and height */
   -moz-border-radius:12px;
   -webkit-border-radius:12px;
   border-radius:12px;

}

;

The output is this:

CSS3 RSS icon dot

Next last step to is to create two curves, we’ll do it with the help of double border to .rss:after.

.rss:after {
	width: 22px;
	height: 22px;
	border-style: double;
	border-width: 24px 24px 0 0;
	border-color: #fff;

	/* Border-Radius */
	-webkit-border-radius: 0 50px 0 0;
	-khtml-border-radius: 0 50px 0 0;
	-moz-border-radius: 0 50px 0 0;
	border-radius: 0 50px 0 0;
}

You won’t beleive your eyes that you created such a beautiful RSS icon using only CSS. Here is the final output:

Final show

Click here for a working demo.

Currently, this is not supported in Internet Explorer. You can use PIE.htc or other similar tweaks to create curved border and gradient effect.

Note:This is just an experimental tutorial, the output might not be good for practical use.

Circle Bar

This 16X16 preloader icon is calm and peaceful but aggressively attractive. It works well in any type of background colors, even the dark one.

Facebook Loader

Everyone is familiar with preloader in Facebook. This horizontal bar preloader with 16X11 dimension will make your visitor feel happy to wait. It’s boxy blocks perfectly blends to any background color.

Tail Chaser

Yet another simple gradient circle that keeps chasing it’s tail. This loader is widely being used in many web and mobile apps. Visitor will definitely love to wait with these 20X20 loader.

Fading Bars

May be you want something larger but simple yet. This 160X24 horizontal loader with 8 fading boxes is as good as others.

Dotted Circle

Another 32X32 simple preloader which proves to fit in any type of webpage. It’s larger in size and more visible and attractive.

Here is a demo for these preloaders. You can download all of these loader from here. Besides these loaders you can generate large number of similar loaders in ajaxload.info.

The code plan

1. Create Red ‘M’ shape of Gmail logo
2. Create Envelope shape over it
3. Add glossy effect to it
4. Done!

First Step – The Red M:

We will need 3 DIV HTML elements to get this job done. But at first, we’ll begin with a single DIV giving some unique identity to it. In this tutorial I’ve uniquely identified it as a “letter”;

<div id="letter"></div>

CSS3 has a very handy pesoudo code that allows you to do three things from a single element. We’ll be using :before and :after pseudo classes to create a M shape. Create a solid border with transparent bottom and rest of the sides red with 110px width, set height and width of the div to 0. This will create diagonal element.

#letter {
	width:0;
	height:0;
	border-width:110px;
	border-style:solid;
	border-color:red red transparent red;
}

Till now we’ve created this:

Next we’ll be using two pseudo classes for “letter” :before and :after. But before moving towards them set the position of #letter to relative. The next content created from :before and :after will be floating over it.

#letter {
	width:0;
	height:0;
	border-width:110px;
	border-style:solid;
	border-color:red red transparent red;
	position:relative;
}

We’ll use the same technique of border to create white triangle which will overlap the upper red and hence give the following shape:

Overlapping the upper red border

Create a CSS style for #letter with :before pseudocode. By default this pseudo element will be an inline, set it as block element with 0 height and width. Add property of solid border with white color at the top and rest of the sides transparent. Next we’ll have to float it over the red shape. Give it absolute positioning and some negative co-ordinates (for 110px red border I’ve given -70px left position and -120px top position) so that it will overlap the red border giving the shape as in above image.

Don’t forget to add content property with blank content it is necessary to make the existance of this pseudo code.

#letter:before {
	content:"";
	display:block;
	position:absolute;
	left:-70px;
	top:-120px;
	width:0;
	height:0;
	border-width:70px;
	border-style:solid;
	border-color:white transparent transparent transparent;
}

The last step and you’ll be creating a big red M shape. To #letter:after give similar property as for #letter:before only the difference would be left and right side white and top bottom as transparent color and co-ordinates of absolute positioning.

#letter:after {
	content:"";
	color:#fff;
	display:block;
	position:absolute;
	left:-70px;
	top:-70px;
	z-index:999;
	width:0;
	height:0;
	border-width:70px;
	border-style	:solid;
	border-color:transparent white transparent white;
	}

The above code will render following output:

The final M

Yooohooo! Succesfully created a M shape. Are you excited? Read the next steps.

Second Step – Opening an Envelope!

Generally, letter is kept inside an envelope and that is what we are going to do here. Put the letter inside an envelope. Scracthing your head? Here’s the code:

<div id="envelope">
	<div id="letter"></div>
</div>

So the letter is inside an envelope now let’s write something for the envelope now.

The letter M was created with the border width of 110px, the left and right border will make it’s width to 220px. Therefore we’ll need to style the #envelope with the width of 220px and the height of 170px with overflow hidden that will hide the sharp edges at the bottom of the “M”. Also we’ll give the top and bottom border to outline the envelope.

#envelope {
	height:170px;
	width:220px;
	position:relative;
	overflow:hidden;
	border-top:#ccc solid 4px;
	border-bottom:#ccc solid 4px;
}

Here is the output till now:

Re-finishing and envelope border

Now we’ll need a diagonal line to create the foldings of the envelope. Here again, the pseudo codes :before and :after is hero.

Style #envelope:before with grey background and inherit the height and width from the parent (#envelope) and don’t forget absolute positioning.

#envelope:before {
	content: "";
	position:absolute;
	top:0;
	left:0;
	height:inherit;
	width:inherit;
	background:#ccc;
}

We are up to here:

Preparing for the envelope corners

In the end of this step we’ll overlap the gray background with white triangle. Set the solid border with white bottom and transparent rest and width of about 52px. Arrange the absolute position to 1px bottom and 58px left.

#envelope:after {
	content:"";
	position:absolute;
	bottom:1px;
	left:58px;
	border-color:transparent transparent white transparent;
	border-style:solid;
	border-width:52px;
}

This ends the third part.

Third Step – Make it shiny!

Create a child DIV of #envelope next to #letter, identify it as #shine.

<div id="envelope">
	<div id="letter"></div>
	<div id="shine"></div>
</div>

Create a gradient and set opacity as per your needs. Hint: use http://gradients.glrzad.com/ to create your own desired gradient color. For instance here is my choice with opacity 0.35 and absolute positioning of 0 to both top and left.

#shine {
	background-image: linear-gradient(left top, #8F8F8F 3%, #FFFFFF 34%);
	background-image: -o-linear-gradient(left top, #8F8F8F 3%, #FFFFFF 34%);
	background-image: -moz-linear-gradient(left top, #8F8F8F 3%, #FFFFFF 34%);
	background-image: -webkit-linear-gradient(left top, #8F8F8F 3%, #FFFFFF 34%);
	background-image: -ms-linear-gradient(left top, #8F8F8F 3%, #FFFFFF 34%);
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0.03, #8F8F8F),
		color-stop(0.34, #FFFFFF)
	);
	height:170px;
	width:220px;
	opacity:0.35;
	position:absolute;
	top:0;
	left:0;
}

And this is the end of third, final step. Your final logo made from CSS3 will look like this:

The final show down

Click here for the live demo (doesn’t works in IE). Click here to download the source code.

Note: This is just an experimental tutorial, the output might not be useful in practical use.

First we will be doing HTML part. This includes the skeletal mockup of the slideshow. It is very simple just unordered list inside a div tag will do this. Here is the sample code:

<div class="slideshow">
  <ul>
    <li><img src="slide1.jpg" /></li>
    <li><img src="slide2.jpg" /></li>
    <li><img src="slide3.jpg" /></li>
    <li><img src="slide4.jpg" /></li>
    <li><img src="slide5.jpg" /></li>
  </ul>
</div>

Now to give the skeletal some real shape we’ll add some CSS to them. Here is a sample code for CSS:

/* initialize the size of box and hide the overflow */
.slideshow {
	height:200px;
	width:350px;
	overflow:hidden;
	margin:0 auto;
}

/* Clear margin/padding, list-style and set position to relative */
.slideshow ul {
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	}

/* Set the position absolute, and top/left 0 */
.slideshow ul li {
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left;0;
	}
/* style for image */
.slideshow ul li img {
	height:200px;
	width:350px;
	border:none;
	margin:0;
	-web-kit-box-shadow:none;
	background:none;
	padding:0;
	}

Modify the CSS style as per your needs, but remember you don’t hurt the crucial part. Once you are satisfied with your design.

//Set x as 2 by default, it defines next slide after the first one
var x = 2;
// function to switch the images.
function slideSwitch() {
	      var m = 5;
		   x += 1;
		  if (x > m) {
		  	x = 1
			}

   $(".slideshow ul li:nth-child(n)").animate({opacity:0});
   $(".slideshow ul li:nth-child(" + (x) + ")").animate({opacity:1});
}

$(document).ready(function() {
      setInterval( "slideSwitch()", 5000 );
});

Add the jQuery file to the head of your web document.

<script src='http://code.jquery.com/jquery-1.6.4.min.js' type='text/javascript'></script>

And this will be the end of the tutorial, test it in your browser.