MainWindow.xaml

<Window x:Class="interfacebased.MainWindow"
        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:Nulltovisconverter="clr-namespace:nulltovisconverter;assembly=nulltovisconverter"
        xmlns:Interfacebased="clr-namespace:interfacebased"
        mc:Ignorable="d"
        Title="MainWindow"
        Width="1024"
        Height="768"
        WindowStartupLocation="CenterScreen"
        d:DataContext="{d:DesignInstance Interfacebased:MainViewModel}" >
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- Other resource dictionaries -->
                <ResourceDictionary Source="HairColorCounting/HairColorCountingView.xaml" />
                <ResourceDictionary Source="FriendsList/FriendsListView.xaml" />
                <ResourceDictionary Source="FriendDetail/FriendDetailView.xaml" />
                <!-- This resource dictionary -->
                <ResourceDictionary>
                    <!-- The border brush -->
                    <Brush x:Key="BorderBrush" >Gray</Brush>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!-- Hair counting part -->
        <Border Grid.Row="0"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Padding="5"
                BorderBrush="{StaticResource BorderBrush}"
                BorderThickness="2" >
            <ContentControl Content="{Binding HairCountingViewModel}"
                            ContentTemplate="{StaticResource HairCountingDataTemplate}" />
        </Border>
        <!-- Friends Master View -->
        <Border Grid.Row="1"
                Grid.Column="0"
                Padding="5"
                BorderBrush="{StaticResource BorderBrush}"
                BorderThickness="2,0,2,2" >
            <ContentControl Content="{Binding FriendsViewModel}"
                            ContentTemplate="{StaticResource FriendsListDataTemplate}" />

        </Border>
        <!-- Friend Detail View -->
        <Border Grid.Row="1"
                Grid.Column="1"
                Padding="5"
                BorderBrush="{StaticResource BorderBrush}"
                BorderThickness="0,0,2,2" >
            <ContentControl Content="{Binding FriendsViewModel.SelectedFriend}"
                            Visibility="{Binding FriendsViewModel.SelectedFriend, 
                            Converter={Nulltovisconverter:NullToVisibilityConverter Inverted=True}}"
                            ContentTemplate="{StaticResource FriendDetailViewDataTemplate}" />
        </Border>
    </Grid>
</Window>