WPF Graph zoom

[manuelhoedl]

Hi,

i'm trying to use zoom in a WPF Graph but i don't know how. Can you please give me an Example how i can Zoom/pan in a Wpf-Graph ?

I want the same Function as in the Sample from the WPF-Feature Tour

http://www.ni.com/example/29739/en/ 

See Screenshot

Also the Start/Stop functionality and the Zoom/Pan Functions.

Thanks a lot

Manuel

[phansen · Accepted solution]

The "Chart" page in the WPF Feature Tour uses a GraphInteractionPalette to expose the set of built-in interactions available for the graph. To use it in your own code, simply bind it to the graph:

    <ni:Graph x:Name="graph" ... />

    <ni:GraphInteractionPalette Graph="{Binding ElementName=graph}" />

When one of the buttons is clicked, the palette will set the corresponding GraphInteraction instance as the DefaultInteraction on the graph.

---

The "Start/Stop" button simply controls the timer for a mock data source used to illustrate charting (similar to how the "Charting" example project installed with Measurement Studio is implemented). The button is not tied to any member on the graph.

[manuelhoedl]

Thats realy great.

Thank you a lot.

[manuelhoedl]

Hi Paul,

did i have to do something else ? The Zoom - function didn't work.

[phansen]

When you say "Zoom function", are you referring to one of the Zoom/ZoomHorizontal/ZoomVertical/ZoomIn/ZoomOut interactions? Or to the Zoom method on the graph?

How did you invoke the interaction/method, what did you expect it to do, and what actually happened?

[manuelhoedl]

Hi,

my graph looks like this

 <ni:Graph 
                    x:Name="graph"
                    DataSource="{Binding chartCollection}" RenderMode="Raster"  PreferIndexData="True" SuppressScaleLayout="True"
                   nix:GraphExtensions.PlotsSource="{Binding Plots2}"
                   nix:GraphExtensions.AxesSource="{Binding GraphAxes}">
                  
                </ni:Graph>
                        <ni:Legend x:Name="legend"  Grid.Column="1" ItemsSource="{Binding ElementName=graph, Path=Plots}" Margin="10,10,10,0" Padding="10"
                   Background="Transparent" BorderThickness="0">
                        </ni:Legend>
                        <StackPanel Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" Orientation="Horizontal">
                            <ni:GraphInteractionPalette  Graph="{Binding ElementName=graph}" />
                            <Button Content="Start" Width="30" Command="{Binding StartCommand}"/>
                            <Button Content="Stop" Width="30" Command="{Binding StopCommand}"/>
                        </StackPanel>

 None of the Zoom functions work. I tried all of them. The Pan-functions and the ZoomToFit only works.

I want the same Behaivour as the Sample in the WPF-Feature-Tour.

Did i have to do something in Code-Behind?

[phansen]

The "Chart" page does not have any code behind related to interaction, just the XAML binding.

Here is the complete code I have used to reproduce your scenario:

    XAML
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <ni:Graph x:Name="graph"
                  DataSource="{Binding chartCollection}"
                  RenderMode="Raster"
                  PreferIndexData="True"
                  SuppressScaleLayout="True" />

        <StackPanel Grid.Row="1"
                    Grid.ColumnSpan="2"
                    HorizontalAlignment="Center"
                    Orientation="Horizontal">
            <ni:GraphInteractionPalette Graph="{Binding ElementName=graph}" />
        </StackPanel>
    </Grid>

    Code
    public partial class MainWindow : Window {
        private readonly ChartCollection<double> data = new ChartCollection<double>( 100 );
        private readonly DispatcherTimer timer = new DispatcherTimer( );
        private readonly Random rand = new Random( );

        public MainWindow( ) {
            this.DataContext = new { chartCollection = data };
            InitializeComponent( );

            timer.Tick += delegate { data.Append( rand.NextDouble( ) ); };
            timer.Interval = TimeSpan.FromSeconds( 1 );
            timer.Start( );
        }
    }

I removed elements which should not have an effect on the zoom behavior (start/stop buttons (just have data source run continuously), legend, plots). The GraphAxes binding may change the behavior after an interaction takes place, but should not effect the interaction (assuming there is no code or binding that modifys the range when it is changed).

