Ayman Farouk

Microsoft Maniac Guy .. !

WPF/E + Express Design Simple Button !

Umm, the result of my first 30 minutes playing with Express Design and WPFE .. I wanted to upload the files but I couldnt figur out how. However, the codes are here.. Three files, button.xaml, button.js, buttonHolder.htm

First, buttonHolder.htm

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>WPFE Test</title>
    
     </script type="text/javascript" src="js/aghost.js">
      
       </script type="text/javascript" src="js/button.js">
</head>
<body>
<div id="agControl1Host">
    <script type="text/javascript">
  
  new agHost(
    "agControl1Host", 
    
    "agControl1", 
    "300px",
    "300px", 
    "#D6D6D6", 
    null, 
    "button.xaml", 
                
    "false", 
    "30", 
    null 
                
  );

  
  var agControl = document.getElementById("agControlmt1");

</script>

    </div>
</body>
</html>

Second, button.xaml

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
80
81
82
83
84
85
86
87
88
 
<Canvas Width="2000" Height="3000" Background="White"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas x:Name="Layer_1" Width="816" Height="1056" Loaded="BLOCKED SCRIPTCanvasLoad">
    <Rectangle x:Name="Rectangle" MouseLeftButtonDown="BLOCKED SCRIPTbuttonClick" Canvas.Left="25.5391" Canvas.Top="26.545" Width="208.95" Height="62.9569" Stretch="Fill" StrokeThickness="0.96" StrokeLineJoin="Round" Stroke="#FF000000">
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard x:Name="Click" Duration="Forever" BeginTime="0">
                <DoubleAnimation Storyboard.TargetName="Rectangle"
                    Storyboard.TargetProperty="Opacity"
                    From="1"
                    To=".3"
                    AutoReverse="True"
                  BeginTime="0:0:0"
                  Duration="0:0:0.3"/>
                <DoubleAnimation 
                  Storyboard.TargetName="Rectangle"
                  Storyboard.TargetProperty="(Canvas.Top)"
              
                  From="26.545"
                  To="28.545"
                  AutoReverse="True"
                  BeginTime="0:0:0"
                  Duration="0:0:0.3"
                   />
                <DoubleAnimation 
                      Storyboard.TargetName="Rectangle"
                      Storyboard.TargetProperty="(Canvas.Left)"
              
                      From="25.5391"
                      To="27.545"
                      AutoReverse="True"
                      BeginTime="0:0:0"
                      Duration="0:0:0.3"
                   />
                <DoubleAnimation 
                      Storyboard.TargetName="Group"
                      Storyboard.TargetProperty="(Canvas.Left)"
              
                      From="79.5323"
                      To="81.5323"
                      AutoReverse="True"
                      BeginTime="0:0:0"
                      Duration="0:0:0.3"
                   />

                <DoubleAnimation 
                    Storyboard.TargetName="Group"
                    Storyboard.TargetProperty="(Canvas.Top)"
              
                    From="36.6633"
                    To="38.6633"
                    AutoReverse="True"
                    BeginTime="0:0:0"
                    Duration="0:0:0.3"
                   />

              </Storyboard>

            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Rectangle.Triggers>
      
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.00116084,0.500001" EndPoint="0.983499,0.145966">
          <LinearGradientBrush.GradientStops>
            <GradientStop Color="#FF184F74" Offset="0"/>
            <GradientStop Color="#FFFFFFFF" Offset="1"/>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Rectangle.Fill>

      
    </Rectangle>
    <Canvas Width="86.5551" Height="34.9219" x:Name="Group" Canvas.Left="77.1416" Canvas.Top="36.6633">
      <Path x:Name="Path" Canvas.Left="0" Canvas.Top="0" Width="27.2344" Height="34.3594" Stretch="Fill" Fill="#FF000000" Data="F1 M 11.3203,34.3594L 11.3203,4.05475L 0,4.05475L 0,0L 27.2344,0L 27.2344,4.05475L 15.8672,4.05475L 15.8672,34.3594L 11.3203,34.3594 Z "/>
      <Path x:Name="Path_0" Canvas.Left="24.6336" Canvas.Top="8.90625" Width="22.9454" Height="26.0157" Stretch="Fill" Fill="#FF000000" Data="F1 M 43.079,26.3438L 47.4383,26.8829C 46.7508,29.4297 45.4774,31.4063 43.618,32.8126C 41.7587,34.2188 39.3837,34.9219 36.493,34.9219C 32.8524,34.9219 29.9657,33.8008 27.8328,31.5587C 25.7,29.3165 24.6336,26.1719 24.6336,22.125C 24.6336,17.9375 25.7117,14.6875 27.868,12.375C 30.0242,10.0625 32.8211,8.90625 36.2586,8.90625C 39.5868,8.90625 42.3055,10.0391 44.4149,12.3047C 46.5243,14.5704 47.579,17.7579 47.579,21.8672C 47.579,22.1172 47.5712,22.4922 47.5555,22.9922L 28.993,22.9922C 29.1493,25.7266 29.9227,27.8203 31.3133,29.2735C 32.704,30.7266 34.4384,31.4532 36.5165,31.4532C 38.0634,31.4532 39.3837,31.0469 40.4774,30.2344C 41.5712,29.4219 42.4384,28.1251 43.079,26.3438 Z M 29.2274,19.5235L 43.1258,19.5235C 42.9383,17.4297 42.4071,15.8594 41.5321,14.8125C 40.1884,13.1875 38.4462,12.375 36.3055,12.375C 34.368,12.375 32.7391,13.0234 31.4188,14.3204C 30.0985,15.6172 29.368,17.3516 29.2274,19.5235 Z "/>
      <Path x:Name="Path_1" Canvas.Left="51.0472" Canvas.Top="8.90625" Width="20.6719" Height="26.0157" Stretch="Fill" Fill="#FF000000" Data="F1 M 51.0472,26.9297L 55.2192,26.2735C 55.4535,27.9453 56.1058,29.2266 57.1762,30.1172C 58.2465,31.0079 59.7426,31.4532 61.6644,31.4532C 63.6019,31.4532 65.0394,31.0587 65.9769,30.2696C 66.9144,29.4805 67.3832,28.5547 67.3832,27.4922C 67.3832,26.5391 66.9691,25.7891 66.141,25.2422C 65.5629,24.8672 64.1254,24.3907 61.8285,23.8125C 58.7347,23.0313 56.5902,22.3555 55.3949,21.7852C 54.1996,21.2149 53.2933,20.4258 52.6762,19.418C 52.059,18.4102 51.7504,17.2969 51.7504,16.0782C 51.7504,14.9688 52.0043,13.9415 52.5121,12.9962C 53.02,12.0508 53.7114,11.2657 54.5864,10.6407C 55.2426,10.1563 56.1371,9.74615 57.2699,9.41022C 58.4027,9.07428 59.6176,8.90625 60.9144,8.90625C 62.8676,8.90625 64.5824,9.1875 66.059,9.75C 67.5356,10.3125 68.6254,11.0743 69.3285,12.0352C 70.0316,12.9962 70.516,14.2813 70.7817,15.8907L 66.6567,16.4532C 66.4692,15.1719 65.9262,14.1719 65.0277,13.4531C 64.1293,12.7344 62.8598,12.375 61.2192,12.375C 59.2817,12.375 57.8988,12.6953 57.0707,13.336C 56.2425,13.9766 55.8285,14.7266 55.8285,15.586C 55.8285,16.1328 56.0004,16.625 56.3442,17.0625C 56.6879,17.5157 57.2269,17.8907 57.9614,18.1875C 58.3832,18.3438 59.6254,18.7032 61.6879,19.2657C 64.6722,20.0626 66.7543,20.7149 67.934,21.2227C 69.1136,21.7305 70.0394,22.4688 70.7113,23.4376C 71.3832,24.4063 71.7192,25.6094 71.7192,27.0469C 71.7192,28.4532 71.309,29.7774 70.4887,31.0196C 69.6683,32.2618 68.4847,33.2227 66.9379,33.9024C 65.391,34.5821 63.641,34.9219 61.6879,34.9219C 58.4535,34.9219 55.9887,34.2501 54.2934,32.9063C 52.5981,31.5626 51.516,29.5704 51.0472,26.9297 Z "/>
      <Path x:Name="Path_2" Canvas.Left="74.4144" Canvas.Top="0.773499" Width="12.1407" Height="33.9142" Stretch="Fill" Fill="#FF000000" Data="F1 M 85.9457,30.586L 86.5551,34.3125C 85.3676,34.5626 84.3051,34.6877 83.3676,34.6877C 81.8363,34.6877 80.6488,34.4455 79.8051,33.961C 78.9613,33.4766 78.3676,32.8399 78.0238,32.0508C 77.6801,31.2618 77.5082,29.6016 77.5082,27.0704L 77.5082,12.75L 74.4144,12.75L 74.4144,9.46875L 77.5082,9.46875L 77.5082,3.30475L 81.7035,0.773499L 81.7035,9.46875L 85.9457,9.46875L 85.9457,12.75L 81.7035,12.75L 81.7035,27.3047C 81.7035,28.5079 81.7777,29.2813 81.9262,29.6251C 82.0746,29.9688 82.3168,30.2422 82.6528,30.4454C 82.9887,30.6484 83.4692,30.75 84.0942,30.75C 84.5629,30.75 85.18,30.6953 85.9457,30.586 Z "/>
    </Canvas>

    
  </Canvas>

</Canvas>

 

And now, button.js 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// JScript File
// button.js
function CanvasLoad()
{
    var wpfe = document.getElementById("agControl1");
    var Anim = wpfe.FindName("Click"); 
    Anim.stop(); 
}

function buttonClick(sender,args)
{
 var wpfe = document.getElementById("agControl1");
 var Anim = wpfe.FindName("Click"); 
 Anim.begin(); 
}

 

Enjoy ;)

 

a.

Posted: Sat, Jan 6 2007 4:30 AM by Ayman Farouk | with no comments
Filed under: ,
Leave a Comment

(required) 

(required) 

(optional)

(required) 


Please add 4 and 7 and type the answer here: