Silverlight Simple Master详细信息绑定

时间:2013-05-15 22:39:30

标签: silverlight datagrid

我认为这是一个非常简单的问题,但由于某种原因,答案正在逃避我。我在Silverlight中创建一个简单的Master / Detail DataGrid。 Web上的大多数示例通过创建具有某种Collection的对象并将Detail网格绑定到集合来显示此内容。在我的例子中,我只想将细节网格绑定到与作为主服务器的行相同的对象。我知道我的示例代码很简单,但我只是想尝试创建最简单的演示来重新创建它。话虽如此,让我说我有这些数据:

public class Customer
{
    public int CustomerId { get; set; }
    public string CustomerName { get; set; }
    public string FavoriteColor { get; set; }
}

public class CustomerCollection : ObservableCollection<Customer>
{
    public CustomerCollection()
    {
        Add(new Customer() { CustomerId = 101, CustomerName = "Todd", FavoriteColor = "Red" });
        Add(new Customer() { CustomerId = 102, CustomerName = "Melissa", FavoriteColor = "White" });
        Add(new Customer() { CustomerId = 102, CustomerName = "Alicia", FavoriteColor = "Blue" });
        Add(new Customer() { CustomerId = 104, CustomerName = "Matthew", FavoriteColor = "Yellow" });
    }
}

行。非常简单。现在,我将把这个集合绑定到一个datagrid。每行应显示CustomerId和CustomerName。当您单击该行时,我想在详细信息数据网格中显示他们喜欢的颜色。

所以问题是...... 如何绑定详细信息网格以显示收藏夹颜色?或者换句话说,如何将父行绑定为我的数据源?

<UserControl x:Class="Sample.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="419" d:DesignWidth="742" 
             xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
            xmlns:src="clr-namespace:Sample">

    <UserControl.Resources>
        <src:CustomerCollection x:Key="CustDs"></src:CustomerCollection>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource CustDs}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="56*" />
            <RowDefinition Height="363*" />
        </Grid.RowDefinitions>
        <TextBlock Name="TextBlock1" Text="Customer Information" FontSize="28" TextAlignment="Center" />
        <sdk:DataGrid AutoGenerateColumns="False" Grid.Row="1"
                      Height="301" HorizontalAlignment="Left" Margin="30,22,0,0"
                      Name="DgCust" VerticalAlignment="Top" Width="681" ItemsSource="{Binding}"
                       HeadersVisibility="All" ColumnWidth="*">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Header="Customer Id" Binding="{Binding CustomerId}"></sdk:DataGridTextColumn>
                <sdk:DataGridTextColumn Header="Customer Name" Binding="{Binding CustomerName}"></sdk:DataGridTextColumn>
            </sdk:DataGrid.Columns>
            <sdk:DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <sdk:DataGrid Height="200" Width="600" AutoGenerateColumns="False" ColumnWidth="*" 
                                  ItemsSource="{Binding}">
                        <sdk:DataGrid.Columns>
                            <sdk:DataGridTextColumn Header="Favorite Color" Binding="{Binding}"></sdk:DataGridTextColumn>
                        </sdk:DataGrid.Columns>
                    </sdk:DataGrid>
                </DataTemplate>
            </sdk:DataGrid.RowDetailsTemplate>
        </sdk:DataGrid>
    </Grid>
</UserControl>

1 个答案:

答案 0 :(得分:1)

您的数据不代表主/细节方案。如果您只想在详细信息区域中显示喜欢的颜色,请在DataTemplate部分中执行此操作:

            <sdk:DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding FavoriteColor}" />
            </DataTemplate>
        </sdk:DataGrid.RowDetailsTemplate>

如果你真的想要主人/细节,那就试试吧:

    public class Customer
{
    public int CustomerId { get; set; }
    public string CustomerName { get; set; }
    public string FavoriteColor { get; set; }
    public List<FavoriteShow> Shows { get; set; }
}

public class FavoriteShow
{
    public string Name {get;set;}
    public int Stars {get;set;}
}

public class CustomerCollection : ObservableCollection<Customer>
{
    public CustomerCollection()
    {
        List<FavoriteShow> showList1 = new List<FavoriteShow>();
        showList1.Add(new FavoriteShow { Name="Bugs Bunny", Stars = 4});
        showList1.Add(new FavoriteShow { Name="Superman", Stars=2});
        showList1.Add(new FavoriteShow { Name="A-Team", Stars=3});

        List<FavoriteShow> showList2 = new List<FavoriteShow>();
        showList2.Add(new FavoriteShow { Name = "Dallas", Stars = 1 });
        showList2.Add(new FavoriteShow { Name = "Loony Tunes", Stars = 3 });

        Add(new Customer() { CustomerId = 101, CustomerName = "Todd", FavoriteColor = "Red", Shows = showList1 });
        Add(new Customer() { CustomerId = 102, CustomerName = "Melissa", FavoriteColor = "White" });
        Add(new Customer() { CustomerId = 102, CustomerName = "Alicia", FavoriteColor = "Blue", Shows = showList2 });
        Add(new Customer() { CustomerId = 104, CustomerName = "Matthew", FavoriteColor = "Yellow" });
    }
}

和XAML:

<UserControl x:Class="Sample.MainPage"
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"
mc:Ignorable="d"
         d:DesignHeight="419"
         d:DesignWidth="742"
         xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
         xmlns:src="clr-namespace:Sample">

<UserControl.Resources>
    <src:CustomerCollection x:Key="CustDs"></src:CustomerCollection>
</UserControl.Resources>

<Grid x:Name="LayoutRoot"
      Background="White"
      DataContext="{Binding Source={StaticResource CustDs}}">
    <Grid.RowDefinitions>
        <RowDefinition Height="56*" />
        <RowDefinition Height="363*" />
    </Grid.RowDefinitions>
    <TextBlock Name="TextBlock1"
               Text="Customer Information"
               FontSize="28"
               TextAlignment="Center" />
    <sdk:DataGrid AutoGenerateColumns="False"
                  Grid.Row="1"
                  Height="301"
                  HorizontalAlignment="Left"
                  Margin="30,22,0,0"
                  Name="DgCust"
                  VerticalAlignment="Top"
                  Width="681"
                  ItemsSource="{Binding}"
                  HeadersVisibility="All"
                  ColumnWidth="*">
        <sdk:DataGrid.Columns>
            <sdk:DataGridTextColumn Header="Customer Id"
                                    Binding="{Binding CustomerId}"></sdk:DataGridTextColumn>
            <sdk:DataGridTextColumn Header="Customer Name"
                                    Binding="{Binding CustomerName}"></sdk:DataGridTextColumn>
        </sdk:DataGrid.Columns>
        <sdk:DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding FavoriteColor}" />
                    <sdk:DataGrid ItemsSource="{Binding Shows}" />
                </StackPanel>
            </DataTemplate>
        </sdk:DataGrid.RowDetailsTemplate>
    </sdk:DataGrid>
</Grid>