现在位置首页 / 项目实战 /正文

Wpf控件-时间轴TimeLine的介绍和使用步骤

作者: IT小兵 | 2014年8月23日| 热度:℃ | 评论: |参与:

最近的项目是wpf的,有个功能需要支持数据的时间轴展示。类似的需求有点像Jquery时间轴:Timeline。通过google和百度的不懈搜索努力,终于找到wpf版本的Timeline控件。今天分享一下wpf时间轴的功能介绍及使用步骤。

先看效果图:

是不是和jquery的timeline很像?其实就是一个。哈哈

完整代码百度网盘下载:链接:http://pan.baidu.com/s/1c0lHotU   密码:mbsm 

1、项目介绍

该项目支持Silverlight和Wpf。演示项目包括html和wpf的。

主要功能有:

  • 1、支持自定义时间类型:年月日时分秒。可以通过后台动态加载时间类型;

  • 2、支持多种事件:点击、双击、放大和缩小时间轴。同时支持触摸屏操作,多点触摸操作。

  • 3、支持双击时间线,创建新的时间点;

  • 4、Silverlight支持全屏浏览;

  • 5、支持拖拽时间点,可以用在展示时间轴的同时,进行时间的修改。

  • 6、支持图片展示和视频展示,支持该时间点的详情展示


2、以Wpf为例子,说明使用步骤

真实例子效果图:

1) 在引用中引用:TimelineLib.dll和TimelineExLib.dll.

2) 在xaml文件中定义timeline控件:

<!--
 * Copyright (c) 2010, Andriy Syrov
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without modification, are permitted provided 
 * that the following conditions are met:
 * 
 * Redistributions of source code must retain the above copyright notice, this list of conditions and the 
 * following disclaimer.
 * 
 * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and 
 * the following disclaimer in the documentation and/or other materials provided with the distribution.
 *
 * Neither the name of Andriy Syrov nor the names of his contributors may be used to endorse or promote 
 * products derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED 
 * WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A 
 * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY 
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED 
 * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 
 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 
 * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN 
 * IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 
 *   
 -->
<Window
    x:Class="WpfTimelineExExample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:timeline="clr-namespace:TimelineLibrary;assembly=TimelineLibrary"
    xmlns:local="clr-namespace:TimelineEx;assembly=TimelineExLib"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <Grid
        x:Name="LayoutRoot"
        Background="White">
        <Grid
            Background="White"
            VerticalAlignment="Stretch"
            HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition
                    Height="Auto"></RowDefinition>
                <RowDefinition
                    Height="Auto"></RowDefinition>
                <RowDefinition
                    Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock
                VerticalAlignment="Center"
                Margin="4 0 0 0"
                Grid.Row="0"
                FontSize="9"
                FontStyle="Italic"
                Foreground="DarkGreen"
                TextWrapping="Wrap"
                Text="Here you can move events (by dragging them to other position), change event size or duration by dragging small rectangles 