With this setup, all of the graph interactions work as expected for me. Between updates, I can zoom and pan freely; when the graph gets new data, the axes update their range to accomodate the new data.

To debug this further, I would register for the RangeChanged event and see what code in the call stack is affecting the range of the axes when you try to zoom.

[manuelhoedl]

Hi Paul,

your Example works very well.

In my Application i've more y-Axis and two x-Axis.

 //the first two Axes are two xAxis elements, after that yAxis elements are pushed
            AxisInt32 xAxis = new AxisInt32();
            xAxis.Orientation = System.Windows.Controls.Orientation.Horizontal;
            xAxis.Adjuster = RangeAdjuster.ContinuousChart;
            xAxis.Range = new Range<int>(0, 600);
            xAxis.Visibility = System.Windows.Visibility.Hidden;

            AxisDouble xAxis2 = new AxisDouble();
            xAxis2.Orientation = System.Windows.Controls.Orientation.Horizontal;
            xAxis2.Range = new Range<double>(0, 60);
            xAxis2.Adjuster = RangeAdjuster.None;

            GraphAxes.Add(xAxis);
            GraphAxes.Add(xAxis2);

 If i remove the two xAxis it works. But with this Axes it dont.

[phansen]

I added your code to my example after the call to InitializeComponent, only changing "GraphAxes.Add" to "graph.Axes.Add". With this change, the pan and zoom interactions still worked correctly for me (I could not edit the range directly by clicking on the maximum and typing in a new value, because the data was using the hidden axis, but all the options from the interaction palette worked as before).

Are you certain there is no other code performing extra logic on these horizontal axes?

[manuelhoedl]

Ok, in my Application i've the Graph in an ItemsControl. It's not as simple as in the Sample.

I've made you an SampleApplication with shows my Problem.
 Please have a look in the Attachment.

There i simply have an Itemscontrol with an Canvas as Itemspaneltemplate.

I add an Graph as Controltemplate.

 <Grid>
        <Grid.Resources>
            <ControlTemplate x:Key="graphItemTemplate">
                <ContentControl>

                    <StackPanel>
                        <ni:Graph x:Name="graph"
                  DataSource="{Binding data}"
                  RenderMode="Raster"
                  PreferIndexData="True"
                  SuppressScaleLayout="True" >
                           

                        </ni:Graph>

                        <ni:GraphInteractionPalette Graph="{Binding ElementName=graph}"></ni:GraphInteractionPalette>
                    </StackPanel>
                </ContentControl>
            </ControlTemplate>
            <DataTemplate DataType="{x:Type vm:GraphControl}">
                <Thumb Name="myThumb"  Canvas.Left="0" Canvas.Top="0" Template="{StaticResource graphItemTemplate}">
                </Thumb>
            </DataTemplate>
            
        </Grid.Resources>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <ItemsControl x:Name="items" Grid.Row="0" >

                <ItemsControl.Resources>

                </ItemsControl.Resources>
                <ItemsControl.Template>
                    <ControlTemplate TargetType="ItemsControl">
                        <Border BorderThickness="0" BorderBrush="White" >

                            <ItemsPresenter/>

                        </Border>
                    </ControlTemplate>
                </ItemsControl.Template>

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas>
                            
                        </Canvas>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="ContentPresenter">
                        <Setter Property="Canvas.ZIndex" Value="{Binding Path=ZIndex}"/>
                        <Setter Property="Canvas.Left" Value="{Binding Path=X}" />
                        <Setter Property="Canvas.Top" Value="{Binding Path=Y}" />
                        <Setter Property="Canvas.Height" Value="{Binding Path=Height}" />
                        <Setter Property="Canvas.Width" Value="{Binding Path=Width}" />
                        <Setter Property="Selector.IsSelected"  Value="{Binding Mode=TwoWay, Path=IsSelected}" />
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </Grid>

 in Codebehind:

 var items = new ItemsData();
            this.items.ItemsSource = items.CanvasControls;
            items.CanvasControls.Add(new ViewModel.GraphControl { X=60, Y=60, Height=300, Width=300, ZIndex=1 });

 And now the Zoomfunctions didn't work.

Hope you can help me with this Issue.

Nice Wishes

Manuel