Home » Microsoft TechnologiesRSS

Multi touch manipulation events on a SVI

HI

I have a scatter view item with  surface list box in it, 

 the surfacelistbox item  is an Image and i want to translate and scale that image up without scaling the SVI, 

I was able to do this successfully with the Surface SDK manipulation processor but no with WPF 4 the manupilation starting , delta etc events are not raised on the image

 

<Viewbox>      

<s:SurfaceListBox

                                       IsSynchronizedWithCurrentItem="True"    

Style="{StaticResource  nLsitBoxStyleBottom}"                                     

                                       ScrollViewer.CanContentScroll="True"  x:Name="slideOnEOnly" 

                                      Width="502" Height="458>

                    <s:SurfaceListBox.RenderTransform>

                        <TransformGroup>

                            <ScaleTransform ScaleY="1" ScaleX="1"/>

                            <SkewTransform/>

                            <RotateTransform/>

                            <TranslateTransform Y="-482"/>

                        </TransformGroup>

                    </s:SurfaceListBox.RenderTransform>

                </s:SurfaceListBox>

 </Viewbox>


  <Style  x:Key="nLsitBoxStyleBottom" TargetType="{x:Type s:SurfaceListBox}">

            <Setter Property="ConetentTemplate">
<Setter.Value>
 <DataTemplate >
            <Grid IsManipulationEnabled="True"  Initialized="Grid_Initialized"  Background="White">
                <Grid>
                    <Image  ManipulationDelta="imageCurrent_ManipulationDelta"  IsManipulationEnabled="True" " Canvas.Left="12" x:Name="imageCurrent"                                          
                Width="480"  Source="{Binding Path}">
                    
                   </Image>   
            </Grid>
        </DataTemplate>
</Setter.Value>
           </Setter>

        </Style>




private void Grid_Initialized(object sender, EventArgs e)
        {
            SurfaceListBoxItem myListBoxItem =
(SurfaceListBoxItem)(slideOnEOnly.ItemContainerGenerator.ContainerFromItem(slideOnEOnly.Items.CurrentItem));


            TransformGroup tg = new TransformGroup();
            ScaleTransform up = new ScaleTransform(1.0, 1.0);
            TranslateTransform updown = new TranslateTransform();
            scaleup = false;
            tg.Children.Add(up);
            tg.Children.Add(updown);
            myListBoxItem.RenderTransform = tg;
            aX = updown.X;
            aY = updown.Y;
            slideOnEOnly.Dispatcher.BeginInvoke(DispatcherPriority.Input, new Action(() =>
            {
                slideOnEOnly.ScrollIntoView(slideOnEOnly.Items.CurrentItem);

            }));
        }


    private void imageCurrent_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {

        }


Am i missing something ?? Please point out a way to do this, I also tried using the TranslateZoomRotateBehavior  but it doesnt work 

Thanks
J

 

 

3 Answers Found

 

Answer 1

Can you please post a complete, and error free sample? This does not help enough to figure our what it is that you are trying to do. Also, please add the transformation itself that you want to apply.
 

Bart Roozendaal, Sevensteps
http://www.sevensteps.com
Microsoft MVP for Microsoft Surface


"JasonMP" wrote in message news:40401e1e-7148-4ee0-8390-1d66d5db1263...

HI

I have a scatter view item with  surface list box in it,

the surfacelistbox item  is an Image and i want to translate and scale that image up without scaling the SVI,

I was able to do this successfully with the Surface SDK manipulation processor but no with WPF 4 the manupilation starting , delta etc events are not raised on the image

 

<Viewbox>     

<s:SurfaceListBox

                                       IsSynchronizedWithCurrentItem="True"   

Style="{StaticResource  nLsitBoxStyleBottom}"                                    

                                       ScrollViewer.CanContentScroll="True"  x:Name="slideOnEOnly"

                                      Width="502" Height="458>

                    <s:SurfaceListBox.RenderTransform>

                        <TransformGroup>

                            <ScaleTransform ScaleY="1" ScaleX="1"/>

                            <SkewTransform/>

                            <RotateTransform/>

                            <TranslateTransform Y="-482"/>

                        </TransformGroup>

                    </s:SurfaceListBox.RenderTransform>

                </s:SurfaceListBox>

</Viewbox>
 
 
  <Style  x:Key="nLsitBoxStyleBottom" TargetType="{x:Type s:SurfaceListBox}">
 
            <Setter Property="ConetentTemplate">
