It is about 3 years since I’ve posted this post, which in it, I’ve announced joining Sela.3 Years. Wow, amazing how time flies by.

I had good times, and bad times at Sela. This blog accurately reflects it, when I felt not so good my writing muse was blocked.

Now I hope things will change as I announce that I am leaving Sela. I’m leaving many people that I’ve enjoyed their companionship and I honestly admire their expertise. Most of all I will remember our yearly field trips to USA in order to participate at PDCs. Those were good times.

During my time at Sela I’ve exposed myself to situations that are way out of my comfort zone, including speaking at conferences, going to customers to consult on stuff I’ve learned the day before, pushing myself to be expert on WPF, Silverlight, WCF, WF, Team System, Scrum. Those were a drivers for real growth. I can now reflect back and conclude that with most customers I’ve succeeded not only to make a difference technically but also to gain their friendship, in that case I’ve took advantage of one of Sela best offers, the ability to participate on many projects, on many domains during a short period of time.

I would like to thank everyone on Sela, that I’ve had interaction with, to all without regards of importance.

A word on the future. I’ve a dream, working with my friends, enjoying my time, using my creativity. Finally I’ve decided to fulfill this dream.

I would like to present you CodeValue, my new venture, which consist of truly the best, both personally and technically people. While most of the things we are doing is still under secrecy, we are going to offer various services, such as pulling out extremely difficult projects, or impressive demos which contains revolutionary concepts. We will also offer consultancies, so don’t hesitate on contacting me, though this blog or through our web site.

Members of the new company are well esteemed leaders of the Israeli developers community: Alon Fliess, Eran Stiller, Shay Friedman, Amir Zucker, Eli Arbel, Josh Reuven, Bernie Almosni, and more.

Drop by at our site at www.codevalue.net, make sure you visit our awesome Pivot view of our aggregated blogs, a real knowledge power.

Make sure you start following our @CodeValue twitter account and rest of the team: @arielbh, @alon_fliess, @ironshay, @eranstiller, @bernieal.

Also visit our Facebook page.

Good luck to us all.

Ariel

So far I am expriencing PDC09 much differently than any other conference I’ve ever participated.

First, Thanks to Glenn Block I have a role to play, yesterday I hanged out with Glenn at the speakers lounge meeting people I’ve reading theire blogs for so long time, people such as Nikhil Kothari, Matthew Podwysocki and many more.

Second, Last PDC my laptop had died 2 days before flying over. This year I feel I am blogging and twittering for every second breath. Feel Free to follow me (twitter.com/ArielBH).

Third I’ve met with some great people today, Ian and Mike from the WPF team, Paul from the VS team, Marc from the DPE team, all this guys are Microsofties (I can also add Glenn to this excellent list). We had great conversations, and ideas, I’ve learned stuff on the internals of WPF and VS through funny stories that you can get expose too through happy conversation.

So content wise, nothing new under the sun at PDC, but for me, I am enjoying every minute of it.

Ariel

http://microsoftpdc.com/Sessions/CL11

In this presentation, a WPF Facebook like application was presented. Unfortunately the application has issues. during the session we have walked some classic scenarios and some are a bit far fetched (at least from my experience).

If you are a WPF developer, see the video, this session should go through video really good, because you will be able to see all the small mouse gestures the presenters are doing  with each application they have used to analyze the problem.

To get things in order, the session dealt with those issues:

1. Memory usage : In this app scenario images being used and not released because some stupid reference. Not really wpf related, but the excuse was that usually designers are oblivious such as this, and might provide you styles containing many elements and unnecessary resources.
2. Cold Start : locate heavy IO pulling during application, notice for rough assemblies loading up that you don’t really need.
3. Warm Start : Look for complicated layouts being rendered, maybe can you can render a few items at the time especially if they are shown in the UI.
4. Rendering : Check out for unnecessary rendering being done through resizing and animations.

When the session slide deck would be published I’ll update here with specific tools names you can use.

Ariel

http://microsoftpdc.com/Sessions/VTL30

Bottom line, I recommend you watching this session on Video when it would be available probably tomorrow.

