TranslateTransform vs Canvas Top/Left

Did a little performance testing of Canvas positioning vs TranslateTransform.  Turns out Canvas positioning is almost twice as fast.

Its just a single window with code behind. The asterisks stand in for marker symbols that could show Long/Short/Net/Gross is a custom chart.

You can download the code in the PositionPerformance directory of my .Net Demos project on GitHub or below.

 

MainWindow.xaml

1. <Window x:Class="PositionPerformance.MainWindow"
2.        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
3.        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
4.        Title="MainWindow" Height="350" Width="525">
5.     <Grid>
6.         <Grid.ColumnDefinitions>
7.             <ColumnDefinition Width="*" />
8.             <ColumnDefinition Width="Auto" />
9.         </Grid.ColumnDefinitions>
10.  
11.         <ListBox ItemsSource="{Binding Data}">
12.             <ListBox.ItemTemplate>
13.                 <DataTemplate>
14.                     <Canvas Width="10" Height="100" >
15.  
16.                         <!–<TextBlock Text="*"
17.                                Canvas.Left="{Binding X}"
18.                                Canvas.Top="{Binding Y}" />
19.  
20.                         <TextBlock Text="*"
21.                                Canvas.Left="{Binding X1}"
22.                                Canvas.Top="{Binding Y1}" />
23.  
24.                         <TextBlock Text="*"
25.                                Canvas.Left="{Binding X2}"
26.                                Canvas.Top="{Binding Y2}" />
27.  
28.                         <TextBlock Text="*"
29.                                Canvas.Left="{Binding X3}"
30.                                Canvas.Top="{Binding Y3}" />
31.  
32.                         <TextBlock Text="*"
33.                                Canvas.Left="{Binding X4}"
34.                                Canvas.Top="{Binding Y4}" />–>
35.  
36.  
37.                         <!–<Canvas Width="10" Height="10">–>
38.                         <TextBlock Text="*">
39.                                 <TextBlock.RenderTransform>
40.                                     <TranslateTransform X="{Binding X}" Y="{Binding Y}" />
41.                                 </TextBlock.RenderTransform>
42.                             </TextBlock>
43.                             <TextBlock Text="*">
44.                                 <TextBlock.RenderTransform>
45.                                     <TranslateTransform X="{Binding X1}" Y="{Binding Y1}" />
46.                                 </TextBlock.RenderTransform>
47.                             </TextBlock>
48.                             <TextBlock Text="*">
49.                                 <TextBlock.RenderTransform>
50.                                     <TranslateTransform X="{Binding X2}" Y="{Binding Y2}" />
51.                                 </TextBlock.RenderTransform>
52.                             </TextBlock>
53.                             <TextBlock Text="*">
54.                                 <TextBlock.RenderTransform>
55.                                     <TranslateTransform X="{Binding X3}" Y="{Binding Y3}" />
56.                                 </TextBlock.RenderTransform>
57.                             </TextBlock>
58.                             <TextBlock Text="*">
59.                                 <TextBlock.RenderTransform>
60.                                     <TranslateTransform X="{Binding X4}" Y="{Binding Y4}" />
61.                                 </TextBlock.RenderTransform>
62.                             </TextBlock>
63.                             <TextBlock Text="*">
64.                                 <TextBlock.RenderTransform>
65.                                     <TranslateTransform X="{Binding X}" Y="{Binding Y}" />
66.                                 </TextBlock.RenderTransform>
67.                             </TextBlock>
68.  
69.                         <!–</Canvas>–>
70.                     </Canvas>
71.                 </DataTemplate>
72.             </ListBox.ItemTemplate>
73.             <ListBox.ItemsPanel>
74.                 <ItemsPanelTemplate>
75.                     <VirtualizingStackPanel Orientation="Horizontal" />
76.                 </ItemsPanelTemplate>
77.             </ListBox.ItemsPanel>
78.         </ListBox>
79.  
80.         <StackPanel Grid.Column="1" Margin="10">
81.             <Button Click="Button_Click">Run</Button>
82.             <HeaderedContentControl
83.                Header="WPF Time"
84.                Content="{Binding ElapsedMilliseconds}"
85.                TextBlock.TextAlignment="Right"
86.                />
87.             <TextBox x:Name="History" />
88.         </StackPanel>
89.     </Grid>
90. </Window>

MainWindow.cs

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Text;
5. using System.Windows;
6. using System.Windows.Controls;
7. using System.Windows.Data;
8. using System.Windows.Documents;
9. using System.Windows.Input;
10. using System.Windows.Media;
11. using System.Windows.Media.Imaging;
12. using System.Windows.Navigation;
13. using System.Windows.Shapes;
14. using System.Collections.ObjectModel;
15. using System.Diagnostics;
16.  
17. namespace PositionPerformance
18. {
19.     /// <summary>
20.     /// longeraction logic for MainWindow.xaml
21.     /// </summary>
22.     public partial class MainWindow : Window
23.     {
24.  
25.         public ObservableCollection<Data> Data { get; set; }
26.         Stopwatch sw = new Stopwatch();
27.  
28.         public MainWindow()
29.         {
30.             InitializeComponent();
31.             DataContext = this;
32.             Data = new ObservableCollection<Data>();
33.         }
34.  
35.  
36.  
37.  
38.         public long ElapsedMilliseconds
39.         {
40.             get { return (long)GetValue(ElapsedMillisecondsProperty); }
41.             set {
42.                
43.                 SetValue(ElapsedMillisecondsProperty, value);
44.  
45.                 this.History.Text += "\n" + ElapsedMilliseconds.ToString();
46.             }
47.         }
48.  
49.         // Using a DependencyProperty as the backing store for ElapsedMilliseconds.  This enables animation, styling, binding, etc…
50.         public static readonly DependencyProperty ElapsedMillisecondsProperty =
51.             DependencyProperty.Register("ElapsedMilliseconds", typeof(long), typeof(MainWindow), new UIPropertyMetadata(0l));
52.  
53.         private void Button_Click(object sender, RoutedEventArgs e)
54.         {
55.  
56.             Data.Clear();
57.  
58.             var r = new Random();
59.  
60.             foreach (var d in Enumerable.Range(0, 1000).Select(i =>
61.                 new Data() {
62.                     X = r.Next(1, 10), Y = r.Next(1, 100),
63.                     X1 = r.Next(1, 10),
64.                     Y1 = r.Next(1, 100)
65.                 ,
66.                     X2 = r.Next(1, 10),
67.                     Y2 = r.Next(1, 100)
68.                 ,
69.                     X3 = r.Next(1, 10),
70.                     Y3 = r.Next(1, 100)
71.                 ,
72.                     X4 = r.Next(1, 10),
73.                     Y4 = r.Next(1, 100)
74.                 }))
75.             {
76.                 Data.Add(d);
77.             }
78.            
79.  
80.             sw.Restart();
81.  
82.             Dispatcher.BeginInvoke(new Action(() => ElapsedMilliseconds = sw.ElapsedMilliseconds), System.Windows.Threading.DispatcherPriority.SystemIdle);
83.  
84.         }
85.  
86.        
87.  
88.  
89.     }
90.  
91.     public class Data
92.     {
93.         public double X { get; set; }
94.         public double Y { get; set; }
95.         public double X1 { get; set; }
96.         public double Y1 { get; set; }
97.         public double X2 { get; set; }
98.         public double Y2 { get; set; }
99.         public double X3 { get; set; }
100.         public double Y3 { get; set; }
101.         public double X4 { get; set; }
102.         public double Y4 { get; set; }
103.     }
104. }