User avatar
jsantos
Site Admin
Topic Author
Posts: 3905
Joined: 20 Jan 2012, 17:18
Contact:

Multi-touch

22 Nov 2013, 14:50

Simple sample showing multi-touch with inertia.
Screenshot 2013.11.22 14.34.43.png
First xaml contains the resources needed to skin the scrollable list:
<!-- Resources.xaml -->
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ControlTemplate x:Key="ImageListScrollThumbTemplate" TargetType="{x:Type Thumb}">
        <Grid Background="Transparent">
            <Rectangle x:Name="Rect" RadiusX="4" RadiusY="4" Margin="4,0" Fill="#802060A0"/>
        </Grid>
    </ControlTemplate>
    
    <ControlTemplate x:Key="ImageListScrollBarTemplate" TargetType="{x:Type ScrollBar}">
        <Grid Background="Transparent">
            <Track x:Name="PART_Track" Margin="0" Orientation="Horizontal">
                <Track.Thumb>
                    <Thumb Margin="0" Template="{StaticResource ImageListScrollThumbTemplate}"/>
                </Track.Thumb>
            </Track>
        </Grid>
    </ControlTemplate>
    
    <ControlTemplate x:Key="ImageListScrollViewerTemplate" TargetType="{x:Type ScrollViewer}">
        <Grid x:Name="Grid" Background="{TemplateBinding Background}">
            <Grid.RowDefinitions>
                <RowDefinition Height="8*"/>
                <RowDefinition Height="2*"/>
            </Grid.RowDefinitions>
            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                CanContentScroll="{TemplateBinding CanContentScroll}"
                ContentTemplate="{TemplateBinding ContentTemplate}"
                Content="{TemplateBinding Content}"
                Margin="{TemplateBinding Padding}"
                Grid.RowSpan="2"/>
            <ScrollBar x:Name="PART_HorizontalScrollBar"
                Template="{StaticResource ImageListScrollBarTemplate}"
                Margin="0" Minimum="0" Maximum="{TemplateBinding ScrollableWidth}"
                Orientation="Horizontal" Grid.Row="1"
                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                ViewportSize="{TemplateBinding ViewportWidth}"/>
        </Grid>
    </ControlTemplate>
    
    <ControlTemplate x:Key="ImageListTemplate" TargetType="{x:Type ListBox}">
        <ScrollViewer
            HorizontalScrollBarVisibility="Auto"
            VerticalScrollBarVisibility="Disabled"
            Template="{StaticResource ImageListScrollViewerTemplate}">
            <Border Background="#FF103050" Padding="0,2">
                <StackPanel Orientation="Horizontal" IsItemsHost="True"/>
            </Border>
        </ScrollViewer>
    </ControlTemplate>
    
    <Style x:Key="ImageListStyle" TargetType="{x:Type ListBox}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template" Value="{StaticResource ImageListTemplate}"/>
    </Style>

</ResourceDictionary>
The interface xaml is as simple as this:
<Grid
	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"
	d:DesignWidth="800" d:DesignHeight="480"
	x:Name="Root">
	
	<Grid.Resources>
		<ResourceDictionary Source="Resources.xaml"/>
	</Grid.Resources>

	<Grid.RowDefinitions>
		<RowDefinition Height="8*"/>
		<RowDefinition Height="2*"/>
	</Grid.RowDefinitions>
	
    <Border Grid.RowSpan="2"
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Image x:Name="canvas"
            Source="chipmunk.jpg"
            RenderTransform="1 0 0 1 0 0"
            Stretch="Uniform"
            HorizontalAlignment="Left" VerticalAlignment="Top"
            IsManipulationEnabled="True"/>
    </Border>

    <ListBox x:Name="list" Style="{StaticResource ImageListStyle}"
        Grid.Row="1" HorizontalAlignment="Center"
		ScrollViewer.PanningMode="HorizontalOnly"
		ScrollViewer.CanContentScroll="False"
		ScrollViewer.VerticalScrollBarVisibility="Disabled">
    	
      <Image Source="tiger.jpg"/>
      <Image Source="bear.jpg"/>
      <Image Source="cat.jpg"/>
      <Image Source="chipmunk.jpg"/>
      <Image Source="dog.jpg"/>
      <Image Source="dolphin.jpg"/>
      <Image Source="gorilla.jpg"/>
      <Image Source="iguana.jpg"/>
      <Image Source="snake.jpg"/>
      <Image Source="zebra.jpg"/>
	  
    </ListBox>

</Grid>
Here is the code script attached next to the NoesisGUIPanel:
using UnityEngine;
using Noesis;

namespace NoesisGUISamples
{

public class Touch : MonoBehaviour
{
    private Grid root_;

    void Start()
    {
        root_ = GetComponent<NoesisGUIPanel>().GetRoot<Grid>();

        ListBox list = root_.FindName<ListBox>("list");
        list.SelectionChanged += this.SelectionChanged;

        root_.ManipulationStarting += this.ManipulationStarting;
        root_.ManipulationInertiaStarting += this.ManipulationInertiaStarting;
        root_.ManipulationDelta += this.ManipulationDelta;
    }

    void SelectionChanged(BaseComponent sender, SelectionChangedEventArgs e)
    {
        ListBox list = sender.As<ListBox>();

        Image image = list.GetSelectedItem().As<Image>();
        root_.FindName<Image>("canvas").SetSource(image.GetSource());
        e.handled = true;
    }

    void ManipulationStarting(BaseComponent sender, ManipulationStartingEventArgs e)
    {
        e.mode = ManipulationModes.All;
        e.manipulationContainer = root_.FindName<Visual>("root");
        e.handled = true;
    }

    void ManipulationInertiaStarting(BaseComponent sender, ManipulationInertiaStartingEventArgs e)
    {
        e.desiredTranslationDeceleration = 100.0f / (1000.0f * 1000.0f);
        e.desiredRotationDeceleration = 360.0f / (1000.0f * 1000.0f);
        e.desiredExpansionDeceleration = 300.0f / (1000.0f * 1000.0f);
        e.handled = true;
    }

    void ManipulationDelta(BaseComponent sender, ManipulationDeltaEventArgs e)
    {
        Image image = e.source.As<Image>();
        MatrixTransform transform = image.GetRenderTransform().As<MatrixTransform>();
        Transform2f matrix = new Transform2f(transform.GetMatrix());

        float rotation = e.deltaManipulation.rotation * Mathf.Deg2Rad;
        float originX = e.manipulationOrigin.x;
        float originY = e.manipulationOrigin.y;
        float scale = e.deltaManipulation.scale;
        float translationX = e.deltaManipulation.translation.x;
        float translationY = e.deltaManipulation.translation.y;

        matrix.RotateAt(rotation, originX, originY);
        matrix.ScaleAt(scale, scale, originX, originY);
        matrix.Translate(translationX, translationY);

        transform.SetMatrix(matrix);
        e.handled = true;
    }
}

}

Who is online

Users browsing this forum: No registered users and 16 guests