Why?

1. Cool Demos. All demos are visual and interesting, it’s really hard to exite most people with a clustering algorithm, but give them a DeepZoom app and sea how everybody starts to the enjoy the smooth experience.
2. Interesting tips on driving innovation on your team.

I also liked UI tips being discuessed some are a bit trivial like never life work on you UI thread, push everything to a background thread, to a more subtle illusions. For example while zooming inside a tiled a pyramid, only the centered tile is downloaded first base. the surrounding tiles will get downloaded only after. The human eye concentrate on the center tile, and until our peripheral vision understands what it is seeing, all the tiles have finished downloading. Also there is an animation for each mouse transition you have feeling that there is a time the layouts is used inside a shock absorber, the time the animation give SeaDragon an extra time to download more stuff. Really cool.

Bill also talks about ways to increase involvements of team members and driving them for innovation. Bill speaks about once a quarter doing an “Out of the Box” week which each team member can work on anything he wants too.

Ariel

So this is kind of a live blogging from the PDC09’s keynote.

Bottom line, as I’ve suspected no big announcements in today’ss keynote. But… it might be for the best, Microsoft focuses on maturing many projects that were discussed on last year PDC. Windows Azure starts to gain momentum with customers using it and driving feedbacks to the team, and as with this timing Azure is about to get into production state, some projects are already starting on getting online for production versions, projects such as WordPress, KBB, and many more important vendors.

Microsoft made an emphasis on widening there support for Azure, making sure tools are supportive and every aspect of Azure application development. A field which really shines is the data layer, SQL Azure interact beautifully with SQL management studio, and wizards let developers rapidly but there stuff on the cloud.

As many of my colleagues have covered the keynote, I will add that while might not be suitable for PDC materials, Microsoft has not rushed out another technology firing blindly, or at competitors that are ahead in the game, but invests in bringing the audience together. Microsoft are long time being crtizied as running quickly ahead while the customer are still struggling, it might be the case with Silverlight/WPF issues that a major share of customer still uses Win32 and Winforms.

Ariel

http://microsoftpdc.com/Sessions/CL09

Live blogging.

Reasons for VS to use WPF:

1. You better lead by example, if you want people to use WPF, you must use it in house, intresting that it was the 1st point.
2. WPF strong patterns of separation of concerns between UI an logic.
3. Maturity of WPF.
4. Plenty of rich UIs that VS needs that is much more easy to accomplish with WPF rendering engines. I guess that 3d driven designers and VS features are around the corner.
5. Drive WPF into the area of building really complicated composites UI, and mature WPF even more with features that VS needed.

VS uses WPF by using xaml as it’s declarative UI and uses extensive Data Binding scenarios for example native data models., lots of legacy support, new Text rendering.

VS changed itself to WPF in a staged approach, first defining the data models VS needs (managed and native), second they replaced the Shell of VS that made them clear a path for real interop between unmanaged parts of existing VS and the managed Shell. Replacing key pieces of functionality like Command Bar and Window Manager (it was possible to run the old code and new together and switch in and out).

Most important aspect is Testing of UI. The team has underestimated how must cost was to rewrite the VS testing and consolidating old tests frameworks to a unified one.

Challenges were the interop obviously, mixing WPF controls and Win32 & WinForms HWND based controls. Handlings messages between unmanaged and managed components with OS. Keeping old APIs working to not break old extensions, but also making new extensions taking advantage of WPF.

Another concern was to keep other teams at Microsoft working while doing the change.

Performance was a real concern, when you work on mixed technologies you often suffer from the worse of them and the interop between them.

Many WPF features were added in regard of Focus stealing controls (you gotta make sure the Copy&Paste works in VS, mmm disabling it would have prevented Copy&Paste inheritance though :)).

Another important aspect was WPF Text clarity, a new TextRending logic make a tremendous change to text clarity.

A bit rushed out section of this session was performance, a list of tools were in use to monitor Visual Studio careful, but no demos.

I need to investigate it on my own.

A part that I was missing in this session was a bit of a Prism flavor. How composite application was built, how communication is done between components and such concerns.

Ariel

Today was our 3rd day at LA. From a personal perspective, I’ve kept myself busy preparing my sample app for Glenn’s session which he kindly enough invited me to preset with him that Sample app. http://microsoftpdc.com/Sessions/FT24

One on one with Glenn, paring to refactor the sample code, the framework it is using, It is extremely valuable for me to learn from a guy such as Glenn who knows the insides and outsides of MEF. Really cool.

Sela’s presence in the conference is really impressive, a swarm of people, wearing almost an identical uniforms, a booth, which in turn will start tomorrow receiving the newest bits, and we will report on it, and of course will be there to tell you all about it, in Sela developer conference.

I will keep on working and entertaining my self, oh I need to rest as well, just get back from an awesome party held by again, Sela.

I will keep you posted on tomorrow’s sessions.

Ariel

Hi all, next week Microsoft is holding it’s biggest developer conference in LA.

Thousands of developers around the world are participating and amongst them around 25-30 Israelis

So, what’s in it for you? We will be keeping you updated using our blogs through live updates, and daily summaries.

Some like myself will be twittering in earnest (you are invited to follow my tweets : arielbh).

We will be using #PDC09 tag so you can set your RSS reader or twitter search to it. I hope that we will also concentrate those posts on a visible place on the bloggers homepage or even better Microsofts’ page, but it yet to be certain.

If you have any request or advice please leave a comment.

Ariel

Here is a small how-to solution to a very common question.

Suppose I have separated my client application to multiple projects, and each project contains his own WPF resource dictionary, how do I use it?

Bottom line, you need to merge your resource dictionary to the application main resource, let’s see how to do that.

private static void RegisterResources()

    {

        ResourceDictionary dictionary = new ResourceDictionary();

        dictionary.Source = new Uri(

            "pack://application:,,,/[ASSEMBLY NAME];Component/[SUBFOLDER IF ANY]/[DICTIONARY NAME].xaml");

        Application.Current.Resources.MergedDictionaries.Add(dictionary);

    }

Note: the strange Uri syntax, every [] is a place holder for you to put in your specific information.

I usually use this method somewhere in my module entry point. (If using prism, the class which implement IModule is a good candidate).

Ariel

Well, one day after my talk at IDCC. I feel pretty good about my talk, not many people know that everything that was connected to this talk was prepared under 4 days. Presentation slides, Sample project, planning and so on. And I’ve never realized how many small details one has while preparing for this talk.

So few tips I’ve learned during this session making process, through the session, and after the session.

1. Follow Scott Hanselman’s Tips, every each of his tips is valuable, I tried to follow his advice.
   1. http://www.hanselman.com/blog/11TopTipsForASuccessfulTechnicalPresentation.aspx
   2. http://www.hanselman.com/blog/TipsForPreparingForATechnicalPresentation.aspx
2. Think of your session pre-requisites, in my session, WPF knowledge was a must. I, for example, have not made it clear enough.
3. Run your session on you friends and colleagues, at least 3-4 times before. Practice on your jokes even. Have them review it, if they are in business. Make sure your message in correct Don’t give people bad advices.
4. Make sure you can see the clock during your session, I’ve separated my talk on to 5 sections (each is 15 minutes) and wrote it on a paper which was visible as well. It helped my time orientation during the talk. I only needed to have 1 second glance at the clock and my 5 sections paper and know if I’m running late and speed up or I’ve plenty of time to slow down the pace, or take a few questions.
5. Next tip, I’ve thought of this technique on my own and am very proud of it, I found it really useful during my session. Instead of live-coding by inserting snippets. Before the talk comment your code, cover it with a region of you don’t want to people to see it before time. Also use a //TODO: commend before each section. I also gave it a number. Now during the talk all you have to do is uncomment your code. I didn’t have to remember what is the sequence, it was already ordered in my Tasks view pane on Visual studio. I could easily navigate between projects quickly, didn’t have waste time looking for my files. FTW!

For those who have attended my session, I would be happy to receive any feedback. You will just help me improve myself. Thank you very much!

Session materials such as slides and projects will be available soon.

Ariel

