timeline Wiki & Documentation Rss Feed

Updated Wiki: Home

andrewsyrov — Sat, 19 May 2012 17:58:49 GMT

Anyone interested to join dev team for the project? Please send me a message.

Overview

With this Silverlight and WPF control you can create interactive timelines. The control is inspired by Simile Timeline Control (which is implemented with ajax). It is completely based on templates and styles, so it is possible to provide different style for events and timeline itself. Please suggest features and vote for the project if interested. You can use it directly from HTML (for those who are not working with Silverlight or WPF) or include it into your Silverlight/WPF projects.

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control.

Documentation

Brief documentation located here: http://timeline.codeplex.com/documentation

Examples

You can run live demo version from here:
http://asyrovprog.host22.com/news.php - example with some custom styles
http://asyrovprog.host22.com/ - simple example that uses default styles

Note: these samples provided from Source Code section sources.

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: Home

alexbelov — Fri, 16 Dec 2011 16:28:51 GMT

Anyone interested to join dev team for the project? Please send me a message.

Overview

With this Silverlight and WPF control you can create interactive timelines. The control is inspired by Simile Timeline Control (which is implemented with ajax). It is completely based on templates and styles, so it is possible to provide different style for events and timeline itself. Please suggest features and vote for the project if interested. You can use it directly from HTML (for those who is not working with Silverlight) or include it into your Silverlight/WPF projects.

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control.

Documentation

Brief documentation located here: http://timeline.codeplex.com/documentation

Examples

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: Home

alexbelov — Fri, 16 Dec 2011 16:28:40 GMT

Anyone interested to join dev team for the project? Please send me a message.

Overview

With this Silverlight and WPF control you can create interactive timelines. The control is inspired by Simile Timeline Control (which is implemented with ajax). It is completely based on templates and styles, so it is possible to provide different style for events and timeline itself. Please suggest features and vote for the project if interested. You can use it directly from HTML (for those who is not working with Silverlight) or include it into your Silverlight/WPF projects.

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control.

Documentation

Brief documentation located here: http://timeline.codeplex.com/documentation

Examples

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: Home

alexbelov — Fri, 16 Dec 2011 16:28:29 GMT

Anyone interested to join dev team for the project? Please send me a message.

Overview

With this Silverlight and WPF control you can create interactive timelines. The control is inspired by Simile Timeline Control (which is implemented with ajax). It is completely based on templates and styles, so it is possible to provide different style for events and timeline itself. Please suggest features and vote for the project if interested. You can use it directly from HTML (for those who is not working with Silverlight) or include it into your Silverlight/WPF projects.

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control.

Documentation

Brief documentation located here: http://timeline.codeplex.com/documentation

Examples

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: Home

andrewsyrov — Thu, 15 Sep 2011 00:33:10 GMT

Overview

With this Silverlight and WPF control you can create interactive timelines. The control is inspired by Simile Timeline Control (which is implemented with ajax). It is completely based on templates and styles, so it is possible to provide different style for events and timeline itself. Please suggest features and vote for the project if interested. You can use it directly from HTML (for those who is not working with Silverlight) or include it into your Silverlight/WPF projects.

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control.

Documentation

Brief documentation located here: http://timeline.codeplex.com/documentation

Examples

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: Home

andrewsyrov — Tue, 07 Jun 2011 18:29:21 GMT

Overview

See my other projects:

Silverlight PerspectivePanel, and other components: http://sldecor.codeplex.com
Silverlight timeline: http://timeline.codeplex.com
Xml Driven Silverlight Photo Album: http://myphotoalbum.codeplex.com

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control.

Documentation

Brief documentation located here: http://timeline.codeplex.com/documentation

Examples

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: Home

andrewsyrov — Wed, 25 May 2011 22:55:20 GMT

Overview

With this Silverlight and WPF control you can create interactive timelines. The control is inspired by Simile Timeline Control (which is implemented with ajax). It is completely based on templates and styles, so it is possible to provide different style for events and timeline itself. Please suggest features and vote for the project if interested. You can use it directly from HTML (for those who is not working with Silverlight) or include it into your Silverlight/WPF projects.

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control.

Documentation

Brief documentation located here: http://timeline.codeplex.com/documentation

Examples

See my other projects:

Silverlight PerspectivePanel, and other components: http://sldecor.codeplex.com
Silverlight timeline: http://timeline.codeplex.com
Xml Driven Silverlight Photo Album: http://myphotoalbum.codeplex.com

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: Home

