Multi-touch
Simple sample showing multi-touch with inertia.
First xaml contains the resources needed to skin the scrollable list:
The interface xaml is as simple as this:
Here is the code script attached next to the NoesisGUIPanel:
First xaml contains the resources needed to skin the scrollable list:
Code: Select all
<!-- 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>
Code: Select all
<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>
Code: Select all
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 2 guests