Happy holiday.

Ariel

Apparently there is an ALT.net conference going right now, and most chances that you are not aware of it, care much, or dare to participate.

Alt.net conference is a concept of an open space conference which the participants are responsible for the agenda and sessions (if you can call them sessions). If there is a conference which you can really make a difference either by suggesting a session topic, participating in, or even leading the whole session, it is this.

If you ever wanted to talk about a topic you thought only you cared about, or as it occasionally happens to me, go to a session only to discover that it is introductionary level at best due to the nature of public conferences, Again this is the place for you.

Roughly around 30 of our finest programmers out there, gathered together on Sela HQ roof, and organized a full day packed with goodies. Variety of subjects from DDDD, IoCs, TDD, Scrum, Linq, to Prism were hanged on yellow stickers. Tomorrow they will be the topics of open space sessions.

For me it is the first Alt.net conf I’m participating in, and I’m very curios to see how this will develop. What I can say that people who had participated on the 1st event were speaking of it enthusiastically. and of course this formula is running all over the world.

I hope I will see you tomorrow 8:30. 9 sharp we start. I will try to live blog…

More info on Roy Osherove blog : http://weblogs.asp.net/rosherove/archive/2009/04/02/alt-net-israel-ii-happens-today.aspx

Ariel

No. I didn't go downgrade to XP, nor did I install LINUX.

Lot's of bad blood exists around Vista, I know, Everyone's favorite punch doll. I dare say not without reasons.

I kinda got used to it, I've been working with it since it got out, most of time I was happy, not thrilled but content.

Regardless of that there was one thing that completely drove me crazy with Vista: Explorer folder settings.

I like to view my folders in the same way, I want "details", I want to see file sizes and dates, if for some reasons I am viewing pictures, I will know where to go in order to change it to Large Icons, no need to do that for me or persist that. Also there is no reason on earth to change my last c# project folder settings to "music" view where there is not a single hint to indicate that there is need to that.

There were times that I wish I could just get a hold of that vista code and see this genius piece of code that decides what setting to apply to what folder, what rules does it use, I just couldn't figure it, is it Random based algorithm?

Anyway it took me a while to actively looking for a cure, and I found it, that why I thought I would share it with you in case you were suffering as much as I did.

Follow Method 2 in this guide, and may there be world peace. (especially for the innocent people that really suffers even while I write this post, in the south).

Ariel

In Part 1, we’ve discussed how the Layout was done, and we finished designing our XAML.

Now let’s see what is going on beyond the scenes.

We will define two helper classes that will help us manage the data in our App.

Function class got:

• Name : Will be shown inside the ComboBox.
• Params: List of Param class, will be used to persist data into the function.
• Run: a Func<double, double> type property, contains a lambda expression representing the mathematical function to be used.

Param class got:

• Name : Will be shown inside the listbox like “a” or “b”.
• Val: The Value that was entered by the user.

In code they look like this.

  public class Function

OK let’s get some meat.

1. We will define our private members of class Page. We will need a Polyline object and PointCollection for it.

     public partial class Page : UserControl

     {

       PointCollection polyPoints = new PointCollection();

       Polyline yellowPolyline = new Polyline();

2. Now we will create the data source of the mathematical functions a list of Function objects as a private member (note that the Run property is unassigned we will assign it later) :

       List<Function> funcs = new List<Function>

       { new Function { Name = "aX",

                        Params = new List<Param> { new Param {Name="a"}}},

    

         new Function { Name = "aX + b",

                        Params = new List<Param> { new Param {Name="a"},

                                                   new Param {Name="b"}}},

         new Function { Name = "aX^2 + bx + c",

                        Params = new List<Param> { new Param {Name="a"},

                                                   new Param {Name="b"},

                                                   new Param {Name="c"}}},

    

         new Function { Name = "aX^d + bx + c",

                        Params = new List<Param> { new Param {Name="a"},

                                                   new Param {Name="b"},

                                                   new Param {Name="c"},

                                                   new Param {Name="d"}}},

         new Function { Name = "Sin(X)"},

         new Function { Name = "Cos(X)"},

         new Function { Name = "Tag(X)"},

         new Function { Name = "Floor(X)"},

         new Function { Name = "Abs(X)"}};

    

3. We will define a method called SeedFunc inside Page class, this method will run for each X pixel we have on the X axis of our drawing area we will calculate it’s Y part. In our case we have 400 pixels. We could iterate over them from –200 to 200 for example but you will notice that a method like Sin(x) is giving back Y in the range of –1 to 1. so it will look very very small with that ratios. The trick is to use smaller X numbers from –10 to 10 and translating them to X,Y in pixels. Furthermore if we have a point that the Y value is outside our plotting area we disregard it.

       private List<Point> SeedFunc(Func<double, double> func)

       {

         List<Point> funcPoint = new List<Point>();

         for (double i = 10; i >= -10; i -= 0.05)

         {

           try

           {

             double y = func(i) * 20;

    

             if (Math.Abs(y) < (Canvas.ActualHeight / 2))

             {

               funcPoint.Add(new Point(i * 20, y));

             }

           }

           catch (DivideByZeroException ex)

           {

             continue;

           }

         }

         return funcPoint;

       }

4. We will define an helper method, a quick and dirty way to retrieve a  parameter value from a given Function.

       private double Ex(int f, int c)

       {

         return Convert.ToDouble(funcs[f].Params[c].Val);

       }

5. Move to the Page constructor just after InitializeComponent(); we will start assigning values to our private members. First we will assign the lambda expressions for each of our Function.

         funcs[0].Run = x => x * Ex(0, 0);

         funcs[1].Run = x => x * Ex(1, 0) + Ex(1, 1);

         funcs[2].Run = x => x * x * Ex(2, 0) + x * Ex(2, 1) + Ex(2,2);

         funcs[3].Run = x => Math.Pow(x, Ex(3,3)) * Ex(3, 0) + x * Ex(3, 1) + Ex(3, 2);

         funcs[4].Run = x => Math.Sin(x);

         funcs[5].Run = x => Math.Cos(x);

         funcs[6].Run = x => Math.Tan(x);

         funcs[7].Run = x => Math.Floor(x);

         funcs[8].Run = x => Math.Abs(x);

6. Also inside the constructor, we will assign the ComboBox with this list. And create a few defaults for our Polyline.

         fChs.ItemsSource = funcs;

         SolidColorBrush yellowBrush = new SolidColorBrush();

         yellowBrush.Color = Colors.Yellow;

         SolidColorBrush blackBrush = new SolidColorBrush();

         blackBrush.Color = Colors.Black;

    

         yellowPolyline.Stroke = blackBrush;

         yellowPolyline.Fill = yellowBrush;

         yellowPolyline.StrokeThickness = 2;

7. Now that we are familiar with Param class we can define a DataTemplate for it. Go back to Page.xaml, locate the listbox and define this template. Notice that the Textbox binding is marked with TwoWay, which mean every change is automatically relayed to the parameter underneath.

           <ListBox x:Name="ParamList" Width="200" Height="200">

             <ListBox.ItemTemplate>

             <DataTemplate>

               <StackPanel Orientation="Horizontal">

                 <TextBlock Text="{Binding Name}"/>

                 <TextBlock Margin="5,0,5,0" Text="="/>

                 <TextBox Width="50" Text="{Binding Val, Mode=TwoWay}"/>

               </StackPanel>

             </DataTemplate>

           </ListBox.ItemTemplate>

           </ListBox>

8. Switch back to the cs file, let’s handle the Selection change of the combo box. we get the function from the combobox and we set the source of the list with its’ params list.

       private void fChs_SelectionChanged(object sender, SelectionChangedEventArgs e)

       {

         selectedFunc = e.AddedItems[0] as Function;

         ParamList.ItemsSource = selectedFunc.Params;

       }

9. Move on to implement the clear button, we will remove the current ployline and clear the pointlist making it ready for new plotting. if there was an error, we eliminate the error message.

       private void Clear_Click(object sender, RoutedEventArgs e)

       {

         Canvas.Children.Clear();

         polyPoints.Clear();

         ErrorLabel.Visibility = Visibility.Collapsed; }

    

10. Last piece of the puzzle. The plot button event implementation.
    1. Before we plot we clear again.
    2. we position our polyline in the middle of the canvas.
    3. We call the SeedFunc method to generate a list of points.
    4. We just add them to Polyline list collection.
    5. And last we add the polyline to the canvas.
    6. If something bad happened, we warn the user and clear everything.

      private void Plot_Click(object sender, RoutedEventArgs e)

        {

          ErrorLabel.Visibility = Visibility.Collapsed;

          if (selectedFunc != null)

          {

            try

            {

              Canvas.Children.Clear();

              polyPoints.Clear();

     

              Canvas.SetLeft(yellowPolyline, Canvas.ActualWidth / 2);

              Canvas.SetTop(yellowPolyline, Canvas.ActualHeight / 2);

     

              List<Point> funcPoint = SeedFunc(selectedFunc.Run);

     

              foreach (Point p in funcPoint)

              {

                polyPoints.Add(p);

              }

              yellowPolyline.Points = polyPoints;

              Canvas.Children.Add(yellowPolyline);

            }

            catch (Exception ex)

            {

              Canvas.Children.Clear();

              polyPoints.Clear();

              ErrorLabel.Visibility = Visibility.Visible;

            }

          }

        }

     

    It should look like this:

    

     

We can now conclude this 2 part tutorial, of how I built my Silverlight app to the MIX 10K competition. I hope I will see you apps beside mine their and If I don’t win, at least you will, so it will have a little piece of me inside :).

