Understanding C#

Graphing Calculator Demo -- Part 1

2010-02-12T23:16:00.000-08:00

It's been nearly a month since my last post but I haven't been idle. I've actually been working hard on a private project and, one day, I may document the steps I took to create it. For now, I'm going to go back to the MSDN samples. This time, I'm not going to bother with a one-to-one port of the program for two reasons: one, it's a very complicated program; two, I want to focus on the logical elements of the program rather than fiddle with the design aspects.

The topic here is centered on the Graphing Calculator Demo over at the .NET Framework Library. My goal is to understand the function plotting aspect of the demo. Once I've reached that goal then I may extend this series to include the parametric and 3d graphing but that may take a while since I will continue on with my private project before thinking about that.

First of all, you will notice that someone commented "This sample have [sic.] bugs when opened in Visual Studio 2008. The xaml design window cannot load the file because of errors." I couldn't comment back or edit that region in either Chrome or IE so I'll just write the solution here to kick things off.

Go to Window1.xaml and follow my fix below:

<!--JM: This doesn't work.
          <Setter Property="Background" Value="LinearGradient 0,0 0.03,.9 #ffcccccc #ffeeeeee"/>
    Check out below for fix.
-->
<Setter Property="Background">
    <Setter.Value>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0.03,.9">
            <GradientStop Color="#ffcccccc" Offset="0" />
            <GradientStop Color="#ffeeeeee" Offset="1" />
        </LinearGradientBrush>
    </Setter.Value>
</Setter>

The most interesting part of this program, for me, is the parser so that's what I will talk about next time.

Concentric Rings Demo -- Part 2

2010-01-14T21:01:00.000-08:00

Since the window is working nicely, I want to start drawing onto the canvas.

The final line of the constructor is CreateCircles(); which initializes some parameters for generating the circles then goes into a loop to instantiate and set-up each of the circles.

Every circle will be centered at (actually, near) the center of the canvas. It is very simple to find the center of the canvas:

double centerX = this.MainCanvas.ActualWidth / 2.0;
double centerY = this.MainCanvas.ActualHeight / 2.0;

We don't know the size of each person's screen so use the "ActualWidth/ActualHeight" property to get the rendered dimensions of the canvas width and height respectively. It is possible to set the height and width using the "Width/Height" property but it may not be rendered with that value for a variety of reasons (here about the height of the object):

Height is one of three writable properties on FrameworkElement that specify height information. The other two are MinHeight and MaxHeight. If there is a conflict between these values, the order of application for actual height determination is that first MinHeight must be honored, then MaxHeight, and finally, if it is within bounds, Height.

The next thing in the "CreateCircles" method is the list of valid colors for each circle:

Color[] colors = new Color[] { Colors.White, Colors.Green, Colors.Green, Colors.Lime };

Just a simple array of colors, this is good programming practice when you have a specific style in mind or otherwise already know which values should be valid as you then have a specific object with which you can check against to determine if a value is valid or which can be iterated through to retrieve valid values. In this case, we want to choose a color during the for-loop and with this approach we can just choose an arbitrary element from the colors list. To change the aesthetic, it's simply a matter of reorganizing the list rather than finding and changing all the hard-coded values.

The colors and center of the canvas are the only values needed to be determined before the loop. Actually, that's not quite true...many of the values are randomized. The random number object is instantiated in the constructor and the variable for it is declared as an instance variable beforehand:

public partial class Window1 : Window
{
    ...
    private Random rand;
    public Window1()
        {
            ...
            rand = new Random(this.GetHashCode());
            ...
        }
    ...
}

As noted in the comments of the GetHashCode documentation, it's not very useful on its own and, I might add, really not useful as a seed for a random number generator. In this case, the object is never different so the seed will always be the same so the random numbers will always have the same sequence. You can see this by running the program more than once--it's always the same. I would rather seed it with the time the program is run, that way the user will always get something exciting so I used "Environment.TickCount" instead of "this.GetHashCode()" for my rewrite.

When I was looking at the code, I noticed that while the animation looks like each circle is being created at a different time, the loop is instantiating them all at once. I saw each animation was set with a delay and concluded that that's where the magic happens. To find out if I was right, I commented out all the animation stuff in the for-loop to leave only:

Ellipse e = new Ellipse();
byte alpha = (byte)rand.Next(96,192);
int colorIndex = rand.Next(4);
e.Stroke = new SolidColorBrush(Color.FromArgb(alpha, colors[colorIndex].R, colors[colorIndex].G, colors[colorIndex].B));
e.StrokeThickness = rand.Next(1, 4);
e.Width = 0.0;
e.Height = 0.0;
double offsetX = 16 - rand.Next(32);
double offsetY = 16 - rand.Next(32);

this.MainCanvas.Children.Add(e);                

e.SetValue(Canvas.LeftProperty, centerX + offsetX);
e.SetValue(Canvas.TopProperty, centerY + offsetY);

Note: Elipses are shapes, they need using System.Windows.Shapes; at the top.

Of course, without the animation, the circles will not grow so I set "e.Width" and "e.Height" to "10.0" for testing purposes. Curiously, those 24 little circles were in the top-left corner of the screen rather than the center. I traced the problem to not inserting this.Show(); before calling the "CreateCircles" method. What that extra line does is force the window to render along with all its child elements (namely the maximized canvas) that way the layout manager will know where the center is.

All that's left to do is animate and since I learned about that (in more detail) from both the Alarm Clock Sample and Calculator Demo, I'm not going to cover it here. I will just note that these animation do not rely on a storyboard, a random delay (offsetXAnimation.BeginTime = TimeSpan.FromSeconds(delay);) is used to make it look like the circles are created at different times, and remember to put using System.Windows.Media.Animation; at the top.

Also, this works perfectly well without the "DispatcherTimer" and "lastTick" variables. I fail to understand their use here. Perhaps I will learn later.

Concentric Rings Demo -- Part 1

2010-01-12T21:14:00.000-08:00

Finally something with more code and less markup...actually, a lot less markup. The only object in markup besides the main application window is a Canvas for drawing the rings. There will be no need to create a method akin to "InitializeComponent" this time and I will be able to really focus on C# and .NET without worrying about how to translate from XAML.

Here's the full translation of the XAML for the window:

public class Window1 : Window
{
    Canvas MainCanvas;

    public Window1()
    {
        //<window ...="" title="Concentric Rings" width="910" height="512">
        this.Title = "Concentric Rings";
        this.Width = 910;
        this.Height = 512;

        //<canvas name="MainCanvas" background="#FFE0E0E0"></canvas>
        MainCanvas = new Canvas();
        BrushConverter bc = new BrushConverter();
        SolidColorBrush brush = bc.ConvertFromString("#FFE0E0E0") as SolidColorBrush;
        MainCanvas.Background = brush;

        this.Content = MainCanvas;

    }
}

That's enough to get the window to show up with a gray canvas. The background was a little tricky. The "Background" property must be assigned a "Brush" type so I knew just setting it equal to the string wouldn't work. I noticed the "BrushConverter" class thanks to Visual Studio's autocomplete feature but I wanted to make sure I used it correctly so I searched the internet and found the perfect example. I also made a note to myself that "Canvas" comes from "System.Windows.Controls" and "BrushConverter" (as well as all other brush/color related stuff) comes from "System.Windows.Media".

All the rest of the code is already written so all I need to do is come to understand it. I want to finish the container before getting the circles to appear.

It is very useful to be able to control how the window looks to the user. Sometimes you want them to be able to resize, sometimes you want to remove the border. For the concentric rings, we want the window to be maximized, without any border or titlebar and without showing the taskbar.

These are the three important lines:

this.WindowState = WindowState.Maximized;
this.WindowStyle = WindowStyle.None;
this.ResizeMode = ResizeMode.NoResize;

I tried different combinations. Without any of those lines, the window looks like a normal application. By setting "WindowStyle.None", the titlebar (and buttons) disappear but it still has the border so it can be resized. If you keep the window style normal but set "ResizeMode.NoResize", you regain the title bar and still have a border but cannot change the size of the window. It is only with both "WindowStyle.None" and "ResizeMode.NoResize" does the boarder disappear. That's nice, but we want it to be maximized. Set "WindowState.Maximized" and you get a normal looking maximized window. Set "ResizeMode.NoResize" and magically, the taskbar disappears. What if we say it can be resized but get rid of the title bar? It still forces the taskbar away. So if we want it maximized, why go through the trouble of setting "NoResize" if it's not needed to get the look we want? Well, if you "alt-tab" to another program, you can see the taskbar, then you can right click on "Concentric Rings" and, if you set "NoResize", then you won't be able to restore the window, it will always be maximized. I personally think it would be better to have a windowed and fullscreen mode but perhaps that introduces unnecessary complications...I also think it's strange the programmer wants to force the window to stay maximized but set the "Width" and "Height" properties in XAML.

Since the window will be maximized at all times with no buttons or other GUI, it would be nice to offer a way to close the application without resorting to the "alt-tab" trick. For the last part of this part, I'll look at quitting with the "Escape" key.

It's very simple, especially if you've worked with any user interaction before. Just set the event handler for a keypress, check which key, and act appropriately:

public Window1()
{
    ...
    this.KeyDown += new System.Windows.Input.KeyEventHandler(Window1_KeyDown);
    ...
}

void Window1_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
    if (e.Key == System.Windows.Input.Key.Escape)
            this.Close();
}

This is very similar to the Calculator.

Next time, I will try to understand the use of:

System.Windows.Threading.DispatcherTimer frameTimer;
private int lastTick;
private Random rand;

We've done animation without those objects before, so why use them now?

Calculator Demo -- Part 9

2010-01-06T21:18:00.000-08:00

Getting the memory function to work was very similar to setting up the buttons so I didn't need to look up anything new. I had never seen menus for .NET yet so I did need to look up a couple things. Overall, however, it was extremely simple and didn't take much time at all.

As one would expect, rendering menus is very repetitive. I will only detail the "View" menu since that required a "checkable" menu item which makes it more interesting.

Rendering the menu
- XAML:
```
<menu dockpanel.dock="Top" height="26">
    ...
    <menuitem header="View">
         <menuitem name="StandardMenu" click="OnMenuStandard" ischeckable="true" ischecked="True" header="Standard"></menuitem>
    </menuitem>
    ...
</menu>
```
- C#:
```
Menu menu = new Menu();
DockPanel.SetDock(menu, Dock.Top);
menu.Height = 26;
...
MenuItem view = new MenuItem();
view.Header = "View";
StandardMenu = new MenuItem();
StandardMenu.Name = "StandardMenu";
StandardMenu.Click += new RoutedEventHandler(OnMenuStandard);
StandardMenu.IsCheckable = true;
StandardMenu.IsChecked = true;
StandardMenu.Header = "Standard";
view.Items.Add(StandardMenu);
menu.Items.Add(view);
...
MyPanel.Children.Add(menu);
```
- Notes:
  The menu bar is set up first and is defined to be docked to the top of the window's DockPanel. The DockPanel was set up a long time ago to hold the grid. The grid was not docked so I guess DockPanel automatically places other children one after the other if they are not explicitly docked to a certain place. Here, the menu is docked to the top with DockPanel.SetDock(menu, Dock.Top);. I had a little trouble finding that but the .NET Framework Class Library pointed me in the right direction. My other problem was how to add children to the menus because there are a lot of collections and "add" methods to the "MenuItem" class. I was told "The submenu of the MenuItem is made up of the objects within the ItemCollection of a MenuItem." but I had to do some digging to discover "Items.Add(...)" was the way to go.

Making it do something
- C#:
```
void OnMenuStandard(object sender, RoutedEventArgs e)
{
    //((MenuItem)ScientificMenu).IsChecked = false;
    ((MenuItem)StandardMenu).IsChecked = true; //for now always Standard
}
```
- Notes:
  I didn't have to change this at all. The original programmer was kind to leave a comment for how this is really supposed to work. There really should be two menu items to mirror windows calculator: one for the standard view and another for the scientific view. To keep things simple, there's no scientific view so there's no other menu item. For now, clicking this menu item keeps everything the same but it's clear how to modify it to add a scientific view, and how to manipulate other menu items.

I should mention that I declared "StandardMenu" outside all the methods so that it could be used by both the "InitializeThis" (for set-up) and "OnMenuStandard" (for action) methods.

Both versions now look and act exactly the same way (they both have the same bugs consequently). The Alarm Clock Sample port I wrote ended up having a smaller executable than the original but, for this calculator, the port is larger. That's interesting to me. I wonder where the difference lies.

Calculator Demo -- Part 8

2010-01-05T21:52:00.000-08:00

The last thing I wanted to do was complete the calculator's memory. I saved it for last because I thought it would be very simple after finishing everything else. [Unfortunatley, I lied. The memory won't be the last thing to do. I forgot about the menu, but that should be even easier.] I noticed that the original code used a class called "PaperTrail" which is the last class defined in window1.xaml.cs.

PaperTrail
- C#:
```
private class PaperTrail
{
    string args;
    
    public PaperTrail()
    {
    }
    public void AddArguments(string a)
    {
        args = a;
    }
    public void AddResult(string r)
    {
        PaperBox.Text += args + " = " + r + "\n";
    }
    public void Clear()
    {
        PaperBox.Text = string.Empty;
        args = string.Empty;
    }
}
        
```
- Notes:
  This is a very simple class. The constructor takes no arguments and does nothing. The only three methods are very simple in terms of how complex the code is but they don't do what I expected them to do. I thought something described as a "paper trail" would keep a record of the trail but it does no such thing. It calls upon "PaperBox" to keep the record.

PaperBox

C#:

        static MyTextBox PaperBox;
        ...
        PaperBox = new MyTextBox();
        Grid.SetRow(PaperBox, 1);
        Grid.SetColumn(PaperBox, 0);
        Grid.SetColumnSpan(PaperBox, 3);
        Grid.SetRowSpan(PaperBox, 5);
        PaperBox.IsReadOnly = true;
        PaperBox.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;
        PaperBox.Margin = new Thickness(3.0,1.0,1.0,1.0);
        PaperBox.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;

Notes:
You can find "PaperBox" defined at the top of the "Window1" class definition. It is simply a textbox like "DisplayBox" but subclassed differently in the "Window1" constructor to have a different size using the "SetColumnSpan" and "SetRowSpan" methods, different interaction by setting the "IsReadOnly" property to "true", and a different visual style by making the scroll bars visible, and setting up the margins.

Now that there's a place to store memory information, there need to be appropriate buttons to interact with the memory. Microsoft's programmer decided to have Memory Clear, Memory Save, Memory Recall, and Memory Plus operations. The are found in the "ProcessOperation" method //Comments by original programmer:

Memory Clear
- C#:
```
        case "BMemClear":
            Memory = 0.0F;
            DisplayMemory();
            break;
        
```
- Notes:
  The memory value is stored as a string "_mem_val" accessed through the property "Memory". Here we want to clear the memory, so the mathematical thing to do is set it to 0 (floating point of course). All of the operations which alter memory call the "DisplayMemory" method.

Memory Save
- C#:
```
        case "BMemSave":
            Memory = Convert.ToDouble(Display);
            DisplayMemory();
            EraseDisplay = true;
            break;
        
```
- Notes:
  Because of EraseDisplay = true;, if you save the display to memory when you are in the middle of an operation, you need to key-in another value (maybe the same one) if you want to perform a binary operation. That is, the number is saved to memory and continues to be displayed but any binary operation will not see it. Unary operations just take the value from the display so they will work as expected.

Memory Recall

C#:

        case "BMemRecall":
            Display = /*val =*/ Memory.ToString();
            UpdateDisplay();
            //if (LastOper != Operation.None)   //using MR is like entring a digit
                EraseDisplay = false;
            break;

Notes:
Because of "EraseDisplay = false;", memory recall is like entering a digit. I guess the commented-out partial conditional would have been to make MR act like completing a binary operation with the saved value.

Memory Plus

C#:

        case "BMemPlus":
            d = Memory + Convert.ToDouble(Display);
            Memory = d;
            DisplayMemory();
            EraseDisplay = true;
            break;

Notes:
The value in the display is added to the value in memory and then saved in memory. Like "BMemSave", this effectively erases the display so binary operations won't see it.

The DisplayMemory method is a bit naughty. It accesses "_mem_val" directly instead of through the "Memory" property. The author went through pains to start the variable name with an underscore so you would expect him to follow the practice of pretending he can't access it without the approperiate getter.... Anyway, it also uses a certain object called "BMemBox" which is defined in XAML so I had to port it to C#:

Memory Display Box

XAML:

        <textblock name="BMemBox" grid.column="3" grid.row="1" margin="10,17,10,17" grid.columnspan="2">Memory: [empty]</textblock>

C#:

        BMemBox = new TextBlock();
        BMemBox.Name = "BMemBox";
        Grid.SetColumn(BMemBox, 3);
        Grid.SetRow(BMemBox, 1);
        BMemBox.Margin = new Thickness(10.0, 17.0, 10.0, 17.0);
        Grid.SetColumnSpan(BMemBox, 2);
        BMemBox.Text = "Memory: [empty]";
        MyGrid.Children.Add(BMemBox);

Notes:
This is very similar to rendering the buttons but there's no click event. The styles are all default too.

I thought this would be the last part to the Calculator Demo series but I forgot about the menu. The next part should be the last part then I will get to choose another program to analyse.

Calculator Demo -- Part 7

2009-12-31T05:22:00.000-08:00

I discovered last time that every operation button invokes the "OperBtn_Click" event handler on click which calls the "ProcessOperation" method with the appropriate argument. I want to briefly touch upon each operation in the switch statement of both the "ProcessOperation" and "Calc" methods.

ProcessOperation //Comments by original programmer

Division
- C#:
```
                case "BDevide":
                    if (EraseDisplay)    //stil wait for a digit...
                    {  //stil wait for a digit...
                        LastOper = Operation.Devide;
                        break;
                    }
                    CalcResults();
                    LastOper = Operation.Devide;
                    LastValue = Display;
                    EraseDisplay = true;
                    break;
                
```
- Notes:
  Many of these are binary operations so if the display has not changed since the last operation that means a second number has not been entered. All of these binary operations wait for a second digit before trying to perform their respective operation or the results wouldn't make sense. Also of note is that these binary operations overwrite "LastOper" with themselves so that they will be performed when the next operation is clicked (this means the order of operations for this calculator is strictly left to right).

Multiplication

C#:

                case "BMultiply":
                    if (EraseDisplay)    //stil wait for a digit...
                    {  //stil wait for a digit...
                        LastOper = Operation.Multiply;
                        break;
                    }
                    CalcResults();
                    LastOper = Operation.Multiply;
                    LastValue = Display;
                    EraseDisplay = true;
                    break;

Notes:
Another binary operation like above so it follows the same scheme. If a division occurred before this case, "EraseDisplay" would be true so it would wait for the next digit. If a numerical key was pressed, "EraseDisplay" would be false so the last operation would be calculated (for example, division) and then "LastOper" would be set up so that the multiplication happens next (as long as a numerical key is pressed next).

Subtraction

C#:

                case "BMinus":
                    if (EraseDisplay)    //stil wait for a digit...
                    {  //stil wait for a digit...
                        LastOper = Operation.Subtract;
                        break;
                    }
                    CalcResults();
                    LastOper = Operation.Subtract;
                    LastValue = Display;
                    EraseDisplay = true;
                    break;

Notes:
If a numerical key is not pressed after the multiplication button--say, the subtraction button is pressed instead--then "LastOper" will be overridden by the subtraction. In this case, a multiplication would not be performed next, a subtraction would be in the wings.

Addition

C#:

                case "BPlus":
                    if (EraseDisplay)
                    {  //stil wait for a digit...
                        LastOper = Operation.Add;
                        break;
                    }
                    CalcResults();
                    LastOper = Operation.Add;
                    LastValue = Display;
                    EraseDisplay = true;
                    break;

Notes:
It's clear that the "ProcessOperation" method does not perform the actual operation. This method only sets up the operation for the calculation and asks for the calculation to be performed under the right conditions. One would think, it must be the "CalcResults" method which must be performing the operation. That's almost correct. As I investigated previously, "CalcResults" does one more check

Solution
- C#:
```
                case "BEqual":
                    if (EraseDisplay)    //stil wait for a digit...
                        break;
                    CalcResults();
                    EraseDisplay = true;
                    LastOper = Operation.None;
                    LastValue = Display;
                    //val = Display;
                    break;
                
                
```
- Notes:
  This isn't a binary operation so why is it waiting for a second digit? I think they just don't want "=" to override any previous operation until there's actually something to calculate. That last comment is a little puzzling to me as well. I guess there was a variable "val" used to store the result but it's not needed since the display is already holding the result so you can always query the display to get the previous result.

Take the square root
- C#:
```
                case "BSqrt":
                    LastOper = Operation.Sqrt;
                    LastValue = Display;
                    CalcResults();
                    LastValue = Display;
                    EraseDisplay = true;
                    LastOper = Operation.None;
                    break;
                
```
- Notes:
  Finally, we get an example of a unary operation. It doesn't need to check if the display is empty, it just operates on whatever is in the display. The display defaults to "0" so there's no problem pushing the square root button immediately after starting the program. All the unary operations set "LastOper" and "LastValue" at the start. They set them again after the calculation if needed just like the binary operations.

Multiply by a percent

C#:

                case "BPercent":
                    if (EraseDisplay)    //stil wait for a digit...
                    {  //stil wait for a digit...
                        LastOper = Operation.Percent;
                        break;
                    }
                    CalcResults();
                    LastOper = Operation.Percent;
                    LastValue = Display;
                    EraseDisplay = true;
                    //LastOper = Operation.None;
                    break;

Notes:
I wish percent acted as a unary operation, just dividing your number by 100 and displaying the result. But here, it is used as a binary operation for multiplying one number by another number's percentage value. You can't see that from the above except for the hint that given by the conditional that it is a binary operation. I will talk about the "Calc" method later to revisit how each operation is actually performed in code.

Take the reciprocal

C#:

                case "BOneOver":
                    LastOper = Operation.OneX;
                    LastValue = Display;
                    CalcResults();
                    LastValue = Display;
                    EraseDisplay = true;
                    LastOper = Operation.None;
                    break;

Notes:
This is the final mathematical unary operation. It doesn't look much different from case "BSqrt" except for the names.

Clear all
- C#:
```
                case "BC":
                    LastOper = Operation.None;
                    Display = LastValue = string.Empty;
                    //Paper.Clear();
                    UpdateDisplay();
                    break;
                
```
- Notes:
  This is one of the operations which doesn't perform any calculations. It only operates on some variables to, well, clear them. "LastOper" is cleared with "Operation.None", "Display" and "LastValue" are cleared with "string.Empty", and "Paper", which is the history I haven't yet looked into, is cleared with its "Clear" method.
  A couple interesting things about C# is that there is a constant "string.Empty" supplied out of the box (which actually works differently than the empty string--""--as mentioned in Part 4) and that assignment is carried out right-to-left so Display = LastValue = string.Empty; makes sense and works as expected.

Clear Entry
- C#:
```
                case "BCE":
                    LastOper = Operation.None;
                    Display = LastValue;
                    UpdateDisplay();
                    break;
                
```
- Notes:
  If you notice you've made a mistake before you push "=", you can undo it by pressing "CE". This cancels whatever operation you've asked the calculator to perform and then sets the display to the last value showing before you keyed in another. Of course, this will only work with binary operations as the unary operations automatically carry out the calculation.

Calc [I will ignore any line that references "Paper"]

Division
- C#:
```
                case Operation.Devide:
                    Paper.AddArguments(LastValue + " / " + Display);
                    d = (Convert.ToDouble(LastValue) / Convert.ToDouble(Display));
                    CheckResult(d);
                    Paper.AddResult(d.ToString());
                    break;
                
```
- Notes:
  In order to do math, all values must be numerical types. Recall that "LastValue" and "Display" are strings so they have to be converted to a numerical type. In this case, they are converted to doubles which are 64bit floating point numbers. C# doesn't complain about infinities when dealing with floating point numbers and that makes sense given the IEEE specificiation. The "CheckResult" method is used to discover values that don't make sense (for this calculator).

Addition

C#:

                case Operation.Add:
                    Paper.AddArguments(LastValue + " + " + Display);
                    d = Convert.ToDouble(LastValue) + Convert.ToDouble(Display);
                    CheckResult(d);
                    Paper.AddResult(d.ToString());
                    break;

Notes:
Recall that "LastValue" is the value shown in the display before the second operand is entered and "Display" is what is shown to the user. At this point, "Display" still holds the value of the second operand. The display will be updated after the final answer, stored in "d" is returned to the "CalcResults" method.

Multiplication

C#:

                case Operation.Multiply:
                    Paper.AddArguments(LastValue + " * " + Display);
                    d = Convert.ToDouble(LastValue) * Convert.ToDouble(Display);
                    CheckResult(d);
                    Paper.AddResult(d.ToString());
                    break;

Notes:
For all of these operations, you just need to look at the assignment to "d" for how the operation is performed. Here, we want to multiply so "LastValue" and "Display" are converted from strings to doubles and then multiplied with the result stored in "d".

Multiply by a percent

C#:

                case Operation.Percent:
                    //Note: this is different (but make more sense) then Windows calculator
                    Paper.AddArguments(LastValue + " % " + Display);
                    d = (Convert.ToDouble(LastValue) * Convert.ToDouble(Display)) / 100.0F;
                    CheckResult(d);
                    Paper.AddResult(d.ToString());
                    break;

Notes:
I don't think this makes more sense than Windows calculator. I would prefer the percent operation to be unary and simply divide the current display by 100 to get ready for whatever operation you want to perform next. When I read 50%, I think of 50/100 = 0.5 and end it. I don't think of 50 * 1 / 100. And I definitely don't think of a binary operation.

Subtraction

C#:

                case Operation.Subtract:
                    Paper.AddArguments(LastValue + " - " + Display);
                    d = Convert.ToDouble(LastValue) - Convert.ToDouble(Display);
                    CheckResult(d);
                    Paper.AddResult(d.ToString());
                    break;

Notes:
The .NET Framework defines a lot of conversion methods within a variety of classes. I haven't looked at them all yet. And that doesn't even include all the different object castings you can perform.

Take the square root

C#:

                case Operation.Sqrt:
                    Paper.AddArguments("Sqrt( " + LastValue + " )");
                    d = Math.Sqrt(Convert.ToDouble(LastValue));
                    CheckResult(d);
                    Paper.AddResult(d.ToString());
                    break;

Notes:
C# doesn't include a native Sqrt operation so it is implemented in the Math namespace.

Take the reciprocal

C#:

                case Operation.OneX:
                    Paper.AddArguments("1 / " + LastValue);
                    d = 1.0F / Convert.ToDouble(LastValue);
                    CheckResult(d);
                    Paper.AddResult(d.ToString());
                    break;

Notes:

This programmer is very OCD about making sure all the numbers are represented as floating points. You don't need to but it's good practice to choose one way and stick to it. Here's a little something I made to test how division in particular is handled:

                using System;
                
                namespace testconsole
                {
                    class Program
                    {
                        static void Main(string[] args)
                        {
                            Console.WriteLine(7 / 2);
                            Console.WriteLine(7 / 2.0);
                            Console.WriteLine(7 / 2F);
                            Console.WriteLine(7 / 2.0F);
                            
                            Console.WriteLine(7.0 / 2);
                            Console.WriteLine(7.0 / 2.0);
                            Console.WriteLine(7.0 / 2F);
                            Console.WriteLine(7.0 / 2.0F);
                            
                            Console.WriteLine(7F / 2);
                            Console.WriteLine(7F / 2.0);
                            Console.WriteLine(7F / 2F);
                            Console.WriteLine(7F / 2.0F);
                            
                            Console.WriteLine(7.0F / 2);
                            Console.WriteLine(7.0F / 2.0);
                            Console.WriteLine(7.0F / 2F);
                            Console.WriteLine(7.0F / 2.0F);
                            
                            Console.ReadLine();
                        }
                    }
                }

Result:
3
3.5
3.5
3.5
3.5
3.5
3.5
3.5
3.5
3.5
3.5
3.5
3.5
3.5
3.5
3.5

Of course, there are other ways to convert integers to floats but those are the most common shorthands.

CheckResults:

Discover invalid numbers

C#:

                private void CheckResult(double d)
                {
                    if (Double.IsNegativeInfinity(d) || Double.IsPositiveInfinity(d) || Double.IsNaN(d))
                        throw new Exception("Illegal value");
                }

Notes:
There is very useful stuff to remember here. The facts that Double has a method to check for +/- infinity as well as values which are not numbers (NaN) and throwing exceptions. Very handy.

All that's left is displaying the memory and history (paper trail).

Calculator Demo -- Part 6

2009-12-23T17:44:00.000-08:00

For the sake of organization and time, I have completed the animations as promised and I added all the other buttons to the grid. However, I only fully implemented the "+/-" operation because I thought it best to visit each operation in the next part.

Rendering the buttons

XAML:

<Button Name="BPM" Click="OperBtn_Click" Background="Darkgray" Style="{StaticResource DigitBtn}"  Grid.Column="6" Grid.Row="5" >+/-</Button>

C#:

Button BPM = new Button();
BPM.Name = "BPM";
BPM.Click += new RoutedEventHandler(OperBtn_Click);
BPM.Background = Brushes.DarkGray;
BPM.Style = DigitBtn; //try without resources
Grid.SetColumn(BPM, 6);
Grid.SetRow(BPM, 5);
BPM.Content = "+/-";
MyGrid.Children.Add(BPM);

Notes:
This is exactly as the buttons I looked at previously except with a different event handler: BPM.Click += new RoutedEventHandler(OperBtn_Click);. Also, when doing some of the other operations there is a tooltip property set (eg. BMemPlus.ToolTip = "Add To Memory"; for the "M+" button).

I wanted the "+/-" button to work as expected so I followed the Click event:

OperBtn_Click
- C#:
```
    private void OperBtn_Click(object sender, RoutedEventArgs e)
    {
        ProcessOperation(((Button)sender).Name.ToString());
    }
    
```
- Notes:
  All the buttons have their name properties set. In the case of the "+/-" button we have BPM.Name = "BPM";. When the above handler is invoked it will then pass the name of the button as an argument to the ProcessOperation method.

ProcessOperation
- C#:
```
    private void ProcessOperation(string s)
    {
        Double d = 0.0;
        switch (s)
        {
            case "BPM":
            LastOper = Operation.Negate;
            LastValue = Display;
            CalcResults();
            LastValue = Display;
            EraseDisplay = true;
            LastOper = Operation.None;
            break;
            ...
        }
    }
    
```
- Notes:
  Here we see what happens when calling ProcessOperation("BPM");. The variable "d" is not applicable to this case. First, the most recently clicked operation is saved into "LastOper" and the most recent value displayed is saved into "LastValue". By doing this before the calculation, the program is overriding whatever operation was clicked beforehand (that means, if you try to do "2*-2" by clicking "2,*,2,+/-" the multiplication will be forgotten). "LastValue" and "LastOper" deserve a closer look later. Next, the calculation is performed by calling "CalcResults". When the calculation is completed, the current display is again saved however the operation is set to null which is force other operations to not negate again. It is very important to do it this way because this calculator works with infix notation. When I first saw EraseDisplay = true; I thought it meant to actually erase the display but that doesn't make sense. What it is actually doing is taking a note so that the next operation will know whether it should erase the display (in the case of "ProcessKey") or whether to simply treat the display as empty (as in several cases of "ProcessOperation").

