<UserControl
    x:Class="MasterDetailsWithRIAServices.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:my="clr-namespace:MasterDetailsWithRIAServices"
    xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Ria"
    xmlns:services="clr-namespace:MasterDetailsWithRIAServices.Web.Services"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="700"
    d:DesignHeight="480"
    d:DesignWidth="640"
    mc:Ignorable="d">
	<Grid x:Name="LayoutRoot">
		<Grid.Resources>

			<!--This is the magic converter. It will take the ArtistId and
			create a DomainDataSource to asynchronously retrieve all 
			albums for the given ArtistId.-->
			<my:ArtistIdToAlbumCollectionConverter x:Key="ArtistIdToAlbumCollectionConverter"/>

			<!-- RowDetailsTemplate containing the details (albums) grid. -->
			<DataTemplate x:Key="AlbumsTemplate">
				<Grid Width="500" HorizontalAlignment="Left" Margin="24,2,2,2">
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto"/>
						<RowDefinition/>
					</Grid.RowDefinitions>
					<TextBlock Grid.Row="0" Margin="2">Albums:
					</TextBlock>
					<!--Bind the albums grid to the ArtistId and let the converter 
					return all albums asynchronously. -->
					<telerik:RadGridView
                        Name="albumsGrid"
						ItemsSource="{Binding ArtistId, Converter={StaticResource ArtistIdToAlbumCollectionConverter}}"
                        Grid.Row="1"
                        Margin="2"
                        AutoGenerateColumns="False"
                        ColumnWidth="*"
                        ShowGroupPanel="False">
						<telerik:RadGridView.Columns>
							<telerik:GridViewDataColumn Header="Album Title" 
														DataMemberBinding="{Binding Title}"/>
						</telerik:RadGridView.Columns>
					</telerik:RadGridView>
				</Grid>
			</DataTemplate>
		</Grid.Resources>

		<!-- This is where the master (artists) grid gets its data from. -->
		<riaControls:DomainDataSource x:Name="artistsDataSource" 
									  AutoLoad="True" 
									  QueryName="GetArtistsQuery">
			<riaControls:DomainDataSource.DomainContext>
				<services:ChinookContext/>
			</riaControls:DomainDataSource.DomainContext>
		</riaControls:DomainDataSource>

		<telerik:RadGridView
            Name="artistsGrid"
            ItemsSource="{Binding ElementName=artistsDataSource, Path=Data}"
            IsBusy="{Binding ElementName=artistsDataSource, Path=IsBusy}"
			RowDetailsTemplate="{StaticResource AlbumsTemplate}"
            ColumnWidth="*"
			AutoGenerateColumns="False"
			ShowGroupPanel="False">
			<telerik:RadGridView.Columns>
				<telerik:GridViewToggleRowDetailsColumn/>
				<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Header="Artist"/>
			</telerik:RadGridView.Columns>
		</telerik:RadGridView>
	</Grid>
</UserControl>