<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Client-side transactions" Height="500" Width="750" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="220"/>
            <ColumnDefinition Width="4"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <!-- Left pane with lists of cities and customers. -->
        <DockPanel>
            <!-- A combo box showing cities. -->
            <DockPanel DockPanel.Dock="Top" Margin="4">
                <TextBlock DockPanel.Dock="Left" Text="City: " VerticalAlignment="Center"/>
                <ComboBox x:Name="comboCity" DisplayMemberPath="City"/>
            </DockPanel>

            <!-- A list of customers of the selected city. -->
            <StackPanel>
                <TextBlock Padding="0,4,0,4">Double-click a customer to edit orders:</TextBlock>
                <ListBox ItemsSource="{Binding SelectedItem.Customers, ElementName=comboCity}" x:Name="listCustomers" DisplayMemberPath="ContactName" MouseDoubleClick="listCustomers_MouseDoubleClick" BorderThickness="0" />
            </StackPanel>

        </DockPanel>

        <GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

        <!-- Pages in this tab control allow editing the customers. -->
        <TabControl x:Name="tabs" Grid.Column="2"/>
    </Grid>
</Window>
