CODEWITHSUNDEEP
xamlwindows-phone-8.1winrt-xaml
nimbudew
nimbudew

Reputation: 978

Dragging a Grid and increasing its width

How can I drag a Grid element in Windows Phone 8.1 and increase its width according to the distance it's being dragged? Say I have a 50px wide grid element and I drag it to 400px location on the screen; I want it to scale accordingly, and with the same speed as it is dragged.

I'm trying to create a storyboard for this and I'm able to manipulate the width, but how can I vary the speed of animation to match the speed of dragging? Also, how do I make the width dependent on the location of the pointer?

Upvotes: 0

Views: 31

Answers (1)

Boris Salimov
Boris Salimov

Reputation: 693

You do not need to use the Storyboard. See code below.

XAML:

   <Grid x:Name="FlippedGrid" HorizontalAlignment="Left" ManipulationMode="TranslateX" ManipulationDelta="FlippedGridOnManipulationDelta"  Width="60" Height="100" Background="Aquamarine"/>

Do not forget to set ManipulationMode!

CS:

private void FlippedGridOnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var delta = e.Delta.Translation.X;

    FlippedGrid.Width += delta;

    //TODO If you want check position, retrieve e.Position:
    //var position = e.Position;

    //TODO If you want change flip velocity
    //double velocity = 1.5;
    //FlippedGrid.Width += delta * velocty;
 }

Upvotes: 1

Related Questions