Tech Tock

Time is of the essence.

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.

image

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. }

Advertisements

January 21, 2013 - Posted by | Uncategorized | ,

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: