FlexChart | ComponentOne
WPF FlexChart / Working with FlexChart / End-User Interaction / Zooming and Panning
本主题中
    Zooming and Panning
    本主题中

    Zooming is the ability to enlarge an image which can be performed in FlexChart using ZoomBehavior class. To implement zooming, you need to create an object of ZoomBehavior class available in the C1.WPF.Chart.Interaction namespace and add it to FlexChart's Behaviors collection using Add method. This method adds zoom behavior to the behavior collection by accessing it. In addition, you can use the ZoomMode property to enable touch based zooming in FlexChart. This property sets the gesture direction of zoom behavior through GestureMode enumeration which provides four zoom modes as given below:

    The GIF below shows how the FlexChart appears on zooming.

    The following code examples demonstrate how to add and remove zooming in C# and XAML codes. These examples use the sample created in the Quick Start section.

    //Add Zoom behavior
    flexChart.Behaviors.Add(new C1.WPF.Chart.Interaction.ZoomBehavior());
    
    //Remove Zoom behavior
    var behavrToRemove = flexChart.Behaviors.FirstOrDefault( behavr => behavr.GetType() == typeof(C1.WPF.Chart.Interaction.ZoomBehavior));
    flexChart.Behaviors.Remove(behavrToRemove);
                       
    
    <c1:C1FlexChart x:Name="flexChart" Header="Tokyo Average Precipitation Report | 2019" Grid.Row="1"
            ChartType="LineSymbols" ItemsSource="{Binding DataSource.Data}"
            Binding="Precipitation" BindingX="Date">
        <c1:Series SeriesName="Precipitation"/>
        <c1:C1FlexChart.Behaviors>
            <c1:ZoomBehavior/>
        </c1:C1FlexChart.Behaviors>
    </c1:C1FlexChart>                                          
    

    Similarly, panning is the ability to scroll/move a zoomed image from a fixed position which can be implemented in FlexChart by creating an object of TranslateBehavior class available in the C1.WPF.Chart.Interaction namespace and add it to FlexChart's Behaviors collection using Add method. This method adds translation behavior to the behavior collection by accessing it. In addition, you can use the TranslationMode property to enable touch based panning in FlexChart. This property sets the gesture direction of translation behavior through GestureMode enumeration.

    The GIF below shows how the FlexChart appears on panning.

    The following code examples demonstrate how to add and remove panning in C# and XAML. These examples use the sample created in the Quick Start section.

    //Add Translate behavior
    flexChart.Behaviors.Add(new C1.WPF.Chart.Interaction.TranslateBehavior());
    //Remove Translate behavior
    var behavrToRemove = flexChart.Behaviors.FirstOrDefault(behavr => behavr.GetType() == typeof(C1.WPF.Chart.Interaction.TranslateBehavior));
    flexChart.Behaviors.Remove(behavrToRemove);
    
    <c1:C1FlexChart x:Name="flexChart" Header="Tokyo Average Precipitation Report | 2019" Grid.Row="1"
           ChartType="LineSymbols" ItemsSource="{Binding DataSource.Data}"
           Binding="Precipitation" BindingX="Date">
       <c1:Series SeriesName="Precipitation"/>
         <c1:C1FlexChart.Behaviors>
               <c1:TranslateBehavior/>
         </c1:C1FlexChart.Behaviors>
    </c1:C1FlexChart>