andrewsyrov — Sun, 19 Dec 2010 07:29:20 GMT

Overview

With this Silverlight and WPF control you can create interactive timelines. The control is inspired by Simile Timeline Control (which is implemented with ajax). It is completely based on templates and styles, so it is possible to provide different style for events and timeline itself. Please suggest features and vote for the project if interested. You can use it directly from HTML (for those who is not working with Silverlight) or include it into your Silverlight/WPF projects.

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control.

Documentation

Brief documentation located here: http://timeline.codeplex.com/documentation

Examples

See my other projects:

Silverlight timeline: http://timeline.codeplex.com
Xml Driven Silverlight Photo Album: http://myphotoalbum.codeplex.com

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: Use the control from HTML

andrewsyrov — Sun, 19 Dec 2010 01:24:38 GMT

Use Silverlight Timeline from HTML

This document targets web developers who what to incorporate Silverlight Timeline into their web sites without digging into silverlight code by simply using html and javascript. The procedures requires several simple steps:

1. Upload timeline.xap to your web site.
2. Create Data xml file.
3. Create Web page which will show timeline.

1. Uploading timeline.xap to your site.

Go to Download page of this site http://timeline.codeplex.com and download latest timeline.xap file. This file should be copied to your web site folder.

2. Creating Data xml file.

Events shown by the control should be stored in xml file(s) with the following structure:

data - root element of the document. This element should consists of event elements with the following attributes:
- title - short title of the event. This is required attribute
- start - start date of the event in date time format (MM/DD/YYYY HH:MM:SS AM/PM) or just year (YYYY). Examples: "01/16/1997 12:00:00 AM", "1996". This is required attribute.
- end - end date of the event in date time format (MM/DD/YYYY HH:MM:SS AM/PM) or just year (YYYY). Note that if isDuration attribute is not set then this value is ignored. Examples: "01/16/1997 12:00:00 AM", "1996". This is an optional attribute
- isDuration - Specifies if event has duration from start to end. If false then only start date is used. Examples "true", "false". This is an optional attribute and false by default.
- image - url of image that will be displayed when the user clicks on "More..." dialog box. Optional.
- teaserimage - url of image that will be displayed on the timeline under bullet. Optional.
- "color" - spedifies color of the event bullet or line. Examples are "Red", "Blue", "Green", etc. This is an optional attribute. Default event bullet color can be specified from javascript as explained below.
- link - link to external site with more information about the event. For example: http://www.someurl.com/abouttheevent.html

Body of event element may contain optional description of the event.

Here is a partial example of data.xml:

<data>
  <event start="10/14/1840 12:00:00"
         title="Birth" color="Green" image="monet.png" link="http://en.wikipedia.org/wiki/Monet">
        Claude Monet, also known as Oscar-Claude Monet or Claude Oscar Monet
        was born to Adolphe and Louise-Justine Monet of 45 Rue Laffitte,
        in the 9th arrondissement of Paris.
  </event>
  <event start="06/01/1861"
         end="06/01/1863"
         isDuration="true"
         title="Joined Cavalry in Algeria">
    In June of 1861 Monet joined the First Regiment of African Light Cavalry
    in Algeria for two years of a seven-year commitment, but upon his
    contracting typhoid his aunt Madame Lecadre intervened to get him out
    of the army if he agreed to complete an art course at a university.
    It is also possible that the Dutch painter Johan Barthold Jongkind
    (whom Monet knew) may have prompted his aunt on this matter.
  </event>
</data>

3. Create Web page which will show timeline.

Copy Your site should have silverlight.js. This file will help the users of you site to install the silverlight. More information about silverlight.js can be found here http://code.msdn.microsoft.com/silverlightjs

<head>
    <script type="text/javascript" src="Silverlight.js"></script>
</head>

Add silverlight object to your page html. Most up to date example can be found in source code Timeline.aspx file.

<div id="timelineControlHost" style="width:100%;height:100%">
     <object id="timelineControl" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
        <param name="source" value="Timeline.xap"/>
        <param name="onError" value="onSilverlightError" />
        <param name="background" value="white" />
        <param name="minRuntimeVersion" value="3.0.40624.0" />
        <param name="onload" value="onSlLoad"/>
        <param name="autoUpgrade" value="true" />
        <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
             <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
        </a>
    </object>
    <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>