<Setter.Value>
<DataTemplate >
           <Grid IsManipulationEnabled="True"  Initialized="Grid_Initialized"  Background="White">
                <Grid>
                    <Image  ManipulationDelta="imageCurrent_ManipulationDelta"  IsManipulationEnabled="True" " Canvas.Left="12" x:Name="imageCurrent"                                         
                Width="480"  Source="{Binding Path}">
                   
                  </Image>  
          </Grid>
        </DataTemplate>
</Setter.Value>
           </Setter>
 
        </Style>
 
 
 
 
private void Grid_Initialized(object sender, EventArgs e)
        {
            SurfaceListBoxItem myListBoxItem =
(SurfaceListBoxItem)(slideOnEOnly.ItemContainerGenerator.ContainerFromItem(slideOnEOnly.Items.CurrentItem));
 
 
            TransformGroup tg = new TransformGroup();
            ScaleTransform up = new ScaleTransform(1.0, 1.0);
            TranslateTransform updown = new TranslateTransform();
            scaleup = false;
            tg.Children.Add(up);
            tg.Children.Add(updown);
            myListBoxItem.RenderTransform = tg;
            aX = updown.X;
            aY = updown.Y;
            slideOnEOnly.Dispatcher.BeginInvoke(DispatcherPriority.Input, new Action(() =>
            {
                slideOnEOnly.ScrollIntoView(slideOnEOnly.Items.CurrentItem);
 
            }));
        }
 
 
    private void imageCurrent_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
 
        }
 
 
Am i missing something ?? Please point out a way to do this, I also tried using the TranslateZoomRotateBehavior  but it doesnt work
 
Thanks
J

 

 

Answer 2

Hi Bart

 

Here is a working code

<s:SurfaceWindow

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:s="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:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="SurfaceApplication1.SurfaceWindow1"

    Title="SurfaceApplication1"

    >

  <s:SurfaceWindow.Resources>

    <ImageBrush x:Key="WindowBackground" Stretch="None" Opacity="0.6" ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>

  </s:SurfaceWindow.Resources>

 

  <Grid Background="{StaticResource WindowBackground}" >

 

        <ListBox   Width="500" Height="500" x:Name="slideOnEOnly"  Margin="52,0,334,8"  VerticalAlignment="Center" BorderThickness="0" HorizontalAlignment="Center">

            <Viewbox>

                <Image  x:Name="asa" ManipulationDelta="Image_ManipulationDelta" IsEnabled="True" IsManipulationEnabled="True" Source="C:\Users\EES MTS 04\Documents\Visual Studio 2010\Projects\attempt\attempt\Resources\iconPreview.png" Height="86" Margin="68,40,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="162">

 

                    <Image.RenderTransform>

                        <MatrixTransform Matrix="1.0, 0.0, 0.0, 1.0, 0.0, 0.0"/>

                    </Image.RenderTransform>

 

                </Image>

            </Viewbox>

 

        </ListBox>

 

            <Image  ManipulationDelta="Image_ManipulationDelta"  IsEnabled="True" IsManipulationEnabled="True"  Source="C:\Users\EES MTS 04\Documents\Visual Studio 2010\Projects\attempt\attempt\Resources\iconPreview.png"

                    Height="86" Margin="68,40,0,0"

                    VerticalAlignment="Top"

                    HorizontalAlignment="Left" 

                    Width="162">

          <Image.RenderTransform>

                    <MatrixTransform Matrix="1.0, 0.0, 0.0, 1.0, 0.0, 0.0"/>

                </Image.RenderTransform>

        </Image>

 

    </Grid>

</s:SurfaceWindow>

 

using System;

using System.Collections.Generic;

using System.Text;

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.Shapes;

using System.Windows.Threading;

using Microsoft.Surface.Presentation;

using Microsoft.Surface.Presentation.Controls;

using Microsoft.Surface.Presentation.Input;

 

namespace SurfaceApplication1

{

 

    public partial class SurfaceWindow1 : SurfaceWindow

    {

 

        public SurfaceWindow1()

        {

            InitializeComponent();

        }

 

 

 

     private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)