in top/left and bottom/right event corners. If you hit [Reload Data From XML] events restored in original state. if you then move,
or resize or change duration of events and then hit [Save Events] -> [Clear Events] -> [Restore Saved Events] you will notice 
that the system remembers your changes to timeline events.">
            </TextBlock>
            <StackPanel
                Margin="4"
                Grid.Row="1"
                Orientation="Horizontal">
                <CheckBox
                    VerticalAlignment="Center"
                    Margin="4 0 0 0"
                    Click="EditModeClick"
                    IsChecked="True"
                    Content="Edit Mode"></CheckBox>
                <CheckBox
                    VerticalAlignment="Center"
                    Margin="4 0 0 0"
                    Click="AllowChangeDatesClick"
                    IsChecked="False"
                    Content="Allow Change Dates"></CheckBox>
                <Button
                    VerticalAlignment="Center"
                    Margin="4 0 0 0"
                    Click="OnReloadClick"
                    Content="Reload Data From XML"></Button>
                <Button
                    VerticalAlignment="Center"
                    Click="OnSaveClick"
                    Margin="4 0 0 0"
                    Content="Save Events"></Button>
                <Button
                    VerticalAlignment="Center"
                    Margin="4 0 0 0"
                    Click="OnClearClick"
                    Content="Clear Events"></Button>
                <Button
                    VerticalAlignment="Center"
                    Margin="4 0 0 0"
                    Click="OnLoadSavedEventsClick"
                    Content="Restore Saved Events"></Button>
                <Button
                    VerticalAlignment="Center"
                    Margin="20 0 0 0"
                    Click="OnAddNewEventClick"
                    Content="Add New Event"></Button>
            </StackPanel>
            <local:TimelineTrayEx
                x:Name="timeline"
                Grid.Row="2"
                EditMode="True"
                CalendarType="gregorian"
                HorizontalAlignment="Stretch"
                MinDateTime="01/01/1830"
                RecalculateEventTopPosition="False"
                MaxDateTime="01/01/1930"
                CurrentDateTime="11/01/1855">
                <Grid.RowDefinitions>
                    <RowDefinition
                        Height="Auto" />
                    <RowDefinition
                        Height="*" />
                    <RowDefinition
                        Height="50" />
                </Grid.RowDefinitions>
                <timeline:TimelineToolbox
                    Grid.Column="0"
                    Grid.ColumnSpan="2"
                    Grid.Row="0"></timeline:TimelineToolbox>
                <local:TimelineBandEx
                    Grid.Row="1"
                    Grid.Column="0"
                    Grid.ColumnSpan="2"
                    IsMainBand="True"
                    ItemSourceType="years"
                    HorizontalAlignment="Stretch"
                    TimelineWindowSize="20"
                    MaxEventHeight="250" />
                <local:TimelineBandEx
                    Grid.Row="2"
                    Grid.ColumnSpan="2"
                    Grid.Column="0"
                    HorizontalAlignment="Stretch"
                    ItemSourceType="decades"
                    TimelineWindowSize="16"
                    MaxEventHeight="4" />
            </local:TimelineTrayEx>
        </Grid>
    </Grid>
</Window>

这个代码较长。其实关键的代码就是timeline:TimelineToolbox、local:TimelineBandEx、local:TimelineBandEx3个控件。分别代表的意思是:

工具栏:用来放大缩小和向前向后的按钮等工具。

local:TimelineBandEx:时间轴展示主窗体,展示每个时间线的数据; 支持一个属性:   IsMainBand="True"。设置成true就标示时间轴的信息在这个版块出现。

后台复制:这个例子采用了xml文件加载时间点的方式:   ResetEvents(XDocument.Parse(xml));

我们来看一下xml节点数据:

<data
    wiki-url="http://simile.mit.edu/shelf/"
    wiki-section="Simile Monet Timeline">
    <!-- Source:
        http://en.wikipedia.org/wiki/Monet
        http://www.accents-n-art.com/artists/claude-monet-biography.html
    -->
    <event video="http://localhost:4545/Wildlife.wmv"
           start="Nov 14 1840 00:00:00 GMT"
           title="Birth"
           color="Green"
           rowOverride="5"
           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.
        He was christened as Oscar-Claude at the church of
        Notre-Dame-de-Lorette. His father wanted him to go into the family
        (grocery store) business, but Claude Monet wanted to become an artist.
        His mother was a singer, both parents were second-generation Parisians.
    </event>
    </data>

data是根节点,没啥用。包含的event是每个时间点的数据承载者。从数据结构上可以知道支持的数据格式有:图片、视频、缩略图、文字,支持开始时间和结束时间段等等。这个数据是例子使用的,等下一篇我们将学习一下,怎么自定义自己的数据给时间轴赋值。

其实读取了xml数据之后,时间轴对每个xml数据,做了与时间轴node的对应关系映射:

 private List<TimelineEvent> LoadEventDocument(
            XDocument                                   doc
        )
        {
            List<TimelineEvent>                         timelineEvents;
            timelineEvents = new List<TimelineEvent>();
            Debug.Assert(doc != null);
            Utilities.Trace(this);
            foreach (XElement el in doc.Descendants("data").Descendants("event"))
            {
                timelineEvents.Add(ReadEvent(el));
            }
            return timelineEvents;
        }

每一个TimelineEvent对应一个xml数据节点。下一篇讲解自定义格式数据的时候,就要修改这个地方。


好了,一开始还是少说点。大家可以自己看看代码,其实不麻烦。有时间再继续。

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询