ISerialized .Net, C#, Scrum and agile software development

Worth to notice:

• We change the Number property to NumberStr
• We add new int property named Number
• We change the content of the CanSquareIt method to test if the value NumberStr is a valid int
• We initialize the Number property to eg. 5 at startup
• And we now send the value of Number to the EventAggregator

You might also have noticed that we call the NotifyOfPropertyChanged on CanSquareIt on each change. The following flow can now be seen on invalid input:

1. The user inputs a literal in the text box
2. The View is binded to the ViewModel so the NumberStr property's setter is called with the litteral
3. The setter populates the NumberStr with the new value
4. It notifies that it has changed
5. It notifies that the CanSquareIt must execute
6. CanSquareIt will parse, find a problem and return false
7. The SquareIt button will automatically be disabled as the CanSquareIt returne false (Notice: My example code here will not enable the view and SquareIt button again)

The CaliburnCalculator will now work as before, but I want a user control containing a slider to use the same ViewModel, namely my NumberInputViewModel. I therefore create a new user control called NIV2 which only contains a slider. The user control called NIV2 will have the following XAML:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ApplicationModel="clr-namespace:Caliburn.PresentationFramework.ApplicationModel;assembly=Caliburn.PresentationFramework" x:Class="CaliburnCalculator.Views.NIV2"
    mc:Ignorable="d" MinHeight="109" Width="511">
    <StackPanel>
        <Slider Minimum="0" Maximum="100" Interval="1" Name="SquareIt" VerticalAlignment="Center" Value="{Binding Number}"  />
        <ContentControl ApplicationModel:View.Context="Ctx1"
                        ApplicationModel:View.Model="{Binding}" />
    </StackPanel>
</UserControl>

A couple of things to notice here: I have defined a ContentControl with ApplicationModel:View.Context and ApplicaiontModel:View.Model where I create a Context called Ctx1 which defined the Context to use. Also notice that the sliders name is SquareIt, meaning it will call the SquareIt method directly every time we change it's value, and hence the square will be calculated instantly!

Right now our two Views are correctly designed, but theViewModel need some new attributes to startup both Views when loaded:

[Singleton(typeof(INumberInputViewModel))]
[View(typeof(NIV2), Context = "Ctx2")]
[View(typeof(NumberInputView), Context = "Ctx1")]

Here we say that we use two Views for this ViewModel, each with their own Context defined. We also change the super class to MultiPresenter.

We now only have one more step to do, to start using the new application. We have to change our ShellView to use the new Context defined, as well as change the size of our ShellView:

<Window x:Class="CaliburnCalculator.Views.ShellView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cal="clr-namespace:Caliburn.PresentationFramework.ApplicationModel;assembly=Caliburn.PresentationFramework"
    Title="ShellView" Height="248" Width="561">
    <Grid>
        <StackPanel Name="LayoutRoot" Background="LightGray" >
            <ItemsControl ItemsSource="{Binding Presenters}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ContentControl cal:View.Context="Ctx2"
                                        cal:View.Model="{Binding}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </Grid>
</Window>

Notice that the ContentControl is very similar to our old version, the only difference is that we now set Context property to Ctx2. When you now fire up your new application it should look something like this:

Updating the text box automatically updates the slider, and updating the slider automatically updates the text box and the calculated square. A (very) simplified MVVM example with two Views connected to one ViewModel.