Now you need to implement onSlLoad javascript function which will initialize timeline control:

      <script type="text/javascript">
       function onSlLoad(sender, args) {
            sl = document.getElementById("timelineControl1");
            timeline = sl.Content.Instance;

            timeline.Urls = "/Monet.xml";
            timeline.CalendarType = "gregorian";
            timeline.MinDateTime = "01/01/1830";
            timeline.MaxDateTime = "01/01/1930";
            timeline.TeaserSize = 40;
            timeline.MoreLinkText = "more>>";
            timeline.CurrentDateTime = "01/01/1855";

            timeline.AddTimelineToolbox();
            timeline.AddTimelineBand(0, true, "years", 20, 130);
            timeline.AddTimelineBand(50, false, "decades", 20, 4);

            timeline.Run();
     }
    </script>

3.1. Timeline Control Properties

Property	Description	Example Values
Urls	';' delimited list of data xmls with events to show. You need to specify this parameter or timeline will appear blank.	http://mysite.com/monet.xml
CalendarType	Optional type of calendar. Can be one of the following values: "hebrew", "hijri", "japanese", "korean", "taiwan", "thaibuddhist", "umalqura", "gregorian"	"gregorian"
CultureID	Optional culture code (by default en-US). If datetimes are not in default this property should be set before any date specified. Codes can be found here	"sl-SI"
MinDateTime	Min date and time which will be visible to the user. You need to specify this date or DateTime.MinValue date will be used. The value should be specified in MM/DD/YYYY HH:MM:SS AM format or you can assign it to "today", "now", "yesterday", "tomorrow".	01/01/1860
MaxDateTime	Max date and time which will be visible to the user. You need to specify this date or DateTime.MaxValue date will be used. The value should be specified in MM/DD/YYYY HH:MM:SS AM format or you can assign it to "today", "now", "yesterday", "tomorrow".	01/01/1860
CurrentDateTime	Date and time which will be visible to the user. You need to specify this date or today date will be used. The value should be specified in MM/DD/YYYY HH:MM:SS AM format or you can assign it to "today", "now", "yesterday", "tomorrow". This date is initially placed in middle of timeline.	01/01/1860
MoreLinkText	Optional, "More..." by default. Link text for case when description is more than TeaserSize	"More..."
TeaserSize	Optional. Number of teaser characters. 80 by default.	50

3.2. Timeline Control Methods

Method	Parameters	Description	Example Value

AddTimelineBand		Add new timeline band to timeline control. You can have more then one timeline band: one main band which will display events as bullets/lines with titles and teaser. Main band usually have most height and least column timespan. You can also have several secondary timeline bands. For instance to display main timeline band may display days and 2 secondary timeline bands may display months and years.
	height	Height of timeline band in pixels. Usually main timeline band has most height. This parameter may be 0 in case if you need this band to take the rest of remaining height of control, which makes sence for main band.	400
	isMain	Specifies if this timeline band is main or secondary. Only one timeline band can be main. You may have 0 or more secondary timeline bands	true
	scaleType	Timeline band scale type which may be "minutes", "minutes10", "hours", "days", "years" or "decades".	"years"
	colCount	Number of columns for timeline band. For example if for "months" band you what the whole year to be visible you will specify 12	12

Run		After initialization is finished and all bands are specified you should call this method to display all timebands and events. This method does not have parameters

ClearEvents		Removes all events from all timeline bands.

ResetEvents		Shows passed events.
	xml	XML content with events. This is the same file format as described above	"<data><event start=...."

Updated Wiki: Use the control from Silverlight

andrewsyrov — Sun, 19 Dec 2010 01:24:17 GMT

Use the Control from Silverlight

Overview

Starting point to use Silverlight Timeline in your silverlight project is SilverlightClient folder in Source Code. Usage of the control from silverlight includes the following steps:

Placing TimelineTray with TimelineBand elements to your UserControl
Specifying required parameters like data urls and control sizes
Optionally specifying different style for TimelineBand

Below is the description for these steps in more details.

Placing TimelineTray at your UserControl

Add reference to TimelineLibrary in your silverlight project. Your UserControl should have reference to TimelineLibrary, for example:

<UserControl
   ...
   xmlns:timeline="clr-namespace:TimelineLibrary;assembly=TimelineLibrary"
   ...
   >

