This project is read-only.

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.

.

Last edited Dec 19, 2010 at 1:24 AM by andrewsyrov, version 14

Comments

No comments yet.