test/xaml/enums/sweepdirection-arcsegment.html

   1 <html>
   2   <head>
   3       <title>SweepDirection (ArcSegment) Test Page</title>
   4
   5       <script language="javascript" src="Silverlight.js"></script>
   6
   7       <script type="text/xaml" id="xaml">
   8         <Canvas x:Name="canvas" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="100" Height="100" Loaded="onLoaded">
   9                 <Path Stroke="Black" StrokeThickness="2">
  10                 <Path.Data>
  11                         <PathGeometry>
  12                         <PathGeometry.Figures>
  13                                 <PathFigureCollection>
  14                                         <PathFigure StartPoint="10,30">
  15                                         <PathFigure.Segments>
  16                                                 <PathSegmentCollection>
  17                                                         <ArcSegment IsLargeArc="False" Point="50,30" RotationAngle="45" Size="10,10" />
  18                                                         <ArcSegment IsLargeArc="False" Point="100,30" RotationAngle="45" Size="10,10" SweepDirection="Clockwise" />
  19                                                         <ArcSegment IsLargeArc="False" Point="150,30" RotationAngle="45" Size="10,10" SweepDirection="CounterClockwise" />
  20                                                         <ArcSegment IsLargeArc="False" Point="200,30" RotationAngle="45" Size="10,10" SweepDirection="Clockwise" />
  21                                                 </PathSegmentCollection>
  22                                         </PathFigure.Segments>
  23                                         </PathFigure>
  24                                 </PathFigureCollection>
  25                         </PathGeometry.Figures>
  26                         </PathGeometry>
  27                 </Path.Data>
  28                 </Path>
  29                 <!-- abbreviated syntax : A (arc) -->
  30                 <Path Stroke="Red" StrokeThickness="1" Data="M 200,30 A 10,10 45 0 0 250,30" />
  31                 <Path Stroke="Green" StrokeThickness="1" Data="M 250,30 A 10,10 45 0 1 300,30" />
  32                 <Path Stroke="Blue" StrokeThickness="1" Data="M 300,30 A 10,10 45 1 1 350,30" />
  33
  34                 <Path Stroke="Black" StrokeThickness="2">
  35                 <Path.Data>
  36                         <PathGeometry>
  37                         <PathGeometry.Figures>
  38                                 <PathFigureCollection>
  39                                         <PathFigure StartPoint="10,130">
  40                                         <PathFigure.Segments>
  41                                                 <PathSegmentCollection>
  42                                                         <ArcSegment x:Name="testcase1" IsLargeArc="False" Point="50,130" RotationAngle="45" Size="10,10" />
  43                                                         <ArcSegment x:Name="testcase2" IsLargeArc="False" Point="100,130" RotationAngle="45" Size="10,10" />
  44                                                         <ArcSegment x:Name="testcase3" IsLargeArc="False" Point="150,130" RotationAngle="45" Size="10,10" />
  45                                                         <ArcSegment x:Name="testcase4" IsLargeArc="False" Point="200,130" RotationAngle="45" Size="10,10" />
  46                                                 </PathSegmentCollection>
  47                                         </PathFigure.Segments>
  48                                         </PathFigure>
  49                                 </PathFigureCollection>
  50                         </PathGeometry.Figures>
  51                         </PathGeometry>
  52                 </Path.Data>
  53                 </Path>
  54                 <!-- abbreviated syntax
  55                         * can't be changed using JavaScript
  56                         * Silverlight shows an Alert
  57                         * Silverlight error message, ErrorCode: 2024, ErrorType:ParserError, Message: Invalid attribute value XXX for property Data.
  58                         * where XXX is the text in Data
  59                 <Path x:Name="testcase5" Stroke="Red" StrokeThickness="1" Data="M 200,130 A 10,10 45 0 2 250,130" />
  60                 -->
  61         </Canvas>
  62       </script>
  63
  64       <script language="javascript">
  65 function onLoaded (sender, args)
  66 {
  67         // invalid values defaults to RIGHT (no value is CENTER)
  68         sender.findName ("testcase1").SweepDirection = -1;
  69         sender.findName ("testcase2").SweepDirection = 0;
  70         sender.findName ("testcase3").SweepDirection = 1;
  71         sender.findName ("testcase4").SweepDirection = 2;
  72
  73         // Silverlight shows an Alert
  74         // Silverlight error message, ErrorCode: 2203, ErrorType:RuntimeError, Message: AG_E_RUNTIME_SETVALUE, MethodName: SweepDirection
  75 /*
  76         sender.findName ("testcase3").StyleSimulations = "-1";
  77         sender.findName ("testcase3").StyleSimulations = sender.findName ("testcase2");
  78         sender.findName ("testcase3").StyleSimulations = null;
  79         sender.findName ("testcase3").StyleSimulations = true;
  80 */
  81 }
  82       </script>
  83   </head>
  84
  85   <body>
  86   <div id="SilverlightPluginHost" style="position:absolute; top:50px; left:50px; width:500px; height:50px;"></div>
  87
  88   <script type="text/javascript">
  89         var pe = document.getElementById("SilverlightPluginHost");
  90         Silverlight.createObject("#xaml", pe, "AgControl1", {
  91                         width:'600px',
  92                         height:'300px',
  93                         inplaceInstallPrompt:false,
  94                         background:'#FFFFFF',
  95                         isWindowless:'false',
  96                         framerate:'24',
  97                         version:'1.0'
  98                 }, {
  99                         onError:null,
 100                         onLoad:null
 101                 },
 102                 null);
 103   </script>
 104   <div style="position:absolute; top:400px; left:50px">
 105 <p>Upper section should be: half-circle down, up, down, up (all black), down (red), up (green) and up (blue)
 106 <p>Lower section should be: half-circle up, down, up and up (all black)
 107   </div>
 108   </body>
 109 </html>