Next step is to add TimelineTray control with included in it TimelineBand controls.

       <timeline:TimelineTray
            x:Name="timeline"
            Height="880"
            Grid.Row="0"
            CalendarType="gregorian"
            HorizontalAlignment="Stretch"
            MinDateTime="01/01/1830"
            MaxDateTime="01/01/1930"
            InitialDateTime="11/01/1855">
            
            <Grid.RowDefinitions>
                
                <RowDefinition
                    Height="*" />

                <RowDefinition
                    Height="80" />

            </Grid.RowDefinitions>

            <timeline:TimelineTray.Urls>
                <timeline:UriInfo
                    Url="http://localhost:4444/Monet.xml" />
            </timeline:TimelineTray.Urls>

            <timeline:TimelineBand
                Grid.Row="0"
                IsMainBand="True"
                ItemSourceType="years"
                HorizontalAlignment="Stretch"
                TimelineWindowSize="20"
                MaxEventHeight="130" />

            <timeline:TimelineBand
                Grid.Row="1"
                Height="80"
                HorizontalAlignment="Stretch"
                ItemSourceType="decades"
                TimelineWindowSize="16"
                MaxEventHeight="4" />

        </timeline:TimelineTray>

TimelineTray is root element of your timeline and is inherited from grid. You may have from 1 to N inner TimelineBands elements. At least one of your TimelineBands should be marked as IsMainBand equals to True. For more descriptions on other properties of TimelineBand and TimelineTray please see Use the Control from HTML section of the documentation.

You can specify data source in 3 ways:
- Using TimelineTray.Urls element from XAML
- Using TimelineTray.ResetEvent method passing xml to it
- Using TimelineTray.ResetEvent method passing list of TimelineEvent objects

The control has many other properties and events which allow high degree of control customization. I'd recommend you investigate source code and examples for more details on them.

.

Updated Wiki: Some notes on solution structure

andrewsyrov — Sun, 19 Dec 2010 01:23:14 GMT

Some Notes on Solution Structure

The solution divided into 3 folders for HTML, Silverlight and WPF developers. Each of these folders has Examples sub folder with at least one example on how to use the control. If you are using the control from WPF, I'd recommend you take a look at Silverlight examples also, as they are very similar.

I've received many requests for advanced features like event resizing, edit mode (when you can add or change properties of events), vertical scroll bar, and so on. Instead of adding these features to Timeline control itself I created TimelineEx control (which inherits from Timeline control). TimelineEx is a good starting point for Silverlight and WPF developers to implement their own timeline controls with advanced features.

For example of style customization, please take a look at \Silerlight\Examples\SilverlightNews.Web

.

Updated Wiki: Developer Documentation

andrewsyrov — Sun, 19 Dec 2010 01:21:27 GMT

Developer Documentation

No developer documentation. Please read the code, write you applications with this library. If you become familiar with the control, resolved bugs or want to contribute new features, please send me a message.

Coding conventions and guidelines can be found here: Coding Conventions and then further in MSDN here: http://msdn.microsoft.com/en-us/library/czefa0ke%28VS.71%29.aspx

.

Updated Wiki: Some notes on solution structure

andrewsyrov — Sun, 19 Dec 2010 01:10:49 GMT

Some Notes on Solution Structure

The solution divided into 3 folders for HTML, Silverlight and WPF developers. Each of these folders has Examples sub folder with at least one example on how to use the control. If you are using the control from WPF I'd recommend you take a look at Silverlight examples also as they are very similar.

I've received many requests for advanced features like event resizing, edit mode (when you can add or change properties of events, and so on). Instead of adding these features to Timeline control itself I created TimelineEx control (which inherits from Timeline control). TimelineEx is a good starting point for Silverlight and WPF developers to implement their own timeline controls with advanced features.

For example of style customization, please take a look at \Silerlight\Examples\SilverlightNews.Web

.

Updated Wiki: Developer Documentation

andrewsyrov — Sun, 19 Dec 2010 01:09:07 GMT

Developer Documentation

No developer documentation. Please read the code, write you applications with this library. If you become familiar with the resolved bugs or want to contribute new features, please send me a message.

Coding conventions and guidelines can be found here: Coding Conventions and then further in MSDN here: http://msdn.microsoft.com/en-us/library/czefa0ke%28VS.71%29.aspx

.

Updated Wiki: Developer Documentation

andrewsyrov — Sun, 19 Dec 2010 01:08:49 GMT

Developer Documentation

No developer documentation. Please read the code, write you applications with this library. If you become familiar with the resolved bugs or want to contribute new features, please send me a message.