Operation LastOper
- C#:
```
    private enum Operation
    {
        None,
        Devide,
        Multiply,
        Subtract,
        Add,
        Percent,
        Sqrt,
        OneX,
        Negate
    }
    private Operation LastOper;
    
```
- Notes:
  I've used enums before for setting many properties in but the Alarm Clock Sample and this Calculator Demo but this is the first time I've really seen how they are useful. Here, they set us up so it will be very clear which operation is being used and we don't need to deal with strings. The compiler gives them numbers which is good for computers and we get a descriptive name which is good for us.

LastValue
- C#:
```
    private string LastValue
    {
        get
        {
            if (_last_val == string.Empty)
            return "0";
            return _last_val;
        }
        set
        {
            _last_val = value;
        }
    }
    
```
- Notes:
  This is a very simple property declaration but it shows us exactly why getters and setters are useful. This is a calculator application and it's not very mathematical to show an empty display area so it checks if the last value is an empty string (from "Clear All") and returns the string "0".

CalcResults
- C#:
```
    private void CalcResults()
    {
        double d;
        if (LastOper == Operation.None)
            return;
        
        d = Calc(LastOper);
        Display = d.ToString();
        
        UpdateDisplay();
    }
    
```
- Notes:
  First, a variable, "d", is declared to save the numerical result of the upcoming calculation. If there is no operation to be performed (as is the case after "+/-" is completed), this method just returns and nothing happens. However, if there is an operation to be performed it calls the "Calc" method to do the dirty work. The result of the operation is sent to the display and the display is updated. Again, I am very aware of object oriented programming at work (I guess it's actually more of an example of procedural programming since all these functions/methods are in the same class).

Calc
- C#:
```
    private double Calc(Operation LastOper)
    {
        double d = 0.0;
        
        try {
            switch (LastOper)
            {
                ...
                case Operation.Negate:
                d = Convert.ToDouble(LastValue) * (-1.0F);
                break;
            }
        }
        catch {
            d = 0;
            Window parent = (Window)MyPanel.Parent;
            //Paper.AddResult("Error");
            MessageBox.Show(parent, "Operation cannot be perfomed", parent.Title);
        }
        
        return d;
    }
    
```
- Notes:
  Again, I am only highlighting "+/-". The variable "d" is used store the result of the calculation and then we come to a Try/Catch block for exception handling. Many of the operations check the calculation to make sure there's nothing strange like infinities and then throw an exception which will be caught by the "catch" block. I will look at those next time. Notice the Operation.Negate case won't forcefully throw an exception since it's only multiplying the last value displayed by negative one and the last value should have already been checked for sanity. However, if something were to go wrong we can see that the error will be noted by adding it to "Paper" (not relevant now) and a standard message box will be rendered.

When you click on a button, a lot of things happen. I think it's really good that I chose to continue the Calculator Demo. In this part, I got to understand enums, try/except, and a bit more about properties and modular code. I will go through the other operations in the next part though I won't have to be nearly as detailed as here.

[update Jan 15, 2010]

I just noticed, I never actually talked about the animation though I did actually complete them at the time.

I will simply post my code with comments (these go in "InitializeThis"):

    ...
    //<Storyboard x:Key="playStoryboard">
    Storyboard playStoryboard = new Storyboard();
    this.RegisterName("playStoryboard", playStoryboard);
    //  <DoubleAnimation From="50"  To="40" Duration="0:0:0.25" RepeatBehavior="1x" AutoReverse="True" 
    //      Storyboard.TargetName="TB" Storyboard.TargetProperty="(Ellipse.Height)"/>
    DoubleAnimation TBHeightAnimation = new DoubleAnimation(50.0, 40.0, new Duration(new TimeSpan(0, 0, 0, 0, 250))); //guess
    TBHeightAnimation.RepeatBehavior = new RepeatBehavior(1.0); //1x gives the error "cannot implicitly convert int to RepeatBehaviour"
    TBHeightAnimation.AutoReverse = true;
    Storyboard.SetTargetName(TBHeightAnimation, "TB");
    Storyboard.SetTargetProperty(TBHeightAnimation, new PropertyPath(Ellipse.HeightProperty));
    playStoryboard.Children.Add(TBHeightAnimation);
    
    //  <DoubleAnimation From="50"  To="44" Duration="0:0:0.25" RepeatBehavior="1x" AutoReverse="True" 
    //      Storyboard.TargetName="TB" Storyboard.TargetProperty="(Ellipse.Width)"/>
    DoubleAnimation TBWidthAnimation = new DoubleAnimation(50.0, 44.0, new Duration(new TimeSpan(0, 0, 0, 0, 250)));
    TBWidthAnimation.RepeatBehavior = new RepeatBehavior(1.0);
    TBWidthAnimation.AutoReverse = true;
    Storyboard.SetTargetName(TBWidthAnimation, "TB");
    Storyboard.SetTargetProperty(TBWidthAnimation, new PropertyPath(Ellipse.WidthProperty));
    playStoryboard.Children.Add(TBWidthAnimation);
    //</Storyboard>
    MyGrid.Resources.Add("playStoryboard", playStoryboard);
    /* The animations make the ellipses become circles... (including Microsoft's) */
    ...

Near the definition of setter4

    this.RegisterName("TB", TB);
    ...
    //<ControlTemplate.Triggers>
    //    <Trigger Property="IsMouseOver" Value="true">
    Trigger IMO = new Trigger();
    IMO.Property = Button.IsMouseOverProperty; //guess
    IMO.Value = true;
    //        <Setter TargetName="TB" Property="Ellipse.Fill" Value="Lightblue" />
    Setter IMOSetter = new Setter(Ellipse.FillProperty, Brushes.LightBlue, "TB");
    IMO.Setters.Add(IMOSetter);
    //    </Trigger>
    ct.Triggers.Add(IMO);
    
    //    <Trigger Property="IsPressed" Value="true">
    Trigger IP = new Trigger();
    IP.Property = Button.IsPressedProperty;
    IP.Value = true;
    //        <Setter TargetName="TB" Property="Ellipse.Fill" Value="Blue" />
    Setter IPSetter = new Setter(Ellipse.FillProperty, Brushes.Blue, "TB");
    IP.Setters.Add(IPSetter);
    //    </Trigger>
    ct.Triggers.Add(IP);
    
    //    <EventTrigger RoutedEvent="ButtonBase.Click">
    //http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.buttonbase.aspx
    EventTrigger BBC = new EventTrigger(System.Windows.Controls.Primitives.ButtonBase.ClickEvent);
    //        <EventTrigger.Actions>
    //            <BeginStoryboard Name="playStoryboard" Storyboard="{StaticResource playStoryboard}"/>
    BeginStoryboard BsPs = new BeginStoryboard();
    BsPs.Storyboard = (Storyboard)MyGrid.Resources["playStoryboard"];
    BsPs.Name = "playStoryboard";
    //        </EventTrigger.Actions>
    BBC.Actions.Add(BsPs);
    //    </EventTrigger>
    ct.Triggers.Add(BBC);
    //</ControlTemplate.Triggers>

[/update]

Calculator Demo — Part 5

2009-12-20T00:46:00.000-08:00

It took so much effort to style the buttons that I'm not going to do the animations until next time. Instead of playing around with the animations like I said I would, I just made sure pressing the buttons would put the respective value into the display area.

I had to do a lot of research to translate the XAML for this part into C# so I will follow the same structure that I tried in Alarm Clock Sample — Part 6 (this time using the ~~sourcecode shortcode~~ Syntax Highlighter).

Defining the button style
- XAML:
```
<Style x:Key="DigitBtn"  TargetType="{x:Type Button}">
```
- C#:
```
         Style DigitBtn = new Style();
         DigitBtn.TargetType = typeof(Button);
```
- Notes:
  I simply looked up the x:Type Markup Extension and followed my nose after reading "x:Type is essentially a markup extension equivalent for a typeof() operator in C#". Basically, this is telling the complier that the program will only be applying this style to Button objects.
Setting the "Focusable" property
- XAML:
```
<Setter Property="Focusable" Value="False"/>
```
- C#:
```
Setter setter1 = new Setter(Button.FocusableProperty, false);
DigitBtn.Setters.Add(setter1);
```
- Notes:
  Since this is the first "Setter" I've seen, I needed to look up the constructor. However, I still didn't understand what all this was for until I read WPF Data Binding - DataTriggers though I only cared about the Data Binding part. It seems that because we are targeting buttons, we can set any properties that buttons have. This really makes me think of CSS classes because this program is going to have a bunch of buttons all with the same style so it makes sense to set up the style first and then, when you create the button element, you specify which style to use (similar to <input type="button" value="Submit" class="DigitBtn"> for HTML+CSS).
Setting the "FontSize" property
- XAML:
```
<Setter Property="FontSize" Value="14pt"/>
```
- C#:
```
LengthConverter lc = new LengthConverter();
string qualifiedDouble = "14pt";
Setter setter2 = new Setter(Button.FontSizeProperty, lc.ConvertFrom(qualifiedDouble));
DigitBtn.Setters.Add(setter2);
```
- Notes:
  Wow, so much work for something so simple. I would have never guessed this on my own...I know, I tried for quite a while. Thankfully, someone from the internets had the answer (and a pretty good explanation).
Setting the "Margin" property
- XAML:
```
<Setter Property="Margin" Value="0"/>
```
- C#:
```
Setter setter3 = new Setter(Button.MarginProperty, new Thickness(0));
DigitBtn.Setters.Add(setter3);
```
- Notes:
  Who would have guessed margins take values of Thickness Structures? It makes sense now that I look closer. Instead of specifying that something has a left, top, bottom, and right margin you just say it has a margin and you define a margin to be something that has left, top, bottom, and right properties.

The final property "Template" is much more involved so I will describe what I did from the inside-out. Of course, I didn't deal with any animations or other triggers. I just wanted the buttons to show up and work.

Presenting the button's content
- XAML:
```
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
```
- C#:
```
FrameworkElementFactory CP = new FrameworkElementFactory(typeof(ContentPresenter));
Binding TBinding = new Binding("Content"){RelativeSource = RelativeSource.TemplatedParent, Mode = BindingMode.OneWay};
CP.SetValue(ContentPresenter.ContentProperty, TBinding);
CP.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Center);
CP.SetValue(VerticalAlignmentProperty, VerticalAlignment.Center);
```
- Notes:
  All of this gets nested inside a ControlTemplate which was giving me a lot of problems because it doesn't work the same way as other containers (in C#--they all look the same in XAML). Fortunately, a quick Google search came up with Changing the drawing style of a button from code which introduced me to FrameworkElementFactory. I had to read two more sources of information to figure out Content="{TemplateBinding Content}": one, TemplateBinding Markup Extension, told me that "A TemplateBinding is an optimized form of a Binding for template scenarios, analogous to a Binding constructed with {Binding RelativeSource={RelativeSource TemplatedParent} Mode=OneWay}."; two, How to: Create a Binding in Code, had an extremely useful comment by LukeSkywalker (of all people). I tried running the code without the ContentPresenter and, lo and behold, the button's content, which holds the text, didn't show.

Styling the Button

XAML:

<Ellipse Width="57" Height="49" x:Name="TB"  StrokeThickness="1" Stroke="{TemplateBinding Foreground}" Fill="{TemplateBinding Background}" HorizontalAlignment="Center" VerticalAlignment="Center" />

C#:

FrameworkElementFactory TB = new FrameworkElementFactory(typeof(Ellipse), "TB");
TB.SetValue(Ellipse.WidthProperty, 57.0);
TB.SetValue(Ellipse.HeightProperty, 49.0);
TB.SetValue(Ellipse.StrokeThicknessProperty, 1.0);
TB.SetValue(Ellipse.StrokeProperty, new Binding("Foreground") { RelativeSource = RelativeSource.TemplatedParent, Mode = BindingMode.OneWay });
TB.SetValue(Ellipse.FillProperty, new Binding("Background") { RelativeSource = RelativeSource.TemplatedParent, Mode = BindingMode.OneWay });
TB.SetValue(Ellipse.HorizontalAlignmentProperty, HorizontalAlignment.Center);
TB.SetValue(Ellipse.VerticalAlignmentProperty, VerticalAlignment.Center);

Notes:
I quickly discovered, thanks to the compiler, that Height, Width and StrokeThickness need to have values of type Double so I simply added the decimal point to squash those errors. As for the bindings, this time I went for in-line declarations. I think that looks more organized.

Completing the Template setter
- XAML:
```
<Setter Property="Template">
 <Setter.Value>
     <ControlTemplate TargetType="{x:Type Button}">
         <Grid Width="60" Height="50">
             ...
         </Grid>
     </ControlTemplate>
 </Setter.Value>
</Setter>
```
- C#:
```
Setter setter4 = new Setter();
setter4.Property = Button.TemplateProperty;

ControlTemplate ct = new ControlTemplate(typeof(Button));

FrameworkElementFactory grid = new FrameworkElementFactory(typeof(Grid));
grid.SetValue(Grid.WidthProperty, 60.0);
grid.SetValue(Grid.HeightProperty, 50.0);

...

grid.AppendChild(TB);
grid.AppendChild(CP);

ct.VisualTree = grid;

setter4.Value = ct;
DigitBtn.Setters.Add(setter4);
```
- Notes:
  Because I was going to have to separate this setter's Value property, I used the empty constructor and then acted on the instance. Setting the setter's property property (that was fun to write) was as straight forward as the others. To set the setter's value property, I first created a ControlTemplate targeting a Button. Then I created a grid to hold the Ellipse and ContentPresenter. After instantiating the object to go into the grid, I discovered that I couldn't treat this grid object like I have before because it's actually a FrameworkElementFactory object. It was easy to find out how to add children to it though. Finally, thanks to Douglass Stockwell, I knew how to use VisualTree to complete the setter.
Adding the style to the main grid
- XAML:
```
<Grid.Resources >
 ...
 </Style>
</Grid.Resources>
```
- C#:
```
MyGrid.Resources.Add("DigitBtn", DigitBtn);
```
- Notes:
  The style is defined inside the "Grid.Resources" tag so I added the style to MyGrid.Resources collection in the same way as adding the storyboard to the Window.Resources collection of the Alarm Clock Sample.

Now that I got the style set up, I moved on to rendering the buttons. This part is just copy/paste once you get the first button to show. (In fact, I think it's so copy/paste that I might rewrite it using a loop.)

It was a little tricky for me because I haven't dealt with this level of customized UI before (at least with C#. I have done a complex GUI in Python with TkInter but TkInter's grid and pack managers are much less sophisticated).

Initializing the grid
- XAML:
```
   <Grid.ColumnDefinitions>
     <ColumnDefinition/>
     ...
     <ColumnDefinition/>
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
     <RowDefinition/>
     ...
     <RowDefinition/>
   </Grid.RowDefinitions>
```
- C#:
```
MyGrid.ColumnDefinitions.Add(new ColumnDefinition());
...
MyGrid.RowDefinitions.Add(new RowDefinition());
```
- Notes:
  I tried rendering a button without this and it just overlapped with the DisplayBox. The grid geometry manager in TkInter automatically creates the cells and I assumed WPF grids worked the same. I saw all this XAML which did nothing but create default objects and thought, the code doesn't need this, but I was wrong. You explicitly have to create the rows and columns first, otherwise every visual object will overlap even if you've told the grid to put it somewhere else.
Creating the buttons
- XAML:
```
<Button Name="B7" Click="DigitBtn_Click" Style="{StaticResource DigitBtn}" Grid.Column="4" Grid.Row="2">7</Button>
...
```
- C#:
```
Button B7 = new Button();
B7.Name = "B7";
B7.Click += new RoutedEventHandler(DigitBtn_Click);
B7.Style = MyGrid.Resources["DigitBtn"] as Style;
Grid.SetColumn(B7, 4);
Grid.SetRow(B7, 2);
B7.Content = "7";
MyGrid.Children.Add(B7);
```
- Notes:
  It all made sense until the little "7" stuck between the tags. I looked up how to get the text for a button to show up and that led me to the wrong Button Class. It was telling me to set the Button.Text property but the compiler told me it doesn't exist. Someone else said, "WPF C# .text not working" and later said they were being an idiot because one should set the Button.Content property. I went back to the .NET Framework Class Library and discovered that I, too, was being an idiot because the correct place to look is the System.Windows.Controls.Button Class which does, indeed, have a Button.Content property. Oh, and also note "as Style" when grabbing the Style resource. In the Alarm Clock Sample, the storyboard resource is grabbed with a cast (Storyboard)clockWindow.Resources["clockHandStoryboard"]. The big difference between using a cast and using "as" is a cast will raise an exception but "as" will just yield null.

I then copied the DigitBtn_Click method into my Window1 class and now my unfinished calculator is at least looking much more finished. (I still don't know why they are converting the string into a character array instead of indexing the string itself...)

I planned on animating the buttons in this installment but just getting the buttons to render correctly was enough work for this time. I promise to do the animations next. I may even add in the operations.

Calculator Demo -- Part 4

2009-12-14T03:01:00.000-08:00

After getting the window working, I wanted some interaction. I looked at "ProcessKey()" to get started. I simply uncommented it in the "OnWindowKeyDown" method and then followed the code until there were no build errors.

It's a very simple method as OOP recommends (I put in my own comments):

private void ProcessKey(char c) { if (EraseDisplay) //EraseDisplay is a property { Display = string.Empty; //Display is a property EraseDisplay = false; } AddToDisplay(c); }

This method first checks if we want to erase the display. (As commented, EraseDisplay and Display are properties of this class which I will look at next.) It then clears the Display property if need be and then calls a method to add the newly pressed character to the display.

Properties are a really cool feature of C#. This tutorial by C# Station is a great introduction to how they can be used. Basically, they take away all the hassle of using getter/setter methods while still allowing you to customize how getting/setting is performed. The EraseDisplay and Display properties are as simple as you can get -- and they could easily be removed to use the naked variables "_erasediplay" [sic] and "_display" -- but, by structuring the code so that those variables be handled through properties allows for expansion such as validation or calling subroutines, etc.

Lastly, "AddToDisplay" is called. I think the programmer for this one wanted to make an example of nesting conditionals because it seems unnecessary (and I would have done it differently). Anyway, it starts by checking if a decimal point is already displayed. I've seen something like "IndexOf" in Python. It simply returns the index of the position in the string of the character you're looking for. String indexes start at 0 so if it returns a number greater than or equal to 0 then it does appear in the string and the method returns without changing the display (what number system uses more than one decimal point?) otherwise, it inserts the decimal point at the end. If the user presses a number the next conditional gets invoked which simply inserts the number at the end. If the user presses backspace, the final conditional is invoked which removes a single character from the end or sets the display to empty if there are no more characters to remove. Finally, and in any situation except the forced return, there is a call to "UpdateDisplay".

I'm definitely getting a better understanding of OOP principles. Each method above is focused on a single task and, if it needs to do something tangential to its core function, it calls upon another method to do that job. "ProcessKey" only exists to get the display ready before sending the character onto "AddToDisplay" which which does the work of altering the state of the display before calling "UpdateDisplay" which actually renders the new state.

The "UpdateDisplay" method warrants a closer look because it is so simple yet does so much (and there's a lot of interesting stuff to talk about):

private void UpdateDisplay() { if (Display == String.Empty) //String.Empty vs Display.Length == 0 DisplayBox.Text = "0"; //DisplayBox is of type MyTextBox initialized in the constructor else DisplayBox.Text = Display; }

I say this method is simple because all it does is check if the display is empty and sets the text of "DisplayBox" (what the user sees) to 0 or to whatever value is in Display. I say it does so much because it makes use of a conditional, an interesting compare, and introduces a GUI element that it must alter.

Back when I was working on the Alarm Clock Sample, I came across a website that compared String.Empty with Foo.Length tests. I found another article which explains why the length test would work so much faster. I would like someone to explain why it is ever useful because I intend to never use it in my own code from now on.

Now for the GUI. I first noticed "DisplayBox" is an instance of the class "MyTextBox" which is defined in the file mytextbox.cs. It inherits from "System.Windows.Controls.TextBox" and only overrides the "OnPreviewGotKeyboardFocus" event handler method and is being used exactly as recommended: mark it as handled and then invoke the base class implementation to keep the train rolling. Second, I saw that the "DisplayBox" instance is added to the layout by use of the Grid. The grid is setup with XAML so I stuck it in my "InitializeThis" method:

//<DockPanel Name="MyPanel"> MyPanel = new DockPanel(); // MyGrid = new Grid(); MyGrid.Name = "MyGrid"; MyGrid.Background = Brushes.Wheat; MyGrid.ShowGridLines = false; // MyPanel.Children.Add(MyGrid); // this.Content = MyPanel;

I declared each instance variable outside the methods and marked them as "static" because they are logically contained within the entire and every "window1" object. The rest of the code is a direct translation from XAML based on what I came to understand previously so I won't explain it further. However, I will explain my understanding of how "Grid" works. Again, I have to thank my Python experience for this. We tell the "DockPanel" that a Grid will manage the position and geometry of specified GUI objects (widgets). The Grid in .NET is much more sophisticated than TkInter in that you can specify many aspects of the Grid's display rather than simply indicate how it will manage geometry, and, you must specify which objects will be managed by the Grid. The content of the window is then set as the "DockPanel" so it knows what to render for viewing.

I will implement the button animations next to flesh out the GUI, play around with animations again, and get ready for implementing operations.

Calculator Demo -- Part 3

2009-12-12T06:19:00.000-08:00

I have quite a lot going on now so I haven't been working on this much but I did get around to implementing the basic window for the Calculator. I did it in almost exactly the same way as the Alarm Clock Sample. I created a file myapp.cs and put in a Main() method, added a startup event handler, and then copied the rest of the file from the original version like so:

public class app : Application { [STAThread] public static void Main() { app wpfcalculator = new app(); wpfcalculator.Run(); } app() { this.Startup += new StartupEventHandler(AppStartingUp); } void AppStartingUp(object sender, StartupEventArgs e) { Window1 mainWindow = new Window1(); mainWindow.Show(); } }

Then, I created a file window1.cs to, at this point, write the corresponding C# code for the XAML:

<Window x:Class="WPFCalculator.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Calculator" Height="400" Width="600" ResizeMode="CanMinimize" Icon="AppIcon.ico" TextInput="OnWindowKeyDown" >

The difference this time being I created a method "InitializeThis()" which will contain all the translated XAML to correspond to "InitializeComponent()" which is normally used to parse XAML. So what I ended up with is:

void InitializeThis() { this.Title = "WPF Calculator"; this.Height = 400; this.Width = 600; this.ResizeMode = ResizeMode.CanMinimize; Uri iconUri = new Uri("appicon.ico", UriKind.Relative); this.Icon = System.Windows.Media.Imaging.BitmapFrame.Create(iconUri); this.TextInput += new System.Windows.Input.TextCompositionEventHandler(OnWindowKeyDown); }

I think it's a good idea to take all that out of the constructor. The code will be much easier to follow.

I must be getting used to .NET after going through the Alarm Clock Sample because I didn't even blink when I wrote this.ResizeMode = ResizeMode.CanMinimize;--it just seemed right that "ResizeMode" must be set to a certain value which would be enumerated and encapsulated in the "ResizeMode" object/method [update: looks more like its overloaded to be both an Enum object and a Property] itself. I also had a feeling that something like ~~this.Icon = "appicon.ico"~~ wouldn't work so I looked up the Window.Icon Property. The example given there, however, assumes that the icon resource is compiled along with the application but I wanted to use an external file so I just used the same idea as the window image used in the Alarm Clock Sample. The TextInput event handler code wrote itself using Visual Studio but I understand it.

As for "OnWindowKeyDown", I simply copied it. I don't like to just copy and paste when I'm learning so I typed it out. Of course, I didn't want to rewrite the whole program in one go so I didn't copy method calls:

private void OnWindowKeyDown(object sender, System.Windows.Input.TextCompositionEventArgs e) { string s = e.Text; char c = (s.ToCharArray())[0]; e.Handled = true; if ((c >= '0' && c <= '9') || c == '.' || c == '\b') // '\b' is backspace { return; } switch (c) { case '+': break; case '-': break; case '*': break; case '/': break; case '%': break; case '=': break; } }

There's some interesting stuff there about C#, .NET, and programming practice.

As in the Alarm Clock Sample, event handlers need to accept certain arguments and, because C# is strongly typed, they need to accept very specific arguments. Here, an event object of type "System.Windows.Input.TextCompositionEventArgs" is accepted and that holds interesting information in its "Text" member. If any key is pressed we just want the first character of that key's associated sequence so that's what is copied into a variable and then we don't care about the event anymore so flag it as "handled". (I thought I read that strings can be indexed to retrieve characters so I tried changing the code to simply char c = e.Text[0]; and there was no problem compiling. I'm not sure why Microsoft wrote it differently but perhaps it's because of how unicode works.)

The use of "if" and "switch" blocks is the most fun part of this method. The keys which would be used to update the display (numerical, the decimal point, and backspace) are all handled similarly and they are used the most so they are checked simultaneously by the "if" statement before anything else. Note (c >= '0' && c <= '9') shows that characters can be ordered in C# (ASCII FTW).The operation characters are then checked by a "switch" statement. This makes sense because they each have a very different function, and it just looks better than "if (c == '+' || c == '-' || ... || c == '=')" especially if you're going to add more (key binded) operations later.

Next, I think I will check out "ProcessKey()" and however you get those keys to display.

Calculator Demo — Part 2

2009-12-09T21:32:00.000-08:00

By completing the Alarm Clock Sample, I got a pretty good understanding of how to program Windows Presentation Foundation using only C# and how XAML files are related to the .NET Class Library.

The calculator demo is a lot less intimidating now so I want to go back to it. Again, I will try to implement it using only C#. Translating the XAML into C# will still be difficult because of the heavily nested code seen in window1.xaml but it should be much easier now that I understand the syntax much more clearly. More interestingly, there is a lot of C# already used for the code-behind. In fact, there's more C# than XAML so I'm hoping that what I learn from this project will be more relevant to the subject of this blog.

I'm assuming I don't need to look at resources.cs, resources.resx, settings.cs, or settings.settings because they were useless in porting the Alarm Clock Sample. I fully understand what's going on in app.xaml and app.xaml.cs thanks to my earlier research. A new "window1" object is instantiated on startup. It is defined by window1.xaml and window1.xaml.cs.

Immediately, I notice that window1.xaml is heavy on buttons and grid. Grid must be a kind of layout manager (in Tkinter for Python there is also a grid geometry manager and they probably work similarly). It will be very worthwhile to come to an understanding about layout. There's also a little bit about a menu (which is also useful to learn), simpler animation than the Alarm Clock Sample, and one instance of a TextBlock. My initial perusal has convinced me that a "TextBlock" is not the same as a "TextBox".

There is a definition of class called MyTextBox in mytextbox.cs which inherits from the TextBox class and the only purpose seems to be to override a specific eventhandler: OnPreviewGotKeyboardFocus. I'll figure the reason in the next installment but, for now, I'm satisfied with knowing it's used in window1.xaml.cs along with the really interesting looking PaperTrail class.

As I mentioned before, window1.xaml.cs has a lot of program logic in it so I think it will be fun to go through to try to understand.

Alarm Clock Sample -- Part 6

2009-12-08T22:54:00.000-08:00

The most annoying part of losing the XAML was making the animations work. Looking back, it seems pretty simple but getting there led me to a lot of frustration.

Every framework element has a resources property but that page doesn't get into detail about using the resource property without XAML. I had to figure it out from other code. After <Window.Resources> in traditionalclock.xaml, you come across the Storyboard Class, the website for which offers a good example of using it in C# but does not mention the ParallelTimeline Class which is used next in the file. Again, the documentation from Microsoft offers no help about using it without XAML.

The tutorial Particle Effects in WPF was very helpful in showing me that you must add animation types to the ParallelTimeline by registering them as children of the ParallelTimeline. However, I still wasn't able to get the animation working (I was either getting no build errors with the no animation or build errors that told me I didn't yet know what I was doing. It wasn't until I came across a much more advanced animation example when I finally understood everything I was doing wrong and what I needed to do right. (Now, that I look at that example again, I see it comes from a set of very nice examples which give pure C# representations alongside XAML + C# code-behind).

Anyway, here's the play-by-play:

Setting up the Storyboard

XAML:

        <Window.Resources>
        <Storyboard x:Key="clockHandStoryboard">
        <ParallelTimeline>
        <DoubleAnimation From="-9" To="351" Duration="00:01:00" RepeatBehavior="Forever" Storyboard.TargetProperty="Angle" Storyboard.TargetName="secondHandAngle"/>
        ...[other DoubleAnimation code is similar]...
        </ParallelTimeline>
        </Storyboard>
        </Window.Resources>

C#:

        NameScope.SetNameScope(this, new NameScope());
        Storyboard clockHandStoryboard = new Storyboard();
        ParallelTimeline pt = new ParallelTimeline(TimeSpan.FromSeconds(0));
        DoubleAnimation secondHandAnimation = new DoubleAnimation(-9, 351, new Duration(new TimeSpan(0, 1, 0)));
        Storyboard.SetTargetName(secondHandAnimation, "secondHandAngle");
        Storyboard.SetTargetProperty(secondHandAnimation, new PropertyPath(RotateTransform.AngleProperty));
        secondHandAnimation.RepeatBehavior = RepeatBehavior.Forever;
        ...
        pt.Children.Add(secondHandAnimation);
        ...
        clockHandStoryboard.Children.Add(pt);
        
        this.Resources.Add("clockHandStoryboard", clockHandStoryboard);
        this.RegisterName("clockHandStoryboard", clockHandStoryboard);

Notes:
A name scope is created for the window so that we can later register the storyboard and animation target names with the scope. A storyboard and ParallelTimeline are then instantiated to hold the animation information. Notice that to create the DoubleAnimation in C#, several steps are used whereas in XAML it is one line. "SetTargetName" specifies a string which is the name of the object, in the name scope, to be animated. Once the animations were set-up, I added them to the ParallelTimeline, then added the ParallelTimeline to the Storyboard. Finally, I added the Storyboard to the window's Resources collection since that's how it was outlined in XAML and then added its name to the name scope since that's what Microsoft suggested.

Triggering the Animation (this is the same for each hand)

XAML:

        <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
        <EventTrigger.Actions>
        <BeginStoryboard Name ="clockHandStoryboard" Storyboard="{StaticResource clockHandStoryboard}" />
        </EventTrigger.Actions>
        </EventTrigger>
        </Canvas.Triggers>

C#:

        EventTrigger canvasTrigger = new EventTrigger();
        canvasTrigger.RoutedEvent = Canvas.LoadedEvent;
        BeginStoryboard beginStory = new BeginStoryboard();
        beginStory.Name = "clockHandStoryboard";
        beginStory.Storyboard = clockHandStoryboard;
        canvasTrigger.Actions.Add(beginStory);
        clockCanvas.Triggers.Add(canvasTrigger);

Notes:
With each step towards understanding, this is getting easier and easier. Again, I noticed that the XAML and C# don't correspond exactly but it's easy for me to see now that "Canvas.Triggers" and "EventTrigger.Actions" must be some kind of collection so I immediately check for an "Add" method or "Children.Add" method.

Registering the animation
- XAML:
```
        <Polygon.RenderTransform>
        <RotateTransform x:Name="hourHandAngle" CenterX="4" CenterY="45" />
        </Polygon.RenderTransform>
    
```
- C#:
```
        RotateTransform hourHandAngle = new RotateTransform();
        this.RegisterName("hourHandAngle", hourHandAngle);
        hourHandAngle.CenterX = 4;
        hourHandAngle.CenterY = 45;
        hourHand.RenderTransform = hourHandAngle;
    
```
- Notes:
  It took me far too long to discover that you must register the transform's name. I had assumed that "x:Name" meant the transform had a "Name" property but it doesn't so I spent a long time trying different things before I looked it up in the various sources mentioned above. I don't want to rely on external sources, I want to try to figure it out myself through debugging but when you really don't understand, it's best to look it up instead of wasting time.

The pure C# clock finally works. There is no need to change assemblyinfo.cs if you want to add that information into the properties dialogue. The executable of the port is significantly smaller than the original. I guess that's because it doesn't need to hold any of the XAML information (though I would expect it to all be parsed and compiled similarly to my rewrite). Also, the original build and my new one are clearly using methods supported by Microsoft, I would have expected them to create an animation library that doesn't consume 50% cpu when looping forever. If there's another way besides "RepeatBehavior="Forever" I'd really like to know.

Alarm Clock Sample — Part 5

2009-12-07T01:57:00.000-08:00

I left off saying, I would "rewrite the Alarm Clock Sample in pure C# without help from XAML". This turned out to be much more difficult than expected. XAML hides a lot of complexity so about 80% of the time it took to rewrite it was spent looking up references and examples in the .NET Class Framework Library and other sources. It seems WPF was developed with XAML in mind and so the amount of resources which explain how to use it with C# are severely lacking. I put the source on my github account.

Firstly, every C# program must have a Main() method as an entry point. I added one to a new myapp.cs (without the "partial" modifier for the class definition) and tried to compile. It wouldn't. For some reason it was complaining about missing references but I put in the correct "using" statements and even tried copying and pasting code that was supposed to work from both Microsoft and Hello WPF (without XAML). I commented out the body of the "AppStartup" method since I didn't care about actually getting the clock to work. I just wanted to start the application. Eventually, I found Building a WPF Application by Using Command-Line Compilation which shows there are three references which do not get added by default and must be available for WPF applications. I didn't feel like typing all that in so I fired up Visual Studio and added those references. Sure enough, it compiled and ran (but could only be seen in the task manager of course).

Second, I created traditionalclock.cs so I could get at least the clock image to show in a transparent window. I copied traditionalclock.xaml.cs and commented everything except the constructor. From part 3, I knew that InitializeComponent(); was for parsing the relevant XAML so I removed it and began to look at traditionalclock.xaml.

Rendering the window

XAML:

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="clockWindow"
AllowsTransparency="true"
Background="Transparent"
WindowStyle="None"
MouseLeftButtonDown="LeftButtonDown"
>...

C#:

    this.Name = "clockWindow";
    this.AllowsTransparency=true;
    this.Background=Brushes.Transparent;
    this.WindowStyle=WindowStyle.None;
    this.MouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler(this.LeftButtonDown);

Notes:
This was the easiest code to implement because the XAML code is nearly in one-to-one correspondence to the required C# code. Notice the "MouseButtonEventHandler" comes from a different namespace than all the "using" statements.

Rendering the image
- XAML:
```
    <Canvas Name="clockCanvas" Width="292" Height="493"  >
    ...
    <Image Source="TradClock.png" Loaded="SetTime" />
    ...
    </Canvas>
```
- C#:
```
using System.Windows.Media.Imaging;
    ...
    Canvas clockCanvas = new Canvas();
    ...
    clockCanvas.Name = "clockCanvas";
    clockCanvas.Width = 292;
    clockCanvas.Height = 493;
    ...
    Image tradClock = new Image(); 
    BitmapImage bi3 = new BitmapImage();
    bi3.BeginInit();
    bi3.UriSource = new Uri("TradClock.png", UriKind.Relative);
    bi3.EndInit();
    tradClock.Source = bi3;
    tradClock.Loaded += new RoutedEventHandler(this.SetTime);
    clockCanvas.Children.Add(tradClock);
    ...
    this.Content = clockCanvas;
```
- Notes:
  I initialized "clockCanvas" as a class variable so that it could be referenced outside the contructor. Setting properties of the canvas was quite simple by looking at the Canvas Class documentation but placing the image onto the canvas was more difficult. The XAML makes it look like you can just create a new instance of an Image and then set the source to be the file. It's not as straight forward as that but, fortunately, Image.Source Property gives some helpful details. It doesn't, however, tell you you must include the System.Windows.Media.Imaging namespace. Lastly, notice the image must be made a child of the canvas and the canvas must be put into the window's content. This is analogous to nesting the tags in XAML.

When I was porting the XAML over to C#, I actually just started from the top and continued downward. But that wasn't good for two reasons: one, the animations require targets which wouldn't be created until towards the end; two, since I didn't understand how everything fit together, when there were errors it was difficult to figure out what was going wrong. Above are the parts which I didn't have to comment out when I decided I should just try to get the clock to show up. Once I finished the above, the image appeared in a transparent window and I was able to continue. Since getting the image to render was much more involved than the XAML led me to believe, I set out to get the hands of the clock to render before trying the animation. (Each hand is basically the same, so I will only consider the hour hand)

Initializing the clock hands (make the shape)

XAML:

    <"hourHand" Canvas.Top="214" Canvas.Left="173" Points="0,5 3,0 4,0 8,5 8,50 0,50">...

C#:

    Polygon hourHand = new Polygon();
    Point hPoint1 = new Point(0, 5);
    Point hPoint2 = new Point(3, 0);
    Point hPoint3 = new Point(4, 0);
    Point hPoint4 = new Point(8, 5);
    Point hPoint5 = new Point(8, 50);
    Point hPoint6 = new Point(0, 50);
    PointCollection myPointCollection = new PointCollection();
    myPointCollection.Add(hPoint1);
    myPointCollection.Add(hPoint2);
    myPointCollection.Add(hPoint3);
    myPointCollection.Add(hPoint4);
    myPointCollection.Add(hPoint5);
    myPointCollection.Add(hPoint6);
    hourHand.Points = myPointCollection;
    ...
    hourHand.Name = "hourHand";
    ...
    Canvas.SetTop(hourHand, 214);
    Canvas.SetLeft(hourHand, 173);
    clockCanvas.Children.Add(hourHand);

Notes:
I wasn't sure how to get that list of points to become a property of the Polygon shape. Visual Studio was telling me "Polygon.Points" required a collection of points but did that mean an array or some other kind of object? Luckily, there is a great example at the Polygon.Points Property reference. It is possible, and more traditional, to make an array of points which you can iterate over to add each point to the collection in turn:
```
    Point[] hPoints = new Point[6] { new Point(0, 5), new Point(3, 0), new Point(4, 0), 
    new Point(8, 5), new Point(8, 50), new Point(0, 50)};
    PointCollection myPointCollection = new PointCollection();
    foreach (Point p in hPoints){
    myPointCollection.Add(p);
    }
```
and, even better, there's a overload of the "PointCollection" constructor which takes an iterable collection of points to automatically add them so you can just write PointCollection myPointCollection = new PointCollection(hPoints); without writing the loop. I just did each point explicitly to stay true to the example Microsoft gives in the documentation.
XAML was misleading again with "Canvas.Top" and "Canvas.Left" but the documentation cleared everything up for me.

Rendering the clock hands (make it visible)

XAML:

    <polygon.fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
    <lineargradientbrush.gradientstops>
    <gradientstop offset="0" color="White"></gradientstop>
    <gradientstop offset="1" color="DarkGray"></gradientstop>
    </lineargradientbrush.gradientstops>
    </polygon.fill>

C#:

    LinearGradientBrush hourHandBrush = new LinearGradientBrush();
    hourHandBrush.StartPoint = new Point(0, 0);
    hourHandBrush.EndPoint = new Point(1, 0);
    hourHandBrush.GradientStops.Add(new GradientStop(Colors.White, 0));
    hourHandBrush.GradientStops.Add(new GradientStop(Colors.DarkGray, 1));
    hourHand.Fill = hourHandBrush;

Notes:
I looked at the Shape.Fill Property first because that is what is first in XAML. It gave me a good starting point because I noticed they created a new instance of a "SolidColorBrush", set the properties of the brush and then set the brush as the fill property. All, I had to do was look up how to instantiate the properties of a new LinearGradientBrush and then follow the example.

The "" were extremely easy once I got all the hands set up. In the next part, I will show how I got the animations going.

Alarm Clock Sample -- Part 4

2009-12-01T20:41:00.000-08:00

Parts 1, 2, 3 described my steps to understanding the Alarm Clock Sample program but there are still a few files left many of which may have been autogenerated.

In no particular order:

assemblyinfo.cs
An assembly is a compiled file in .NET nomenclature so I assume this file will describe information about the final output file. There are preprocessor directives in this file, I haven't seen them in any other file so far and that makes me think this file was autogenerated (also note the detail and amount of comments). #region has nothing to do with application logic, it's just for editor eyecandy.
Code in the square brackets looked familiar to me. If you right click on an executable or dll, in the properties dialogue, this code sets up what you will see in the version tab (maybe the summary tab too). Some of the fields don't match though, I changed AssemblyDescription and it was shown in the value of the "Comments" item. Of course the .NET Framework Class Library has all that information in the System.Reflection Namespace.
resources.designer.cs
This file states upfront that it is autogenerated. It is the "Resource Designer" that generates the file. From the Visual Studio Reference
The Resource Designer is a user interface tool that enables you to manage resources (such as strings, images, icons, audio, and other files) for your project. .... Items that you add to the project by using the Resource Designer are placed in the Resources directory for your project. The designer information is stored in a file named Resources.resx, and code for the resource is stored in Resources.Designer.cs....
resources.resx
From the above, we know "the designer information is stored here". But that doesn't really help me understand the file. Bechir Bejaoui gives a nice, quick introduction. It looks like these files are not something you would want to write yourself. I guess it would be best to use Visual Studio to generate these if you are going to have a ton of external resources and you want to keep track of them in this way.
settings.designer.cs and settings.settings
I couldn't find much information about these two files to help me understand them so I'm putting them together. The best thing I could find was from the Visual Studio Reference . My understanding is that you can use these two files to set up a way to allow changeable but persistent application settings. The user can change some setting in the program and then when they close and reopen it, the settings will still be there. Seems to be a new fangled *.ini file.

The next thing I'm going to do to improve my understanding of C# is rewrite the Alarm Clock Sample in pure C# without help from XAML (I'll try to understand XAML more fully in the future).

Alarm Clock Sample -- Part 3

2009-11-30T04:39:00.000-08:00

Last time I mentioned, "There’s an object TraditionalClock defined somewhere", so in this post I want to look closely at how the TraditionalClock object is created.

I supposed that traditionalclock.xaml and traditionalclock.xaml.cs probably hold the key and I'll start with traditionalclock.xaml. The first line is <Window x:Class="Microsoft.Samples.WinFX.AlarmClock.TraditionalClock" so I checked out the XAML Namespace (x:) Language Features which led me to

Configures XAML compilation to join partial classes between markup and code-behind. The code partial class is defined in a separate code file in a Common Language Specification (CLS) language, whereas the markup partial class is created by code generation during XAML compilation.

From this description, I deduced that

Window is the parent of the class that's going to be defined
Microsoft.Samples.WinFX.AlarmClock.TraditionalClock indicates the name of the class will be "TraditionalClock" in the Microsoft.Samples.WinFX.AlarmClock namespace

And, actually, looking in traditionalclock.xaml.cs, that deduction, translated into C# exists exactly. Note especially that it's a partial class in C# since from the "x:Class Attribute" we know that when the XAML is compiled a partial class of the same name will be created.

This made me think I could understand myapp.xaml and myapp.xaml.cs a little better too. Going to myapp.xaml, I noticed <Application x:Class="Microsoft.Samples.WinFX.AlarmClock.MyApp" which makes sense now as it will create a partial class MyApp in the correct namespace inheriting from the WPF Application object which is exactly what we came to understand about myapp.xaml.cs in Part 2.

Now, it's my understanding that XAML is about describing the structure of the code and the design of the objects you want generated whereas C# should be used for the logic (this makes me think of the evolution of Web Programming where HTML sets up the structure of the page, CSS designs it, and some program is on the server-side such as PHP to handle the logic). I'm not going to go through the whole XAML file because I think from understanding parts of it, we can understand all of it.

C# uses curly brackets '{}' for sectioning off blocks of code and they, of course, can be nested. XML uses opening and closing tags. In traditionalclock.xaml, notice at the beginning and at the end and (most) tags can be nested. It's also important to remember the inheritance between objects because when I tried to understand XAML as basically a descriptive markup language to autogenerate C# I got lost in some of the assignments I saw.

The Window Class has members for "AllowsTransparency", "Background", and "WindowStyle" but "MouseLeftButtonDown" is not on that page in the framework--you have to follow the inheritance: the Window Class inherits from ContentControl which has the MouseLeftButtonDown event because it (eventually) inherits from UIElement. I now understand the importance of paying close attention to the Inheritance Hierarchy for every class overview in the .NET Framework Class Library.

It seems XAML is relatively straight-forward with every opening tag loading a class object, members of that class being assigned in the tag and other, logically connected, classes being set up within the opening and closing tags. Personally, I think coding everything in C# would be just as easy but I guess XAML is nicer from a maintenance and readability perspective as objects are logically grouped within nested tags.

In traditionalclock.xaml.cs it's easy to see how you can interact with XAML. The first thing I noticed in this file after looking at the XAML for the TraditionalClock class was the line Storyboard clockHandStoryboard = (Storyboard)clockWindow.Resources["clockHandStoryboard"];. "Storyboard" was set up in XAML as well as the name "clockWindow" and the resource "clockHandStoryboard". The event handlers make sense here too. The only thing I didn't understand was InitializeComponent();. It's a well named method because I can immediately deduce that it will initialize a component. But What component. As with most questions, someone has already asked it on the internet and someone has already given the answer.

Basically, these two files work together as expected. The partial class is created in C# which loads the XAML which gets parsed into objects which can be used in further C# code.

Alarm Clock Sample -- Part 2

2009-11-28T22:58:00.000-08:00

Now that I know that myapp.xaml holds the key to the application's startup, I want to look closer at where the AppStartup method lives: myapp.xaml.cs.

This file is a complete C# file leveraging the .NET Framework Class Library. The first thing I notice is the file uses six namespaces all ultimately from the System namespace. System is clearly one of the most important namespaces of any C# project. From the descriptions over at the .NET Framework Reference, my first take on their usage is

System is required for the most fundamental aspects of the application like class and struct types (eg. the Object class from which all other classes are derived
System.Windows is required because this will be a WPF application
System.Data has no apparent usage at first glance
System.Xml is required to parse XAML files since they are XML files
System.Configuration is required to configure the application (i'm guessing configuration is detailed in the XAML files)
System.Windows.Media is required for drawing stuff (like the alarm clock image) and producing sound (I don't think this alarm clock actually has an alarm though)

You don't actually have to give everything a namespace but it seems to be a best practice guideline since Microsoft always does it. Here, the application is given the namespace Microsoft.Samples.WinFX.AlarmClock. So far, I don't think they are necessary unless you plan to write your own library (compiling as DLLs).

On to the meat: public partial class MyApp : Application.

Of course, the application class should be "public" but what's with "partial"? In Part 1, I mentioned that the build process will automagically create an entry point method so the application knows how to start, I'm guessing the build process also creates a class based on myapp.xaml which gets put into separate file from the compiled myapp.xaml.cs in which case "partial" is needed to specify this is just part of the class definition. I gathered as much from Building a WPF Application

In addition, a language-specific code file is generated for every XAML file. For example, for a Page1.xaml page in a Visual Basic project, a Page1.g.vb is generated; for a Page1.xaml page in a C# project, a Page1.g.cs is generated. The ".g" in the file name indicates the file is generated code that has a partial class declaration for the top-level element of the markup file (such as Page or Window). The class is declared with the partial modifier in C# (Extends in Visual Basic) to indicate there is another declaration for the class elsewhere, usually in the code-behind file Page1.xaml.cs.

The main application class is given the name "MyApp" and inherits from Application which comes from the System.Windows namespace. The Application class "Encapsulates a Windows Presentation Foundation (WPF) application." That makes sense, Alarm Clock Sample is a WPF application.

Finally, the application process is run and, on startup, the AppStartup method is called. I already talked about the prototype so let's look at the body:

TraditionalClock tradClock = new TraditionalClock(); There's an object TraditionalClock defined somewhere (probably in traditionalclock.xaml and traditionalclock.xaml.cs)
tradClock.Opacity = .6f; Clearly, this will set the Opacity of the object (which, by now, I'm assuming consists of at least the image of the clock and hands)
tradClock.Show(); Most likely renders the clock to the screen.

The other method, void clockWindow_Closed(object sender, EventArgs e) is pretty straightforward now that I understand the AppStartup method. It is my understanding that every method triggered by an event will have an "object sender" and "EventArgs e" argument where EventArgs may be different depending on the event. The body of this method merely contains Application.Current.Shutdown(0); which speaks for itself but the .NET Framework Reference gives some more input: The Current property is thread safe and allows access to the application's instance in the current AppDomain (kind of like a sandbox for each executing application) from any thread.

Alarm Clock Sample -- Part 1

2009-11-28T19:18:00.000-08:00

The Calculator Demo I visited previously is far too complex for now so I've decided to try to understand the Alarm Clock Sample instead. It is a much simpler application though still written for WPF and as such is using XAML.

Upon downloading the source, I first built the project. This time, there were no problems. The build succeeded and I opened the app. Just as I suspected, it was very simple--just a picture of an old school alarm clock with animated hands, opacity set as to not be opaque, and draggable whilst showing the outline of an outrageously large rectangle. I was surprised, however, that it was taking 50% of my processing power which, on a dual core processor, means it's maxing out probably because of some infinite loop.

Ok, so now that I see what the program is all about, it's time to dive into the code. I went straight for myapp.xaml to find Startup. Thanks to the WPF Application Management Overview, I know now that this is used to define the handler for the Application.Startup Event which "Occurs when the Run method of the Application object is called."

I now understand the syntax of void AppStartup(object sender, StartupEventArgs e) in app.xaml.cs.

void means this method will not return anything (basic knowledge from any strongly typed programming language)
AppStartup defines the name of the method which will be called on activation of the Application.Startup Event.
object sender is a reference to the object which raised the event
StartupEventArgs e gives access to the properties of the event in question

Cool, but the Startup event "Occurs when the Run method of the Application object is called." Doesn't that mean the application needs a "Run method"? Usually the Run method gets put into the Main method but it doesn't exist in the Alarm Clock Sample just as it didn't exist in the Calculator Demo. No such luck finding Run either. The answer lies in the background. What we don't see in the application nor during the build process is that the entry point Main and the all-important Run get inserted automagically. I felt lucky searching for "wpf main()" and I was. Someone asked How can I provide my own Main() method in my WPF application? (I'll have to look further into that website sometime) and the answer was

At compile-time WPF generates the real entry point method using the classic static void Main() method signature in C#, or Public Shared Sub Main() in VB.NET. Inside the Main() method WPF creates an instance of one of your classes which derive from System.Windows.Application, and calls the blocking Run() method on this Application-derived class which keeps the process "alive".

Perfect. Now, I can figure out how the app is actually put together rather than how it can exist in the first place.

Calculator Demo -- Part 1

2009-11-28T05:52:00.000-08:00

After reading through a bunch of the .Net Framework Class Library, I noticed they have some samples for download. I really wanted to dive into GUI programming so I checked out the Calculator Demo.

I knew it would be fairly complicated from the description but when I opened the source, I was taken aback by the complexity. As the comments pointed out, it wouldn't compile correctly in the command line because of "missing files" but I still couldn't get that to work so I fired up the behemoth Visual Studio and, it's true, "this example doesn't build unless...".

The calculator was running, I played around to experience the features, then went back to the source code. From the tutorials I had looked at previously, I knew every C# program needed to have a static Main() method as a starting point. I searched every file for "Main" but to no avail. I searched the internet for C# applications without Main() but to no avail.

Since the easy path to understanding wasn't working out, I stretched my arms and began looking through each source file for the starting point of the application. Eventually, I found Startup="AppStartingUp" in app.xaml which quickly led me to void AppStartingUp(object sender, StartupEventArgs e) in app.xaml.cs (conveniently enough).

This discovery didn't help me understand what was happening but it did lead me to search for xaml which happens to stand for "Extensible Application Markup Language" and, like C# and .NET, was created by Microsoft and looks to be just as complicated.

Of course, since I had never heard of it before, I realized I would need to find a primer on XAML. My First XAML Application is a perfect introduction. As it turns out, the C# language isn't too difficult but .NET is a tremendously large framework which is going to force me to learn a lot more than just C#. I mean, XAML is just part of the Windows Presentation Foundation!

Initial Resources

2009-11-28T05:10:00.000-08:00

There are two reasons I decided to begin learning C#:

I'm going to be learning Java next semester for my Masters of IT course but I don't like Java; C# is based heavily on Java but also influenced by C++; I don't know much about C++ but I really like C
I'm looking to have a career in IT; C# is very popular right now; My resume will look better

Here are the places I looked first to get a handle on the language (before starting this blog):

DevHood -- Training Modules -- Distribution A
CSHARP.NET-INFORMATIONS.COM
Hanspeter Mossenbock's C# Tutorial