I urge you to visit my app at MIX and share your support with me.

Thanks

Ariel

My esteemed colleague Alex Golesh  sent me a request to rate his app on the MIX 10k competition, I wasn’t aware of this competition, but I immediately decided that I want in.

The rules are simple, do anything you want on Silverlight or XBAP but you mustn’t exceed 10kb of code and resources.

After some thinking I’ve decided I want to create a mathematical function plotter, you can find such on sites like www.Mathway.com.

So Now before you continue reading and learning how I put it together, play with my app, discover all the features, try out all the functions. It will make you life easier understanding what I’m doing because we will get very soon to XAML.

http://2009.visitmix.com/MIXtify/TenKDisplay.aspx?SubmissionID=0031

(And if you liked it, rate it, please).

Thread.Join();

You have returned. Good. Hope you took your time. Now let’s us continue.

I will begin dissecting the final solution but it took me a while to grasp how everything will fit in, and what UI to use.

Just to describe chronologically, I’ve started with manipulating a simple object Line  inside a Silverlight application. When I mastered it I hardcoded some functions such as X^2 and Sin(x) to see how the line is behaving with different sets of points.

Then I put my mind on the UI of how the user will create his function.

At first I fantasized on Mathway.com style ability to parse a function from a string, I realized quickly that building such a parsing engine will most definitely bring me over the 10k limit.

So I inclined to be building a much simpler way to describe what function is to be plotted: The user chooses the function to plot, if there is a need for extra parameters, a listbox is used to enable editing.

One last comment: In order to remain under 10k limit, comments, nice separation to functions (or files), extensive error handling is a luxury one can not afford. You have been warned.

So enough talking let’s start seeing some code.

Everything we need is inside Page.xaml and Page.xaml.cs.

Beside that we have the app.xaml and app.xaml.cs that were created with some code generated from the visual studio template. I left them almost untouched except of deleting comments (Which by the way if you didn’t know saved me precious k-s!).

1. Open Page.xaml and notice we have a Grid object called LayoutRoot with background.

   <UserControl x:Class="Plotlight.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="400" Height="300">

       <Grid x:Name="LayoutRoot" Background="White">

    

       </Grid>

   </UserControl>

2. A cool tip I learned from Guy Burstein, change the Width and Height of your app to MinWidth and MinHeight. I choose 600, you can have whatever u like.
3. Because we want our app to win and we are no designers the easiest thing we can do to make our app more pretty is use gradient brush, everybody loves them and you don’t need to really have a talent. right? Remove the background = “White”.

     <Grid x:Name="LayoutRoot">

         <Grid.Background>

           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

             <GradientStop Color="#C4008DFA"/>

             <GradientStop Color="#FFFFFFFF" Offset="1"/>

             <GradientStop Color="#FDF9FCFE" Offset="1"/>

           </LinearGradientBrush>

         </Grid.Background>