Coding Convertions and Guidelines can be found here: Coding Conventions and then further in MSDN here: http://msdn.microsoft.com/en-us/library/czefa0ke%28VS.71%29.aspx

.

Updated Wiki: Home

andrewsyrov — Sun, 19 Dec 2010 01:07:19 GMT

Overview

With this Silverlight and WPF control you can create interactive timelines. The control is inspired by Simile Timeline Control (which is implemented with ajax). It is completely based on templates and styles, so it is possible to provide different style for events and timeline itself. Please suggest features and vote for the project if interested. You can use it directly from HTML (for those who is not working with Silverlight) or include it into your Silverlight/WPF projects.

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control. Still, you can support development by donations. Well, do not know why I'm writing this, for 2 years no one donated a penny, but you can be the first ;-)

Documentation

Brief documentation located here: http://timeline.codeplex.com/documentation

Examples

See my other projects:

Silverlight timeline: http://timeline.codeplex.com
Xml Driven Silverlight Photo Album: http://myphotoalbum.codeplex.com

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: Home

andrewsyrov — Sun, 19 Dec 2010 01:05:51 GMT

Overview

With this Silverlight and WPF control you can create interactive timelines. The control is inspired by Simile Timeline Control (which is implemented with ajax). It is completely based on templates and styles, so it is possible to provide different style for events and timeline itself. Please suggest features and vote for the project if interested. You can use it directly from HTML (for those who is not working with Silverlight) or include it into your Silverlight/WPF projects.

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control. Still, you can support development by donations. Well, do not know why I'm writing this, for 2 years no one donated a penny, but you can be the first ;-)

Documentation

User and developer documentation located here: http://timeline.codeplex.com/documentation

Examples

See my other projects:

Silverlight timeline: http://timeline.codeplex.com
Xml Driven Silverlight Photo Album: http://myphotoalbum.codeplex.com

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: Home

andrewsyrov — Sun, 19 Dec 2010 01:03:26 GMT

Overview

With this Silverlight and WPF control you can create interactive timelines. The control is inspired by Simile Timeline Control (which is implemented with ajax). It is completely based on templates and styles, so it is possible to provide different style for events and timeline itself. Please suggest features and vote for the project if interested. You can use it directly from HTML (for those who is not working with Silverlight) or include it into your Silverlight/WPF projects.

The control is developed under very friendly BSD license. If you do not know what this means, it's that the library or source code can be used, reused and sold as part of your commercial project without need to change your code license or pay for the control. Still, you can support development by donations (Do not know why I'm writing this, for 2 years no one donated a penny :) ):

Documentation

User and developer documentation located here: http://timeline.codeplex.com/documentation

Examples

See my other projects:

Silverlight timeline: http://timeline.codeplex.com
Xml Driven Silverlight Photo Album: http://myphotoalbum.codeplex.com

Contact Me

If you interested in custom development based on the control please contact me at LinkedIn or send me e-mail at asyrovprog at live.com

.

Updated Wiki: User Documentation

andrewsyrov — Sun, 19 Dec 2010 00:55:27 GMT

User Documentation

You can reuse the Silverlight Timeline Control in three ways: from another Silverlight, WPF control or directly from HTML. Depending on the mode selected you will specify timeline bands setting, data xml url(s) and other parameters either in javascript or in XAML. Below are the descriptions for all of these cases:

Some Notes on Solution Structure (important)

Use the Control from HTML
Use the Control from Silverlight
Use the Control from WPF

Documentation may be not in sync with latest Source Code since the project is in beta state. Suggestions for new features and bug reports are welcome in Issue Tracker section.

Updated Wiki: Some notes on solution structure

andrewsyrov — Sun, 19 Dec 2010 00:54:59 GMT

Some Notes on Solution Structure

The solution divided into 3 founder for HTML, Silverlight and WPF developers. Each of these folders has Examples sub folder with at least one example on how to use the control. If you are using the control from WPF I'd recommend you take a look at Silverlight examples also as they are very similar.

I've received many requests for advanced features like event resizing, edit mode (when you can add or change properties of events, and so on). Instead of adding these features to Timeline control itself I created TimelineEx control (which inherits from Timeline control). TimelineEx is a good starting point for Silverlight and WPF developers to implement their own timeline controls with advanced features.

For example of style customization, please take a look at \Silerlight\Examples\SilverlightNews.Web

.