wpf+.net 4.5 surface2.0 = 異步多點觸控 時間軸 part1

直接貼代碼 廢話不多說了。
運行環境  vs11 beta  framework4.5
surface runtime  surface sdk 2.0
多點觸控模擬器 multitouchVista 或多點觸控設備

源碼請關注我的資源下載
功能說明： 多點觸控時間軸，事件可縮放 旋轉  多點同時操作 放大縮小等，

時間範圍0001-9980年 定位精確到天

時間軸數據加載格式如下：

<?xml version="1.0" encoding="utf-8" ?>
<data>
  <event imgUrl="Sample_Photos"
         start="2011/1/05"
         mediaUrl ="C:\Resources\Video\test.mp4"
         type="2"
         title="蘋果"
        >
   iphone4s

  </event>
</data>

 

主控件 1   XAML：

<UserControl x:Class="Transvalue.Timeline.TransvalueTimeline"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
             xmlns:Utils="clr-namespace:ComponentArt.Win.UI.Utils;assembly=ComponentArt.Win.UI.Common"
              xmlns:Transvalue="clr-namespace:Transvalue.Timeline" 
             mc:Ignorable="d" 
             Height="1080" Width="1920" Loaded="UserControl_Loaded">
    <Canvas x:Name="content" >
        <i:Interaction.Behaviors>
            <ei:FluidMoveBehavior  AppliesTo="Children"/>
        </i:Interaction.Behaviors>
        <Canvas Name="svContent" Width="1920" Height="1080" Canvas.Top="0" Panel.ZIndex="1" />
        <Transvalue:TimelineControl HorizontalAlignment="Left" x:Name="timeline" VerticalAlignment="Top" EndDate="2020-12-31" 
                                           StartDate="1900-01-01"
                                           DefaultTimelineMode="3"                                               
                                           DefaultItemWidth="400" Height="280" Width="1920" Canvas.Top="500">
            <Transvalue:TimelineControl.Background>
                <ImageBrush/>
            </Transvalue:TimelineControl.Background>
        </Transvalue:TimelineControl>


        <Utils:Spinner HorizontalAlignment="Left" Margin="50,700,0,0" Graphic="GlowWorm"
                       VerticalAlignment="Top" Name="glowWorm" Visibility="Hidden"/>
        <TextBlock Canvas.Left="108" TextWrapping="Wrap" Text="TransvalueOS——歷史時間軸" Canvas.Top="61" FontSize="48" FontFamily="/Transvalue.Timeline;component/Fonts/#Segoe UI Light"/>
    </Canvas>
</UserControl>

 

主控件背後代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Xml.Linq;

namespace Transvalue.Timeline
{
    /// <summary>
    /// TransvalueTimeline.xaml 的交互邏輯
    /// </summary>
    public partial class TransvalueTimeline : UserControl
    {
        public TransvalueTimeline()
        {
            InitializeComponent();
            var data = from item in XElement.Load("Data.xml").Elements("event")
                       let title = item.Attribute("title")
                       let content = item.Attribute("content")
                       let date = item.Attribute("start")
                       let imgUrl = item.Attribute("imgUrl")
                       let mediaUrl = item.Attribute("mediaUrl")
                       let type = item.Attribute("type")
                       select new TimelineEventItem
                       {
                           Title = title.Value,
                           Content = item.Value,
                           Date = Convert.ToDateTime(date.Value),
                           MedieUrl = mediaUrl.Value,
                           ImgUrl = imgUrl.Value,
                           EventType = (TimelineEventEnum.TimelineEventType)Convert.ToInt32(type.Value)
                       };
            this.timeline.TimelineEventSource =
                new System.Collections.ObjectModel.ObservableCollection<TimelineEventItem>(data.OrderBy(item => item.Date));
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            timeline.LoadComplatedEH += LoadCompletedEvent;
            timeline.LoadingEH += LoadingEvent;
            timeline.ShowScatterEH += ((o, args) =>
            {
                this.ShowMdiWindow(args.svi);
            });
        }

        private async void LoadCompletedEvent(object sender, EventArgs e)
        {
            await Task.Factory.StartNew(() =>
            {
                svContent.Children.Clear();
                this.glowWorm.Visibility = System.Windows.Visibility.Hidden;
            }, CancellationToken.None, TaskCreationOptions.None, TaskScheduler.FromCurrentSynchronizationContext());
        }

        private async void LoadingEvent(object sender, EventArgs e)
        {
            await Task.Factory.StartNew(() =>
            {
                this.glowWorm.Visibility = System.Windows.Visibility.Visible;
            }, CancellationToken.None, TaskCreationOptions.None, TaskScheduler.FromCurrentSynchronizationContext());
        }

        private void ShowMdiWindow(UIElement svi)
        {
            Console.WriteLine(svi.GetType().BaseType.Name);
            if (svi.GetType().BaseType.Name.Equals("UserControl"))
            {
                Canvas.SetTop(svi, svContent.Height / 2);
                Canvas.SetLeft(svi, svContent.Width / 2);
                svContent.Children.Add(svi);
            }
            else
            {
                Window win = svi as Window;
                win.ManipulationStarting += ((sender, e) =>
                {
                    Console.WriteLine("開始多點操作");
                    e.Manipulators.ForEach(i => Console.WriteLine(i));
                });
                win.Show();
            }
        }
    }
}