Here's an example of animating the layout size of the chart vs. animating the render size of the chart.
Layout is the top chart, Render the bottom.

Here is the Xaml:

<Grid Height="800">
        <Grid.RowDefinitions>
            <RowDefinition Height="400" />
            <RowDefinition Height="400" />
        </Grid.RowDefinitions>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        
        <Grid x:Name="layout" Grid.Row="0">
            <igChart:XamChart x:Name="chart1" Width="400" Height="400" >
                <igChart:XamChart.Axes>
                    <igChart:Axis AxisType="PrimaryX" Unit="1000" />
                </igChart:XamChart.Axes>
                <igChart:XamChart.Series>
                    <igChart:Series 
                        ChartType="Line"
                        DataMapping="Label = Label; Value = Value"
                        DataSource="{Binding}" />
                </igChart:XamChart.Series>
            </igChart:XamChart>
        </Grid>
        
        <Viewbox x:Name="render" Grid.Row="1"
                 Stretch="Uniform">
            <igChart:XamChart x:Name="chart2" Width="400" Height="400" >
                <igChart:XamChart.Axes>
                    <igChart:Axis AxisType="PrimaryX" Unit="1000" />
                </igChart:XamChart.Axes>
                <igChart:XamChart.Series>
                    <igChart:Series 
                        ChartType="Line"
                        DataMapping="Label = Label; Value = Value"
                        DataSource="{Binding}" />
                </igChart:XamChart.Series>
            </igChart:XamChart>
        </Viewbox>

        <Button x:Name="resize1" Grid.Row="0" Grid.Column="1" Content="Resize" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                                From="{Binding ElementName=chart1, Path=ActualWidth}"
                                To="0" 
                                Duration="0:00:01"
                                Storyboard.Target="{Binding ElementName=chart1}" 
                                Storyboard.TargetProperty="Width" />
                            <DoubleAnimation 
                                From="{Binding ElementName=chart1, Path=ActualHeight}"
                                To="0" 
                                Duration="0:00:01"
                                Storyboard.Target="{Binding ElementName=chart1}" 
                                Storyboard.TargetProperty="Height" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Button x:Name="resize2" Grid.Row="1" Grid.Column="1" Content="Resize" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                                From="{Binding ElementName=render, Path=ActualWidth}"
                                To="0" 
                                Duration="0:00:01"
                                Storyboard.Target="{Binding ElementName=render}" 
                                Storyboard.TargetProperty="Width" />
                            <DoubleAnimation 
                                From="{Binding ElementName=render, Path=ActualHeight}"
                                To="0" 
                                Duration="0:00:01"
                                Storyboard.Target="{Binding ElementName=render}" 
                                Storyboard.TargetProperty="Height" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>

And here is the code behind:

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new TestData();
        }
    }

    public class TestDataItem
    {
        public string Label { get; set; }
        public double Value { get; set; }
    }

    public class TestData
        : ObservableCollection<TestDataItem>
    {
        public TestData()
        {
            Random rand = new Random();
            double curr = 5.0;
            for (int i = 0; i < 10000; i++)
            {
                if (rand.NextDouble() > .5)
                {
                    curr += rand.NextDouble();
                }
                else
                {
                    curr -= rand.NextDouble();
                }

                Add(new TestDataItem()
                {
                    Label = i.ToString(),
                    Value = curr
                });
            }
        }
    }

Hope this helps!

-Graham

Thanks Graham for the example.

The problem is that I don't want to set a fixed size for the chart. In the Tiles control I want to utilize the Min,Max,Normal views. I can set the ViewBox's Stretch to 'Fill' but that magnifies the chart instead of stretch.

Gabor

Hi,

The problem with animating the layout size of the chart is that it will have to recalculate everything for every tiny size change of the chart, and if you have a lot of data, this may mean that the animation can no longer be smooth. The reason why it has to recalculate things if you change the layout size is that it may need to orient the labels differently, or adjust margins, etc.

In contrast, if you adjust the render size of the chart while animation, this is purely a scaling effect that can be performed with the assistance of your graphics hardware, and does not affect the chart's layout at all.

If you can detect that an animation is starting/ending, you could:

1. Check the current actual size of the chart.
2. Set the Width/Height of the chart to its actual size.
3. Put the chart in a viewbox and put the viewbox where the chart was (see which stretch mode works with this best).
4. Detect when the animation is complete.
5. Take the chart out of the viewbox, and clear the values of its width/height property, so that it takes these values from the container again.

Alternatively you could capture an image of the chart to take its place for the duration of the animation.

-Graham

Yes, I understand the problem with the layout rendering. I will try your suggested work around.

Thanks for your help.

Gabor