Creating the views (windows)

In this step we will create the windows for the application. In the previous step we already created the user controls. Windows are a great way to show in an edit-context. Catel provides great edit-windows in the form of the DataWindow. This is a window that automatically adds OK and Cancel buttons (but of course allows customization of the buttons and behavior).

Person window

It is very important that the window derives from one of the Catel windows. This is required to make the binding system work (same as UserControl). Make sure that the window definition in the xaml is either catel:Window or catel:DataWindow

To add a new DataWindow, right-click the Views folder in the solution => Add => New item… => On-line => and search for Catel as you can see in the screen below:

Give the new view the name PersonWindow. The view will be added to the Views folder.

Note that we can use the PersonViewModel for both the PersonView (user control) and PersonWindow. Both views represent the same models and view models, just a different context. To make sure that the IUIVisualizerService knows what view to pick first, register the PersonWindow in the IUIVisualizerService at application startup:

var uiVisualizerService = serviceLocator.ResolveType<IUIVisualizerService>();
uiVisualizerService.Register(typeof(PersonViewModel), typeof(PersonWindow));

The template will also create a constructor to inject a view model into the window. Please make sure that the constructor takes a view model of the type PersonViewModel instead of the generated PersonWindowModel. Then replace the content of the view with the xaml below:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Grid.Column="0" Content="First name" />
    <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding FirstName, ValidatesOnDataErrors=True, NotifyOnValidationError=True}" />

    <Label Grid.Row="1" Grid.Column="0" Content="Last name" />
    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding LastName, ValidatesOnDataErrors=True, NotifyOnValidationError=True}" />
</Grid>

Family window

The FamilyWindow is a bit different because we want additional logic in this window. We want to create add / edit / remove buttons for the family members. Therefore we need to create a separate view model which contains this logic. 

Creating the FamilyWindowViewModel

Since the FamilyWindowViewModel will look a lot like the FamilyViewModel, just copy/paste the FamilyViewModel and rename the copy to FamilyWindowViewModel.

Note that the FamilyWindowViewModel needs additional logic, but that will be handled in the next part of this getting started guide

Creating the FamilyWindow

Once the FamilyWindowViewModel is created, the FamilyWindow must be created exactly the same way as the PersonWindow. Again make sure to use the right view model (FamilyWindowViewModel) in the constructor of the window in the code-behind. Then use the following xaml:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Grid.Column="1" Content="Family name" />
    <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding FamilyName, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" />

    <Label Grid.Row="1" Grid.ColumnSpan="2" Content="Persons" />

    <Grid Grid.Row="2" Grid.ColumnSpan="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <ListBox Grid.Column="0" ItemsSource="{Binding Persons}" SelectedItem="{Binding SelectedPerson}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <views:PersonView DataContext="{Binding}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
            
        <StackPanel Grid.Column="1">
            <Button Command="{Binding AddPerson}" Content="Add..." />
            <Button Command="{Binding EditPerson}" Content="Edit..." />
            <Button Command="{Binding RemovePerson}" Content="Remove" />
        </StackPanel>
    </Grid>
</Grid>

Up next

Hooking up everything together


Contributions

We would like to thank the following contributors:

Want to contribute to the documentation? We have a guide for that!


Questions

Have a question about Catel? Use StackOverflow with the Catel tag!