Click here to Skip to main content
12,882,639 members (31,717 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

3.6K views
3 bookmarked
Posted 22 Oct 2012

PanView - A Metro Panning Custom Control

, 22 Oct 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
PanView - a Metro panning custom control

PanView is a custom control that allows you to pan a canvas or any other content from within your MainWindow or from within any other user interface element.

Posts in this series:

A user interface element that supports panning should allow a user to swipe the content left/right with one finger, zoom in/out using two fingers, and rotate using two fingers.

Examples

pan1

Move left/right up/down.

pan2

Rotate clockwise/counterclockwise.

pan3

Zoom in/out.

pan4

See Touch interaction design (Metro style apps) and Guidelines for Panning (Metro style apps) for more information.

My goal is to make adding panning to a C# Metro application as easy as possible. To that end, I created a custom control called PanView.

Install PanView from NuGet.org and add to your existing Metro application:

  1. Install the NuGet Package Manager if you have not already.
  2. Open your Metro application in Visual Studio.
  3. Select Manage NuGet Packages from the Project menu.
  4. Click Online. Search for PanView. Click Install.

Edit MainPage.xaml to:

  1. Add the using:PanViewLibrary.
  2. Add the PanView custom control.
  3. Add content to the PanView. In the example below, the content is a TextBlock.

Example MainPage.xaml:

<Page

   x:Class="PanViewDemoApp.MainPage"

   IsTabStop="false"

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

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

   xmlns:local="using:PanViewDemoApp"

   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   xmlns:pvl="using:PanViewLibrary"

   mc:Ignorable="d">
    <Grid

       Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <pvl:PanView>
            <TextBlock

               Text="This is the pannable content" />
        </pvl:PanView>
    </Grid>
</Page>

Limiting Manipulation Modes

You may choose to limit the types of manipulations the user may perform by setting the PanView dependency property “ManipulationMode”. The example below limits the panning to simple x/y translations with inertia.

MainPage.xaml

<pvl:PanView

            ManipulationMode="TranslateX TranslateY TranslateInertia"

Reset

You may programmatically reset the transformations by calling PanView.Reset(). In the XAML and C# code below, clicking the reset button resets the panning.

MainPage.xaml
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <pvl:PanView x:Name="MyPanView">
        <Grid x:Name="_grid"

                Width="2000"

                Height="2000" />
    </pvl:PanView>
    <Button

        Content="Reset"

        Click="OnResetClicked" />
    </Grid>
MainPage.xaml.cs
private void OnResetClicked(object sender, RoutedEventArgs e)
{
    MyPanView.Reset();
}

Constraining Translations

To limit the amount of translation distance, set the dependency properties MinTranslateX, MaxTranslateX, MinTranslateY, and MaxTranslateY as shown here:

MainPage.xaml
<pvl:PanView

            MinTranslateX="-200"

            MaxTranslateX="100"

            MinTranslateY="-300"

            MaxTranslateY="600"

Binaries and Source

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

John Michael Hauck
Software Developer (Senior) LECO Corporation
United States United States
John Hauck has been developing software professionally since 1981, and focused on Windows-based development since 1988. For the past 17 years John has been working at LECO, a scientific laboratory instrument company, where he manages software development. John also served as the manager of software development at Zenith Data Systems, as the Vice President of software development at TechSmith, as the lead medical records developer at Instrument Makar, as the MSU student who developed the time and attendance system for Dart container, and as the high school kid who wrote the manufacturing control system at Wohlert. John loves the Lord, his wife, their three kids, and sailing on Lake Michigan.

You may also be interested in...

Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170422.1 | Last Updated 22 Oct 2012
Article Copyright 2012 by John Michael Hauck
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid