Question

Hi i have 4 chart controls in a canvas. when i click a chart control it should zoom relative to the control position. its zoomin perfectly but it is going out side of the canvas.

code

 <Canvas x:Name="SampleCanvas" Background="#F5F7F9" Height="530"    Width="1010">
                    <chartingToolkit:Chart  x:Name="mcChart" Loaded="mcChart_Loaded"  Width="400" Height="250" Canvas.Left="5" Canvas.Top="5" MouseLeftButtonDown="brdMovable_MouseLeftButtonDown"
                             Background="LightSteelBlue">
                        <chartingToolkit:Chart.RenderTransform>
                            <ScaleTransform x:Name="scaleTransform"></ScaleTransform>
                        </chartingToolkit:Chart.RenderTransform>
                        <chartingToolkit:Chart.Series>
                            <chartingToolkit:ColumnSeries Title="Experience"  IndependentValueBinding="{Binding Path=ModelName}" DependentValueBinding="{Binding  Path=SaleCount}">
                            </chartingToolkit:ColumnSeries>
                        </chartingToolkit:Chart.Series>
                    </chartingToolkit:Chart>
                    <chartingToolkit:Chart  x:Name="mcChart2" Loaded="mcChart_Loaded"  Width="400" Height="250" Canvas.Left="410" Canvas.Top="5" MouseLeftButtonDown="brdMovable_MouseLeftButtonDown"
                             Background="LightSteelBlue">
                        <chartingToolkit:Chart.RenderTransform>
                            <ScaleTransform x:Name="scaleTransform2"></ScaleTransform>
                        </chartingToolkit:Chart.RenderTransform>
                        <chartingToolkit:Chart.Series>
                            <chartingToolkit:ColumnSeries Title="Experience2"  IndependentValueBinding="{Binding Path=ModelName}" DependentValueBinding="{Binding  Path=SaleCount}">
                            </chartingToolkit:ColumnSeries>
                        </chartingToolkit:Chart.Series>
                    </chartingToolkit:Chart>
                    <chartingToolkit:Chart  x:Name="mcChart3" Loaded="mcChart_Loaded"  Width="400" Height="250" Canvas.Left="0" Canvas.Top="270" MouseLeftButtonDown="brdMovable_MouseLeftButtonDown"
                             Background="LightSteelBlue">
                        <chartingToolkit:Chart.RenderTransform>
                            <ScaleTransform x:Name="scaleTransform3"></ScaleTransform>
                        </chartingToolkit:Chart.RenderTransform>
                        <chartingToolkit:Chart.Series>
                            <chartingToolkit:ColumnSeries Title="Experience3"  IndependentValueBinding="{Binding Path=ModelName}" DependentValueBinding="{Binding  Path=SaleCount}">
                            </chartingToolkit:ColumnSeries>
                        </chartingToolkit:Chart.Series>
                    </chartingToolkit:Chart>
                    <chartingToolkit:Chart  x:Name="mcChart4" Loaded="mcChart_Loaded"  Width="400" Height="250" Canvas.Left="410" Canvas.Top="270" MouseLeftButtonDown="brdMovable_MouseLeftButtonDown"
                             Background="LightSteelBlue">
                        <chartingToolkit:Chart.RenderTransform>
                            <ScaleTransform x:Name="scaleTransform4"></ScaleTransform>
                        </chartingToolkit:Chart.RenderTransform>
                        <chartingToolkit:Chart.Series>
                            <chartingToolkit:ColumnSeries Title="Experience4"  IndependentValueBinding="{Binding Path=ModelName}" DependentValueBinding="{Binding  Path=SaleCount}">
                            </chartingToolkit:ColumnSeries>
                        </chartingToolkit:Chart.Series>
                    </chartingToolkit:Chart>
                </Canvas>

in code behind i am dynamically passing the element and doing the zoom as below.

            Storyboard storyBoard = new Storyboard();

            ///////// X Transform
            DoubleAnimation ds = new DoubleAnimation();
            storyBoard.Children.Add(ds);
            ds.From  = 1;
            ds.To = 1.5;
            ds.Duration = new Duration(TimeSpan.FromSeconds(2));
            Storyboard.SetTargetName(ds, "scaleTransform");
            Storyboard.SetTargetProperty(ds, new PropertyPath("(ScaleX)"));

            ////Y Transform

            DoubleAnimation dsy = new DoubleAnimation();
            storyBoard.Children.Add(dsy);
            dsy.From = 1;
            dsy.To = 1.5;
            dsy.Duration = new Duration(TimeSpan.FromSeconds(2));
            Storyboard.SetTargetName(dsy, "scaleTransform");
            Storyboard.SetTargetProperty(dsy, new PropertyPath("(ScaleY)"));
            LayoutRoot.Resources.Remove("unique_id");
            LayoutRoot.Resources.Add("unique_id",storyBoard);

            storyBoard.Begin();

i am getting the zoom outside of the canvas for chart2,cahrt3,chart4.

is there anyway to get the zoom center of canvas or the relative position of the chart ?

Thanks

Answer 1

Add RenderTransformOrigin="0.5,0.5" to the element you are scaling.

e.g.

<Canvas x:Name="SampleCanvas" RenderTransformOrigin="0.5,0.5"...

The co-ordindates in a render transform origin are a fraction of the size so 0.5, 0.5 is the middle.