3 questions to ask every week

Relating to career goals, self-improvement, life goals – we should have an answer to these questions:

-> What happened?

-> What’s missing?

-> What’s next?”

We should keep looking until we have an answer.

WPF Deep Dive: Binding

Let’s dive today into WPF binding.

Binding literally means a link or connection between two objects. In WinForms world, binding usually meant fetching data from a database, filling up the DataSet objects and then binding them with the data grid on the visual layer. Although there was the possibility of binding the UI layer to custom business objects – there was little support from the framework to achieve this. We can’t say it was totally absent, because the interface we use in .NET 3.5/4.0 for binding – INotifyPropertyChanged (in System.ComponentModel namespace) has been available since .NET framework 2.0.

Binding in real world:

Let us begin with wiping out WinForms from our minds. If we want to develop a banking application with the UI given above, what comes to your mind? With our background in OOPS we would start thinking in objects (or if you are designer you would start with selecting a better color for the text :-). Objects we think are a Customer with all properties like name, account no., balance etc.; a Bank object with bank name, a web service to fetch/update customer details.

TO DO for WPF exam

Projects:
- data binding to a collection in listbox [DONE]
    : use data  template [DONE]
- binding to DataGrid [DONE]
- binding to TreeView (hierarchical data) [DONE]
- CollectionViewSource examples
- implement class using INotifyPropertyChanged interface  [DONE]
- implement one using Dependency properties
- create simple notepad-like project to test out Commands like open, save, cut etc.
- create your own custom command, where do you use commands, under what scenarios?  [DONE]
- create control using ControlTemplate
- create a user control  [DONE]
- create custom control
- animation
- WPF test strategy (ButtonPeer etc.)
- using Intelli trace
- ClickOnce deployment test
- WPF Visualizer
- WebBrowser control to show web content, also you can use Frame control
- Calendar control
- MVVM sample  [DONE]

-> If time:
- 3D, 2D

WPF: Inheriting Window class

Problem: I am building a dash-board kind of application. Idea is we have a main window displaying various buttons which represent a ‘module’. On clicking these buttons we show a separate window. Now these ‘module’ windows can be closed, but if we invoke them again from the dash-board window we should re-use the Window object.

To solve the problem of showing the same Window object each time it is invoked we save the Window object in a list, and override the Close behavior.

Solution: We create custom Window class and override the Closing method, so that Close is not called and we could reuse this object.

Implementation:
1> Create a custom class, let’s name it WindowBase.

Add the namespace “System.Windows”, inherit the class from Window:

    public class WindowBase : Window

    {

        protected override void OnClosing(System.ComponentModel.CancelEventArgs e)

        {

            e.Cancel = true;

            base.OnClosing(e);

        }

    }

Since we want to change the Closing behavior we override the OnClosing() method and set the e.Cancel = true. 

Now we will use WindowBase class to create all the “module” windows.

2> Create a new Window using WindowBase class. 

We add a new Window to the project, by right-clicking project and selecting Window. 
By default we will get the following XAML code in the newly added Window:

<Window x:Class="InheritWindow.Window1"

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

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

        Title="Window1" Height="300" Width="300">

    <Grid>

    </Grid>

</Window>

Now since we are going to use a new class we need to define its namespace so that XAML can understand it.

So we:

> add:  xmlns:w="clr-namespace:InheritWindow"
> replace “Window” with “w:WindowBase”
> remove the inheritance from “Window1” class defined in in Window1.xaml.cs (We could change this to WindowBase but it is not necessary, as the inheritance hierarchy is set by XAML, where we are using <w:WindowBase>.)

And we are done! 

So the Window1 XAML looks like this:

<w:WindowBase x:Class="InheritWindow.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:w="clr-namespace:InheritWindow"
        Title="Window1" Height="300" Width="300">
    <Grid>

    </Grid>
</w:WindowBase>
And for completeness here is Window1.xaml.cs:

namespace InheritWindow
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1
    {
        public Window1()
        {
            InitializeComponent();
        }
    }
}

Quickest way to generate OutOfMemory exception

One of the quickest way (I am sure there are many) to reproduce an OutOfMem exception in .NET:

1> Drag a textbox on WPF window

2> In XAML, set TextChanged event on the added text box

3> In the TextChanged event, write a line which sets a text on the same textbox which generates this event
for .e.g txtCheckException.Text = “something”;

4> Run the application and enter a keystroke in the textbox.

The event would raised again and again, and very soon (well seconds) you will get the OutOfMemory exception.

Resources for UI Patterns

UI Patterns from Infragistics (built in Silverlight):
http://quince.infragistics.com/#/Main

General UI pattern web site targeted to web developers:
http://www.smashingmagazine.com/

Windows User Experience Interaction Guidelines:
http://msdn.microsoft.com/en-us/library/aa511258.aspx

Expression gallery:
http://gallery.expression.microsoft.com/

WPF: Interesting UI

<Window x:Class="StartWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Background="Black" Foreground="White"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="400" Width="525" FontFamily="Verdana" FontSize="13">
    <Grid>
        <Image Width="300" Height="300">
            <Image.Source>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <GeometryDrawing Brush="Orange">
                            <GeometryDrawing.Pen>
                                <Pen Brush="Red" Thickness="5" />
                            </GeometryDrawing.Pen>
                            <GeometryDrawing.Geometry>
                                <EllipseGeometry RadiusX="1000" RadiusY="10" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Image.Source>
        </Image>
    </Grid>
