Support for Resizing Elements

Additional support has been added to provide simple resizing for FrameworkElements within a container. This is of particular interest for an Image control, for example on a product catalog page.

Adding Touch-Based Resizing to a Framework Element

Touch resize support can be added to a FrameworkElement via another behavior. This behavior allows "pinch-based" zoom/un-zoom for items within a container, as well as touch-based drag/move, as shown below:
<Border Grid.Column="0" Grid.Row="0" BorderBrush="Black" BorderThickness="5" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid>
        <Image x:Name="ResizeImage" Source="/Wintellect.Touch.Sample;component/SampleData/SampleDataSource/SampleDataSource_Files/image01.png">
            <i:Interaction.Behaviors>
                <Touch:ElementResizingBehavior/>
            </i:Interaction.Behaviors>
        </Image>
    </Grid>
</Border>

Available Properties

There are several properties available that affect the how the behavior interprts instructions. These include:
  • ClipToParent - Determines if the item to whom the behavior is attached is clipped to the rectangle represented by its parent - default is true.
  • LimitMinimumScaleToOriginalSize - Determines if the item to whom the behavior is applied stops zooming in at 1.0 (cannot be shrunk) - default is true.
  • LimitTranslationToParentBounds - Determines if the item to whome the behavior is applied resists being dragged beyond its margins (dragged off the screen) - default is true.

NOTE - In the sample code, the values described above are bound to checkboxes in the UI to allow experimentation and illustration of the different combinations of the settings.

Last edited Jun 15, 2011 at 1:21 AM by avidgator, version 3

Comments

No comments yet.