wpf+.net 4.5 surface2.0 = 异步多点触控 时间轴 part5

可使用多种方式将事件（UserControl 或Window或其他UIElement）内容呈现 以下是2个例子：

视频方式：

 

<UserControl xmlns:s="http://schemas.microsoft.com/surface/2008"  x:Class="Transvalue.Timeline.EventVideoControlItem"
             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"
             mc:Ignorable="d" 
            Width="600" Height="600">
    <i:Interaction.Behaviors>
        <ei:TranslateZoomRotateBehavior/>
    </i:Interaction.Behaviors>
    <Grid Width="600" Height="600">
        <Grid.Background>
            <ImageBrush ImageSource="../Images/dyck.png"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="83*"/>
            <RowDefinition Height="343*"/>
            <RowDefinition Height="174*"/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="tbTitle" HorizontalAlignment="Left" 
                           Margin="218,46,0,0" TextWrapping="Wrap" 
                           Text="" VerticalAlignment="Top"
                           Height="32" Width="190" 
                           FontFamily="/Transvalue.Timeline;component/Fonts/#Segoe UI Light" 
                           FontSize="22" Foreground="White"/>
        <TextBlock x:Name="tbContent" HorizontalAlignment="Left" 
                           Margin="108,0,0,0" TextWrapping="Wrap" 
                           Text="" VerticalAlignment="Top" 
                   Height="97" Width="376" FontFamily="/Transvalue.Timeline;component/Fonts/#Segoe UI Light" Foreground="White" FontSize="20" Grid.Row="2"/>

        <MediaElement HorizontalAlignment="Left" Height="303" Margin="69,19,0,0" 
                      VerticalAlignment="Top" Width="451" 
                      Name="mediaContainer" LoadedBehavior="Manual" Grid.Row="1" ScrubbingEnabled="True" Stretch="Fill"/>

    </Grid>
</UserControl>

 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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 Microsoft.Surface.Presentation.Controls;

namespace Transvalue.Timeline
{
    /// <summary>
    /// EventVideoControlItem.xaml 的交互逻辑
    /// </summary>
    public partial class EventVideoControlItem : UserControl
    {
        public EventVideoControlItem()
        {
            InitializeComponent();
            this.DataContextChanged += ((sender, e) =>
              {
                  if (null != this.DataContext)
                  {
                      Console.WriteLine("开始赋值");
                      TimelineEventItem item = this.DataContext as TimelineEventItem;
                      tbContent.Text = item.Content;
                      tbContent.ToolTip = item.Title;
                      mediaContainer.Source = new Uri(item.MedieUrl);
                      mediaContainer.MediaEnded += ((s, args) =>
                        {
                            Console.WriteLine("播完了");
                            mediaContainer.Play();
                        });
                      mediaContainer.Play();
                  }
              });
        }
    }
}

 

 

 

翻页书方式(书控件另行制作，会放到项目源码里到我的资源）：

<Custom:SurfaceWindow
    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:Custom="http://schemas.microsoft.com/surface/2008" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
	xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:BookControl="clr-namespace:TransvalueSystem.Control.BookControl" 
    x:Class="Transvalue.Timeline.EventControlBookItem" 
    WindowStyle="None" Topmost="True"
             mc:Ignorable="d" WindowState="Normal"
    AllowsTransparency="True" Background="Transparent" WindowStartupLocation="CenterScreen"     
            Height="600" Width="600">
    <Window.Resources>
        <ControlTemplate x:Key="ButtonControlTemplate" TargetType="{x:Type Button}">
            <Grid Margin="0,0,0,0" Name="content" TouchDown="Button_TouchDown" TouchEnter="Button_TouchDown">
                <Grid.Background>
                    <ImageBrush ImageSource="../Images/gbdy.png" Stretch="None"/>
                </Grid.Background>
            </Grid>

        </ControlTemplate>
    </Window.Resources>
    <i:Interaction.Behaviors>
        <ei:FluidMoveBehavior />
    </i:Interaction.Behaviors>
    <Grid Margin="0,10,-6,-39">

        <Grid.Background>
            <ImageBrush ImageSource="../Images/dyck.png"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.138*"/>
            <RowDefinition Height="0.572*"/>
            <RowDefinition Height="0.29*"/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="tbTitle" HorizontalAlignment="Left" 
                           Margin="218,46,0,0" TextWrapping="Wrap" 
                           Text="" VerticalAlignment="Top"
                           Height="32" Width="190" 
                           FontFamily="/Transvalue.Timeline;component/Fonts/#Segoe UI Light" 
                           FontSize="22" Foreground="White"/>
        <TextBlock x:Name="tbContent" HorizontalAlignment="Left" 
                           Margin="108,4,0,0" TextWrapping="Wrap" 
                           Text="" VerticalAlignment="Top" 
                   Height="81" Width="372" FontFamily="/Transvalue.Timeline;component/Fonts/#Segoe UI Light"
                   Foreground="White" FontSize="20" Grid.Row="2"/>


        <BookControl:BookViewer HorizontalAlignment="Left" Margin="58,10,0,7" 
                                Grid.Row="1" Width="483" x:Name="imgContainer"
                              />


        <Button Content="Button" HorizontalAlignment="Left" Margin="531,46,0,0" VerticalAlignment="Top" Width="43" Height="37" 
                Template="{DynamicResource ButtonControlTemplate}" 
                RenderTransformOrigin="0.279,0.459" TouchDown="Button_TouchDown" TouchEnter="Button_TouchDown" Click="Button_Click"/>
    </Grid>

</Custom:SurfaceWindow>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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 Microsoft.Surface.Presentation.Controls;

namespace Transvalue.Timeline
{
    /// <summary>
    /// EventControl.xaml 的交互逻辑
    /// </summary>
    public partial class EventControlBookItem : SurfaceWindow
    {
        public EventControlBookItem()
        {
            InitializeComponent();
            this.DataContextChanged += ((sender, e) =>
            {
                if (null != this.DataContext)
                {
                    TimelineEventItem item = this.DataContext as TimelineEventItem;
                    tbContent.Text = item.Content;
                    tbContent.ToolTip = item.Title;
                    imgContainer.BookPath = item.ImgUrl;
                }
            });
        }

        private void Button_TouchDown(object sender, TouchEventArgs e)
        {
            this.Close();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
    }
}