When I resize a window with a chart, the rendering is not smooth at all. The same happening on animating a chart.Like I am using charts in the XamTiles control, I had to turn off animation it is so bad.
I tried to set RefreshEnabled to false, did not help.
Thanks
Gabor
Gabor,
If you are talking about the chart size changing as you minimize and maximize tiles or animate the size of any container for the chart, you may want to instead consider setting a size for the chart and putting it in a viewbox or some similar approach. A render transform of the chart will always be much more efficient than a layout transform of the chart.
-Graham
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