[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

Question
[x]
Attachment Details

MatrixAnimationUsingPath - setting the origin point of animated control following the path, top left is default but how do I change it!!!!

Asked by edward_mellor in WPF and Silverlight, Microsoft Visual Studio Express, Expression Web

Tags: WPF, Expresson Blend, Visual Studio 2008

I have a control (a button used in this example) that is animated to follow a path using MatrixAnimationUsingPath (DoesRotateWithTangent is set to true). I need to set the animated control so the origin is the top right, not the top left when it animates along the path, does anybody know how? I set the RenderTransformOrigin for the button but gave an odd path that the button followed....

Here is my code, thanks
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="600" Width="1280">
    <Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions" Margin="20">
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="schematic" Width="1280" Height="1024" Clip="F1 M 0,0L 1280,0L 1280,1024L 0,1024L 0,0">
    <Canvas x:Name="StationGuideway" Width="1280" Height="1024" Canvas.Left="0" Canvas.Top="0">
        <Viewbox x:Name="Group" Width="983.208" Height="217.211" Canvas.Left="32.0194" Canvas.Top="20.7974">
            <Canvas Width="983.208" Height="217.211">
                <Path x:Name="Path" Width="527.645" Height="202.173" Canvas.Left="0" Canvas.Top="15.0378" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 137.599,79.4006C 113.423,88.595 89.2477,97.7895 72.492,101.873C 55.7363,105.956 46.4006,104.928 39.7684,101.558C 33.1362,98.1877 29.2074,92.4749 27.1028,84.7249C 24.9982,76.9749 24.7178,67.1877 26.9251,58.6136C 29.1323,50.0395 33.8271,42.6783 40.1813,38.8867C 46.5355,35.095 54.5491,34.8728 72.6636,34.9706C 90.7781,35.0684 118.993,35.4864 142.049,35.5698C 165.105,35.6531 183.002,35.4018 194.96,34.6472C 206.919,33.8924 212.939,32.6343 218,30.9497C 223.061,29.2651 227.162,27.154 232.99,24.8264C 238.818,22.4988 246.373,19.9548 253.927,17.4107L 243.937,17.5188L 69.8782,17.0378C 58.9076,17.0378 38.6042,20.8562 29.3801,30.2556C 25.4947,34.4223 21.6093,38.5889 18.5941,44.2556C 15.5789,49.9223 13.4339,57.0889 12.7458,64.0056C 12.0578,70.9223 12.8268,77.5889 13.616,83.4223C 14.4052,89.2556 15.2147,94.2556 17.2315,99.7417C 19.2484,105.228 22.4728,111.2 27.8076,116.756C 33.1423,122.312 40.5876,127.451 49.809,129.878C 59.0304,132.305 70.0279,132.021 79.1207,127.555C 88.2136,123.09 95.4019,114.444 100.44,108.142C 105.477,101.84 108.364,97.8816 113.167,93.9024C 117.97,89.9233 124.688,85.9233 131.407,81.9233L 186.925,60.0379C 204.895,53.6213 222.865,47.2046 235.147,42.7233C 247.428,38.2421 254.022,35.6964 267.903,34.4651C 281.783,33.2339 302.95,33.3172 324.118,33.4006C 344.091,33.5047 364.064,33.6089 383.009,33.543C 401.953,33.477 419.869,33.2408 436.514,33.6365C 453.158,34.0324 468.532,35.0601 481.109,38.9288C 493.686,42.7975 503.467,49.5074 510.914,59.313C 518.361,69.1185 523.474,82.0198 525.093,98.7975C 526.711,115.575 524.836,136.23 518.61,153.334C 512.384,170.439 501.807,183.995 487.835,190.828C 473.863,197.661 456.496,197.772 408.213,197.952C 359.93,198.131 280.73,198.379 230.931,198.462C 181.132,198.544 160.734,198.461 144.343,198.419C 127.951,198.377 115.566,198.377 106.271,198.766C 96.976,199.155 90.7701,199.933 83.2152,202.322C 75.6603,204.711 66.7563,208.711 58.6618,210.961C 50.5673,213.211 43.2822,213.711 33.9734,214.127C 24.6647,214.544 13.3324,214.877 2,215.211"/>
                <Path x:Name="Line" Width="70.6586" Height="29.9376" Canvas.Left="79.3491" Canvas.Top="98.8815" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 148.008,100.882L 81.3491,126.819"/>
                <Path x:Name="Line_0" Width="58.1141" Height="5.18817" Canvas.Left="67.0838" Canvas.Top="127.443" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 69.0838,130.631L 123.198,129.443"/>
                <Path x:Name="Path_1" Width="67.5047" Height="22.2562" Canvas.Left="264.026" Canvas.Top="31.3755" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 329.531,33.3755C 320.866,34.4117 312.202,35.4478 301.618,38.4905C 291.034,41.5332 278.53,46.5825 266.026,51.6318"/>
                <Path x:Name="Path_2" Width="734.605" Height="4.47882" Canvas.Left="248.603" Canvas.Top="14.9475" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 250.603,17.4263L 499.03,16.9475L 981.208,17.2793"/>
                <Path x:Name="Path_3" Width="28.4539" Height="18.1115" Canvas.Left="105.565" Canvas.Top="1.05151" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 132.019,17.163C 121.769,16.8909 109.083,3.61493 107.565,3.05151"/>
                <Path x:Name="Path_4" Width="28.3558" Height="18.584" Canvas.Left="79.2878" Canvas.Top="0.563416" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 105.644,17.1474C 95.3943,16.8753 82.8059,3.12677 81.2878,2.56342"/>
            </Canvas>
        </Viewbox>
        <Viewbox x:Name="Group_5" Width="528.779" Height="134.611" Canvas.Left="732.657" Canvas.Top="21.1348">
            <Canvas Width="528.779" Height="134.611">
                <Path x:Name="Path_6" Width="527.569" Height="118.474" Canvas.Left="0" Canvas.Top="14.9417" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 398.369,79.4216C 422.947,88.616 447.524,97.8105 464.558,101.894C 481.593,105.977 491.084,104.949 497.826,101.579C 504.569,98.2088 508.563,92.496 510.702,84.746C 512.842,76.996 513.127,67.2088 510.883,58.6347C 508.639,50.0605 503.866,42.6994 497.406,38.9077C 490.946,35.116 482.8,34.8939 464.384,34.9917C 445.968,35.0895 417.284,35.5075 393.845,35.5908C 370.406,35.6741 352.212,35.4229 340.054,34.6682C 327.897,33.9135 321.777,32.6555 316.632,30.9708C 311.487,29.2862 307.317,27.175 301.388,24.7658C 295.458,22.3565 287.767,19.6492 280.077,16.9417L 312.725,17.0644L 467.216,17.0588C 478.369,17.0588 499.01,20.8773 508.387,30.2767C 512.337,34.4434 516.287,38.61 519.352,44.2767C 522.418,49.9434 524.598,57.11 525.298,64.0267C 525.997,70.9434 525.216,77.61 524.413,83.4434C 523.611,89.2767 522.788,94.2767 520.738,99.7628C 518.687,105.249 515.409,111.221 509.986,116.777C 504.562,122.333 496.993,127.472 487.619,129.899C 478.244,132.326 467.064,132.042 457.82,127.576C 448.576,123.111 441.268,114.465 436.146,108.163C 431.025,101.861 428.09,97.9026 423.207,93.9235C 418.325,89.9443 411.495,85.9443 404.664,81.9443L 348.223,60.059C 329.955,53.6423 311.686,47.2256 299.2,42.9111C 286.714,38.5965 280.011,36.3841 265.9,35.4863C 251.788,34.5883 230.269,35.0049 208.75,35.4216C 188.445,35.5258 168.14,35.6299 148.88,35.564C 129.62,35.498 111.407,35.2619 94.4855,35.6577C 77.5642,36.0535 61.9353,37.0811 49.5892,40.9457C 37.2432,44.8102 28.1799,51.5115 21.0149,60.8622C 13.8499,70.213 8.58325,82.213 5.73047,93.7686C 2.87781,105.324 2.4389,116.435 2,127.546"/>
                <Path x:Name="Path_7" Width="29.1182" Height="18.4749" Canvas.Left="420.095" Canvas.Top="0.583008" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 447.213,17.0579C 436.794,16.7859 423.639,3.14642 422.095,2.58301"/>
                <Path x:Name="Path_8" Width="29.1179" Height="18.4749" Canvas.Left="393.382" Canvas.Top="0.563416" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 420.5,17.0383C 410.08,16.7663 396.925,3.12677 395.382,2.56342"/>
            </Canvas>
        </Viewbox>
        <Ellipse x:Name="Ellipse" Width="180.783" Height="232.166" Canvas.Left="555.9" Canvas.Top="37.1816" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00"/>
        <Path x:Name="Line_9" Width="1212" Height="4" Canvas.Left="32.0357" Canvas.Top="325.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 34.0357,327.341L 1242.04,327.341"/>
        <Path x:Name="Line_10" Width="1212" Height="4" Canvas.Left="32.0356" Canvas.Top="349.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 34.0356,351.341L 1242.04,351.341"/>
        <Path x:Name="Line_11" Width="1212" Height="4" Canvas.Left="34.0358" Canvas.Top="399.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 36.0358,401.341L 1244.04,401.341"/>
        <Path x:Name="Line_12" Width="1212" Height="4" Canvas.Left="34.0357" Canvas.Top="423.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 36.0357,425.341L 1244.04,425.341"/>
        <Path x:Name="Line_13" Width="1212" Height="4" Canvas.Left="31.0357" Canvas.Top="484.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 33.0357,486.341L 1241.04,486.341"/>
        <Path x:Name="Line_14" Width="1212" Height="4" Canvas.Left="31.0356" Canvas.Top="508.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 33.0356,510.341L 1241.04,510.341"/>
        <Path x:Name="Line_15" Width="1212" Height="4" Canvas.Left="33.0358" Canvas.Top="558.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 35.0358,560.341L 1243.04,560.341"/>
        <Path x:Name="Line_16" Width="1212" Height="4" Canvas.Left="33.0357" Canvas.Top="582.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 35.0357,584.341L 1243.04,584.341"/>
        <Path x:Name="Line_17" Width="1212" Height="4" Canvas.Left="33.0356" Canvas.Top="638.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 35.0356,640.341L 1243.04,640.341"/>
        <Path x:Name="Line_18" Width="1212" Height="4" Canvas.Left="33.0356" Canvas.Top="662.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 35.0356,664.341L 1243.04,664.341"/>
        <Path x:Name="Line_19" Width="1212" Height="4" Canvas.Left="35.0357" Canvas.Top="712.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 37.0357,714.341L 1245.04,714.341"/>
        <Path x:Name="Line_20" Width="1212" Height="4" Canvas.Left="35.0356" Canvas.Top="736.341" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 37.0356,738.341L 1245.04,738.341"/>
        <Path x:Name="Path_21" Width="618.42" Height="20.8158" Canvas.Left="32.376" Canvas.Top="248.931" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 648.796,267.348L 204.102,267.595C 193.639,267.651 183.175,267.708 171.751,267.736C 160.327,267.764 147.942,267.764 138.647,267.375C 129.352,266.986 123.146,266.209 115.591,263.82C 108.036,261.431 99.1323,257.431 91.0378,255.181C 82.9432,252.931 75.6581,252.431 66.3494,252.014C 57.0407,251.597 45.7083,251.264 34.376,250.931"/>
    </Canvas>
    <Canvas x:Name="A_1" Width="1280" Height="1024" Canvas.Left="0" Canvas.Top="0"></Canvas>
            <Canvas> 
        <!-- The Button that is animated across the screen by animating
         the MatrixTransform applied to the button. -->
        <Button MinWidth="40" Content="210" Width="40" Height="24">                  
            <Button.RenderTransform>  
                <MatrixTransform x:Name="ButtonMatrixTransform">
                 </MatrixTransform>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath
              Storyboard.TargetName="ButtonMatrixTransform"
              Storyboard.TargetProperty="Matrix"
              DoesRotateWithTangent="True"
              Duration="0:0:15"
              RepeatBehavior="Forever" >
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry Figures="M 140.137,23.9541C 143.408,26.8499 146.679,29.7458 150.241,32.0999C 153.804,34.4541 157.658,36.2666 161.512,38.0791L 102.564,37.5286C 96.7303,38.0842 90.897,38.6398 85.6748,39.7509C 80.4526,40.8621 75.8415,42.5286 71.3137,44.6953C 66.7859,46.862 62.3414,49.5286 57.0637,55.9175C 51.7859,62.3064 45.6748,72.4175 44.5637,86.2508C 43.4526,100.084 47.3414,117.64 54.1192,129.306C 60.897,140.973 70.5637,146.751 78.8137,149.695C 87.0637,152.64 93.897,152.751 101.508,150.806C 109.119,148.862 117.508,144.862 124.48,138.362C 131.453,131.862 137.008,122.862 143.564,116.195C 150.119,109.529 157.675,105.195 178.647,96.7508C 199.619,88.3064 234.008,75.7509 255.175,67.8621C 276.341,59.9731 284.286,56.7509 297.694,55.138C 311.102,53.5251 329.973,53.5217 363.742,53.1311C 397.512,52.7405 446.178,51.9626 477.465,54.1311C 508.751,56.2995 522.657,61.4141 532.657,68.9697C 542.657,76.5251 548.751,86.5217 552.409,97.8176C 556.067,109.113 557.29,121.709 558.512,134.304C 558.391,151.61 557.852,157.485 558.642,166.744C 559.262,174.012 562.85,189.827 562.85,189.827C 565.377,198.278 567.903,206.728 572.846,216.086C 577.79,225.443 585.151,235.707 593.109,243.637C 601.068,251.568 609.623,257.165 616.956,260.665C 624.29,264.165 630.401,265.568 636.206,266.311C 642.012,267.054 647.512,267.137 654.79,266.228C 662.068,265.318 671.123,263.415 680.151,258.755C 689.179,254.096 698.179,246.679 705.804,237.887C 713.429,229.096 719.679,218.929 724.095,208.554C 728.512,198.179 731.095,187.596 732.595,177.804C 734.095,168.012 734.512,159.012 734.762,151.499C 735.012,143.985 735.095,137.957 735.804,130.95C 736.512,123.943 737.845,115.957 740.515,107.891C 743.186,99.8249 747.193,91.679 751.081,85.5679C 754.97,79.4568 758.741,75.3806 763.949,71.5889C 769.158,67.7972 775.804,64.2902 783.637,61.8735C 791.47,59.4568 800.491,58.1306 810.335,57.3007C 820.179,56.4708 830.845,56.1375 840.71,55.9882C 850.574,55.8389 859.637,55.8735 884.554,55.8735C 909.47,55.8735 950.241,55.8389 974.206,55.7C 998.172,55.561 1005.33,55.3181 1031.12,63.4048C 1056.91,71.4916 1101.32,87.9082 1124.81,97.4012C 1148.3,106.894 1150.85,109.464 1153.64,112.047C 1156.44,114.63 1159.46,117.228 1165.19,124.026C 1170.91,130.825 1179.32,141.825 1189.78,147.45C 1200.24,153.075 1212.74,153.325 1222.79,150.071C 1232.83,146.818 1240.42,140.061 1246.05,132.728C 1251.67,125.394 1255.33,117.485 1256.91,108.068C 1258.5,98.6513 1258.01,87.7276 1256.09,78.186C 1254.17,68.6443 1250.83,60.4847 1243.75,53.9847C 1236.66,47.4847 1225.84,42.6443 1215.51,40.2242C 1205.18,37.8041 1195.35,37.8041 1188.72,37.8909C 1182.09,37.9777 1178.66,38.1514 1175.2,37.1548C 1171.74,36.1583 1168.24,33.9916 1164.82,31.6166C 1161.41,29.2416 1158.07,26.6583 1154.74,24.075"  
                    />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Canvas>
</Canvas>
</Page>
</Window>
 
Related Solutions
Keywords: MatrixAnimationUsingPath - setting the…
 
Loading Advertisement...
 
 
Loading Advertisement...
20091111-EE-VQP-89 - Hierarchy / EE_QW_3_20080625