</Window>

XML: Find out node which doesn’t have a given attribute

Question: Find out a node which doesn't have a given attribute.
For e.g., in the given xml, get the third Child node which doesn’t have the attribute ‘name’.

<?xml version="1.0" encoding="UTF-8"?>
<Children>
	<Child name='A' />
	<Child name='B' />
	<Child />
	<Child age='30'/>
</Children>

XPath to find nodes without ‘name’ attribute
/Children/Child[not(@name)]

XPath to find nodes without ‘name’ and ‘age’ attribute
/Children/Child[not (@name) and not(@age)]

Color theme web site

Site showing various color themes:

http://kuler.adobe.com/#themes/mostpopular?time=30

WPF Study – so it begins. Target 26th August!

- Read this article: http://karlshifflett.wordpress.com/2010/02/07/bbq-shack-ocean-v2-for-visual-studio-2008/

- Watch this video: http://www.dnrtv.com/default.aspx?showNum=115

- http://herdingcode.com/?p=148

- Prism: http://compositewpf.codeplex.com/

- http://reedcopsey.com/series/windows-forms-to-mvvm/

- MVVM: http://channel9.msdn.com/events/MIX/MIX10/EX14

- Apps to check out:

- http://www.hanselman.com/blog/IntroducingBabySmashAWPFExperiment.aspx

- http://stackoverflow.com/questions/534328/good-example-wpf-applications

http://stackoverflow.com/questions/2541484/learning-wpf-and-mvvm-best-approach-for-learning-from-scratch

Test post to test insert code plugins

-> Paste from Visual Studio

<UI Id='RxCPWix_UIMondo'>
    <UIRef Id="WixUI_Mondo" />
    <UIRef Id="WixUI_ErrorProgressText" />

    <DialogRef Id="ConnectionPortsDlg" />
    <DialogRef Id="FileModeMSMQInfoDlg" />

    <Publish Dialog="WelcomeDlg" Control="Next" Event="NewDialog" Value="ConnectionPortsDlg"  Order="3">1</Publish>
    <Publish Dialog="SetupTypeDlg" Control="Back" Event="NewDialog" Value="DBConfigurationDlg">1</Publish>
</UI>

<UI Id='RxCPWix_UIMondo'>
    <UIRef Id="WixUI_Mondo" />
    <UIRef Id="WixUI_ErrorProgressText" />

    <DialogRef Id="ConnectionPortsDlg" />
    <DialogRef Id="FileModeMSMQInfoDlg" />

    <Publish Dialog="WelcomeDlg" Control="Next" Event="NewDialog" Value="ConnectionPortsDlg"  Order="3">1</Publish>
    <Publish Dialog="SetupTypeDlg" Control="Back" Event="NewDialog" Value="DBConfigurationDlg">1</Publish>
</UI>

<UI Id='RxCPWix_UIMondo'>
	<UIRef Id="WixUI_Mondo" />
	<UIRef Id="WixUI_ErrorProgressText" />
	<DialogRef Id="ConnectionPortsDlg" />
	<DialogRef Id="FileModeMSMQInfoDlg" />
	<Publish Dialog="WelcomeDlg" Control="Next" Event="NewDialog" Value="ConnectionPortsDlg"  Order="3">1</Publish>
	<Publish Dialog="SetupTypeDlg" Control="Back" Event="NewDialog" Value="DBConfigurationDlg">1</Publish>
</UI>

Wix: How to hide the License Agreement dialog in Mondo UI

We are using the WixUI_Mondo in our setup so that we could allow the users to select/de-select features. However the app is installed on intranets so we did not want to show the License Agreement dialog box. A few pp. suggested downloading the Wix source code and manually changing the part which shows up the LA dialog box.

I found out that we could also, change the click event action of Next and Back button controls using Publish tag.

So we changed the Next button click event action of the ‘Welcome dialog’ (WelcomeDlg) to show directly the second dialog box. For .e.g:

<Publish Dialog="WelcomeDlg" Control="Next" Event="NewDialog" Value="ConnectionPortsDlg"  Order="3">1</Publish>


And of course also the Back button event action to display the ‘Welcome dialog’. 

The full <UI> tag code:

<UI Id='MyAppWix_UIMondo'>
	<UIRef Id="WixUI_Mondo" />
	<UIRef Id="WixUI_ErrorProgressText" />
	<DialogRef Id="ConnectionPortsDlg" />
	<DialogRef Id="FileModeMSMQInfoDlg" />
	<Publish Dialog="WelcomeDlg" Control="Next" Event="NewDialog" Value="ConnectionPortsDlg"  Order="3">1</Publish>
	<Publish Dialog="SetupTypeDlg" Control="Back" Event="NewDialog" Value="DBConfigurationDlg">1</Publish>
</UI>

If you are not using custom dialogs, here is the string:

<UI Id='Mondo'>
     <UIRef Id="WixUI_Mondo" />
     <UIRef Id="WixUI_ErrorProgressText" />
     <Publish Dialog="WelcomeDlg" Control="Next" Event="NewDialog" Value="SetupTypeDlg" Order="3">1</Publish>
     <Publish Dialog="SetupTypeDlg" Control="Back" Event="NewDialog" Value="WelcomeDlg" Order="3">1</Publish>		
</UI>				

Happy Wix coding!