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

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.

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.

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!


Discussion