• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
Silverlight
  • Product Platforms
  • More
Silverlight
Silverlight Extension Methods for Navigating the xamDataChart
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
Silverlight requires membership for participation - click to join
  • Silverlight
  • Auto-Detail Zoom with MapLayers
  • Building the oMovies Browser: Netflix oData using Infragistics NetAdvantage Silverlight Controls
  • Conditional Formatting With The XamWebGrid
  • Custom Commands with Infragistics Silverlight Commanding Framework
  • +Data Display using xamWebMap
  • Displaying AutoCAD drawings using xamWebMap
  • Extension Methods for Navigating the xamDataChart
  • faceOut - A Silverlight Reference Implementation
  • Red vs. Blue: Conditional Formatting in xamWebMap
  • Styling the xamWebGrid Group By Area
  • Using the VirtualCollection for Server-Side xamWebGrid Paging

Extension Methods for Navigating the xamDataChart

I recently posted a video demonstrating how to implement some extension methods to support xamDataChart navigation. The navigation support implemented in the demo included:

  • PanUp
  • PanDown
  • PanLeft
  • PanRight
  • ZoomIn
  • ZoomOut
  • FitInWindow

The only problem with the code I used in the video, was that the event handler for the buttons included a long if statement to handle navigation support. As the famous quote goes, “If it smells, it’s bad code”, so I wanted to refactor the implementation to be a bit more maintainable. Before I get into the changes, I first want to list the extension methods that I implemented in order to make it easy to pan and zoom the chart. Notice that the methods us a default scale value so you are not required to pass in a scale amount for each method call.

public static class xamDataChartExtensions
{
    private static double _defaultScale = 0.05;

    public static void ZoomIn(this XamDataChart dataChart)
    {
        ZoomIn(dataChart, _defaultScale);
    }

    public static void ZoomIn(this XamDataChart dataChart, double scale)
    {
        dataChart.WindowScaleHorizontal -= scale;
        dataChart.WindowScaleVertical -= scale;
    }

    public static void ZoomOut(this XamDataChart dataChart)
    {
        ZoomOut(dataChart, _defaultScale);
    }

    public static void ZoomOut(this XamDataChart dataChart, double scale)
    {
        dataChart.WindowScaleHorizontal += scale;
        dataChart.WindowScaleVertical += scale;
    }

    public static void PanUp(this XamDataChart dataChart)
    {
        PanUp(dataChart, _defaultScale);
    }

    public static void PanUp(this XamDataChart dataChart, double scale)
    {
        dataChart.WindowPositionVertical -= scale;
    }

    public static void PanDown(this XamDataChart dataChart)
    {
        PanDown(dataChart, _defaultScale);
    }

    public static void PanDown(this XamDataChart dataChart, double scale)
    {
        dataChart.WindowPositionVertical += scale;
    }

    public static void PanLeft(this XamDataChart dataChart)
    {
        PanLeft(dataChart, _defaultScale);
    }

    public static void PanLeft(this XamDataChart dataChart, double scale)
    {
        dataChart.WindowPositionHorizontal -= scale;
    }

    public static void PanRight(this XamDataChart dataChart)
    {
        PanRight(dataChart, _defaultScale);
    }

    public static void PanRight(this XamDataChart dataChart, double scale)
    {
        dataChart.WindowPositionHorizontal += scale;
    }

The previous code I implemented featured a nested if statement that would call the appropriate extension method, but I knew there was an easy way to clean this code out of the page. The key to a more concise approach begins by defining a enumeration which lists the navigation options:

public enum xamDataChartNavigationTypes
{ 
    PanUp,
    PanDown,
    PanLeft,
    PanRight,
    ZoomIn,
    ZoomOut,
    FitInWindow,
    Undefined
}

Now armed with the navigation enumeration I added another extension method named Navigate which takes an instance of the navigation enumeration and an option to pass an explicit scale value:

    public static void Navigate(this XamDataChart dataChart, xamDataChartNavigationTypes navigationType)
    {
        Navigate(dataChart, navigationType, _defaultScale);
    }

    public static void Navigate(this XamDataChart dataChart, xamDataChartNavigationTypes navigationType, double scale)
    {
        switch (navigationType)
        {
            case xamDataChartNavigationTypes.FitInWindow:
                dataChart.WindowRect = new Rect(0, 0, 1, 1);
                break;
            case xamDataChartNavigationTypes.PanUp:
                dataChart.PanUp(scale);
                break;
            case xamDataChartNavigationTypes.PanDown:
                dataChart.PanDown(scale);
                break;
            case xamDataChartNavigationTypes.PanLeft:
                dataChart.PanLeft(scale);
                break;
            case xamDataChartNavigationTypes.PanRight:
                dataChart.PanRight(scale);
                break;
            case xamDataChartNavigationTypes.ZoomIn:
                dataChart.ZoomIn(scale);
                break;
            case xamDataChartNavigationTypes.ZoomOut:
                dataChart.ZoomOut(scale);
                break;
            default:
                break;
        }
    }

Now as long at the Tag property of your button is equal to one of the navigation enumeration values (ex: PanUp, PanDown, etc), then the click handler is reduced to the following:

private void Navigate_Click(object sender, RoutedEventArgs e)
{
    string tag = (sender as Button).Tag.ToString();
    xamDataChartNavigationTypes navigationType;

    if (xamDataChartNavigationTypes.TryParse(tag, out navigationType))
    {
        this.dataChart.Navigate(navigationType);
    }
}
  • Data Visualization
  • 2010.2
  • XamDataChart
  • Share
  • History
  • More
  • Cancel
Related
Recommended