4. We will create a basic layout for our app, I decided to create 2 columns, one for the function retrieval and second for the plotting area.

       <Grid.ColumnDefinitions>

         <ColumnDefinition Width="30*"/>

         <ColumnDefinition Width="70*"/>

       </Grid.ColumnDefinitions>

5. Create a StackPanel, this will arrange all children control in a way that each will be on top of the other one.

   <StackPanel Margin="10" Orientation="Vertical" Grid.Column="0">

6. Add a pair of TextBlock and Combobox, the ComboBox will contain the functions that are offered to be plotted.

           <TextBlock FontSize="14" Text="Choose a Function:" Margin="0,0,5,0"/>

           <ComboBox x:Name="fChs" Width="200" DisplayMemberPath="Name" SelectionChanged="fChs_SelectionChanged"/>

7. Add another pair, now it will be a TextBlock and a listbox. The listbox will contain a mean to edit parameters to the functions.

           <TextBlock FontSize="14" Text="Enter coefficients:" Margin="0,0,5,0"/>

           <ListBox x:Name="ParamList" Width="200" Height="200">

           </ListBox>

8. Inside the listbox we will define a DataTemplate, we will do that later on. The DataTemplate will define how a certain class is to be shown in the UI so each entry will receive it’s own line inside the listbox.
9. Add another StackPanel this time it will align the controls Horizontally, and fill it with 2 buttons and TextBlock: One button will Plot, the second will clear and the label we will use to notify an error, if needed that why it is not visible.

           <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,8,0,0">

             <Button Margin="0,0,5,0" Content="Plot!" Click="Plot_Click"/>

             <Button Content="Clear" Click="Clear_Click"/>

             <TextBlock x:Name="ErrorLabel" Foreground="Red" Text="Error" Visibility="Collapsed"/>

           </StackPanel>

    

    

OK we finished creating the first column of our Layout.

The second column contains a part with a lot of boring text and it is not very interesting, but the second part is our drawing area.

1. We will create a Border for our drawing Area. So it will be very clear where the function will be plotted. Actually the Width and Height are very important. it is 400 and 3 for each side of the border. Is is very important for us that the plotting area would be 400 exactly, in the code behind we will see that we will plot a point for each pixel (400 points total).

   <Border BorderThickness="3" BorderBrush="Black" Grid.Column="1" Width="406" Height="406">

2. Now we will create another Grid, this will serve as the background for our drawing area. I choose Azure for some reason :) and the Grid lines are shown because they will be our Axis. Yep, remember less is code in our app.

   <Grid Background="Azure" ShowGridLines="True" >

3. So now it shouldn’t surprise you that we are separating the Grid into 4 equal quarters

         <Grid.ColumnDefinitions>

           <ColumnDefinition Width="50*"/>

           <ColumnDefinition Width="50*"/>

         </Grid.ColumnDefinitions>

         <Grid.RowDefinitions>

           <RowDefinition Height="50*"/>

           <RowDefinition Height="50*"/>

         </Grid.RowDefinitions>

4. The last part is inserting a Canvas object on top of the Grid. On this objet we will draw our beloved function. Notice that I’m using a transformation to flip the content of the Canvas. The reason that while Y axis behaves the opposite from the Y axis of the screen meaning when values increases Graph Y Axis is going up and Screen Y axis is going down, this small manipulation saves some trouble.

           <Canvas x:Name="Canvas" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="2" RenderTransformOrigin="0.5,0.5">

             <Canvas.RenderTransform>

               <TransformGroup>

                 <ScaleTransform ScaleY="-1"/>

               </TransformGroup>

             </Canvas.RenderTransform>

           </Canvas>

Now we are ready for Part 2. Which we will discuss the interesting part, the code behind.

Stay Tuned.

Ariel