        {

 

            var element = e.Source as FrameworkElement;

            if (element != null)

            {

 

                var deltaManipulation = e.DeltaManipulation;

                var matrix = ((MatrixTransform)element.RenderTransform).Matrix;

                Point center = new Point(element.ActualWidth / 2, element.ActualHeight / 2);

                center = matrix.Transform(center);

         matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y);

                matrix.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y , center.X, center.Y);

               matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y);    

               matrix.ScaleAt(deltaManipulation.Scale.X , deltaManipulation.Scale.Y , center.X, center.Y);

                ((MatrixTransform)element.RenderTransform).Matrix = matrix;

 

                e.Handled = true;

 

                System.Diagnostics.Debug.WriteLine("Matrix: " + matrix.ToString());

 

            }

        }

 

 

 

    }

}

 

 

Thanks

J

 

Answer 3

Hi Jason,
 
I will have a look when I’m in the office tomorrow.
 
Bye,
 

Bart Roozendaal, Sevensteps
http://www.sevensteps.com
Microsoft MVP for Microsoft Surface


"JasonMP" wrote in message news:0c66a439-6efc-486a-a988-5a2850d8c101...

Hi Bart

 

Here is a working code

<s:SurfaceWindow

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:s="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:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="SurfaceApplication1.SurfaceWindow1"

    Title="SurfaceApplication1"

    >

  <s:SurfaceWindow.Resources>

    <ImageBrush x:Key="WindowBackground" Stretch="None" Opacity="0.6" ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>

  </s:SurfaceWindow.Resources>

 

  <Grid Background="{StaticResource WindowBackground}" >

 

        <ListBox   Width="500" Height="500" x:Name="slideOnEOnly"  Margin="52,0,334,8"  VerticalAlignment="Center" BorderThickness="0" HorizontalAlignment="Center">

            <Viewbox>

                <Image  x:Name="asa" ManipulationDelta="Image_ManipulationDelta" IsEnabled="True" IsManipulationEnabled="True" Source="C:\Users\EES MTS 04\Documents\Visual Studio 2010\Projects\attempt\attempt\Resources\iconPreview.png" Height="86" Margin="68,40,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="162">

 

                    <Image.RenderTransform>

                        <MatrixTransform Matrix="1.0, 0.0, 0.0, 1.0, 0.0, 0.0"/>

                    </Image.RenderTransform>

 

                </Image>

            </Viewbox>

 

        </ListBox>

 

            <Image  ManipulationDelta="Image_ManipulationDelta"  IsEnabled="True" IsManipulationEnabled="True"  Source="C:\Users\EES MTS 04\Documents\Visual Studio 2010\Projects\attempt\attempt\Resources\iconPreview.png"

                    Height="86" Margin="68,40,0,0"

                    VerticalAlignment="Top"

                    HorizontalAlignment="Left"

                    Width="162">

          <Image.RenderTransform>

                    <MatrixTransform Matrix="1.0, 0.0, 0.0, 1.0, 0.0, 0.0"/>

                </Image.RenderTransform>

        </Image>

 

    </Grid>

</s:SurfaceWindow>

 

using System;

using System.Collections.Generic;

using System.Text;

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.Shapes;

using System.Windows.Threading;

using Microsoft.Surface.Presentation;

using Microsoft.Surface.Presentation.Controls;

using Microsoft.Surface.Presentation.Input;

 

namespace SurfaceApplication1

{

 

    public partial class SurfaceWindow1 : SurfaceWindow

    {

 

        public SurfaceWindow1()

        {

            InitializeComponent();

        }

 

 

 

     private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)

        {

 

            var element = e.Source as FrameworkElement;

            if (element != null)

            {

 

                var deltaManipulation = e.DeltaManipulation;

                var matrix = ((MatrixTransform)element.RenderTransform).Matrix;

                Point center = new Point(element.ActualWidth / 2, element.ActualHeight / 2);

                center = matrix.Transform(center);

         matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y);

                matrix.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y , center.X, center.Y);

               matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y);   

               matrix.ScaleAt(deltaManipulation.Scale.X , deltaManipulation.Scale.Y , center.X, center.Y);

                ((MatrixTransform)element.RenderTransform).Matrix = matrix;

 

                e.Handled = true;

 

                System.Diagnostics.Debug.WriteLine("Matrix: " + matrix.ToString());

 

            }

        }

 

 

 

    }

}

 

 

Thanks

J

 
 
 

<< Previous      Next >>


Microsoft   |   Windows   |   Visual Studio   |   Follow us on Twitter