Dynamically scaling objects when visual state is active

Question

I'm building a picture viewer with two visual states.

A) Application base state (no visualstate active)

1) "base" state (visualstate, empty storyboard)

2) "grid" with all the images (visualstate that scales images to quarter size)

I want to change between the visual states with gestures. Pinching an image currently does this. I also want the pinch gesture to scale the image when I pinch (OnPinchDelta). This is only working in A) no visual state active. Once I launch a visual state 1) or 2) pinching no longer works. It still launches the visualstate change but doesn't scale the image while pinching.

How can I modify the image scale when I have a visual state active or how can I exit any active visual state to not have any visualstate/storyboard running (I think the latter is impossible)?

The reason why the pinching no longer scales the image while pinching is because it somehow conflicts with the visualstate. On app launch everything works but once a visual state has been activated it no longer works. If in app launch I set the visualstate to 1) it doesn't work even once.

EDIT: I built a simplified example. Here's the relevant XAML (copy paste of the rest didn't work but otherwise it's just the default WP page template with toolkit reference):

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="Grid">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="image" d:IsOptimized="True"/>
                    <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="image" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"/>
    <Image x:Name="image" Source="cheetah-picture.jpg" Stretch="Uniform" VerticalAlignment="Top">
        <Image.RenderTransform>
            <CompositeTransform x:Name="ImageTransformation"/>
        </Image.RenderTransform>
        <toolkit:GestureService.GestureListener>
            <toolkit:GestureListener PinchDelta="OnPinchDelta" PinchCompleted="OnPinchCompleted" />
        </toolkit:GestureService.GestureListener>
    </Image>
</Grid>

Here's the .CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Pincher
{
public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnPinchDelta(object sender, PinchGestureEventArgs e)
    {
        ImageTransformation.ScaleX = 1 * e.DistanceRatio;
        ImageTransformation.ScaleY = ImageTransformation.ScaleX;
    }

    private void OnPinchCompleted(object sender, PinchGestureEventArgs e)
    {

        bool squeezing = (e.DistanceRatio < 1) ? true : false;

        if (squeezing == true)
        {
            VisualStateManager.GoToState(this, "Grid", true);
            MessageBox.Show("grid");
        }
        else
        {
            VisualStateManager.GoToState(this, "Normal", true);
            MessageBox.Show("normal");
        }
    }
}

}

To wrap up. Changing visual states works with pinching. Actually scaling the picture while pinching only works when no visual state is active. How can you scale items while a visual state is active?

score 0 · Answer 1 · answered Apr 21 '12 at 21:38

0

I think the problem you having is due to trying go base state. base state is a default state which is used when control is initialised, but once VSM (Visual State Manager) goes to a different state you are no longer in base state and can't go back to it.

In your case you should have something like grid state and normal. And toggle between those two states.

Also if you would go to something like a default button style in WP7 states, you will notice that it has Normal, MousOver, Pressed and Disabled state in a default Transition group. And when the user isn't doing anything with the button (and it's not disabled) it goes to Normal state, not to BASE!

answered Apr 21 '12 at 21:38

Vitalij

4,587
9
42
65

I obviously have the actual base state (no VSM). Then a 1) GRID state and a 2) "BASE" state. You can call the latter 2) "NORMAL" if you want but that's just semantics regarding the name. That state is empty. The problem is that as soon as I run any visual state I can no longer scale an image affected by the state. The image simply does not scale while a visual state is running and since you can't exit a visual state I can no longer scale it unless you somehow can target a scale of an object in a certain visual state - is that possible? – Hardev Apr 23 '12 at 08:01
Could you post your XAML (especially the VSM bit). – Vitalij Apr 23 '12 at 19:56
I edited my original post. It now includes a simplified example. For some reason I couldn't copy paste the complete XAML but what's not included is just the default WP page template. – Hardev Apr 25 '12 at 07:00
I did more debugging. If you just once touch the scale with a visualstate/storyboard the scaling while pinching doesn't work even if you go back to "normal" state which is an empty storyboard... – Hardev Apr 25 '12 at 07:22

Dynamically scaling objects when visual state is active

1 Answers1