Silverlight 4 中带有组合框/数据网格的简单主/细节场景答案

【问题标题】：Simple Master/Detail scenario with combobox/datagrid in Silverlight 4Silverlight 4 中带有组合框/数据网格的简单主/细节场景
【发布时间】：2011-02-18 21:59:28
【问题描述】：

我正在构建一系列管理表单作为我的应用程序的一部分。

许多表单都有相同的场景，我想知道管理这种情况的最佳方法是什么......

Here's a screenshot of an example from the old winforms app. 并非所有表格都这么简单，但我认为这是一个很好的起点。

第一个字段始终是组合框。用户选择一个项目后，其他字段将填充相关数据。

目前，我的 ViewModel 包含一个 ObservableCollection<circuit>（对于本示例）。我不确定如何设置我的绑定，因为您的主（主组合框）也是您的详细信息（CircuitName 字段）的一部分的主/详细情况。我正在考虑拉出组合框，然后在选择一个项目后显示一个数据网格。有没有更好的办法？如果我确实走这条路，我已经阅读了一些文章，这些文章表明在数据网格内绑定一个组合框，而属性绑定 selectedValue 道具是一个总的 PITA。显然，用户需要一个组合框来创建/编辑现有的 CircuitName...

你的想法？

【问题讨论】：

标签： silverlight

【解决方案1】：

我不确定我是否完全理解，但如果我使用的是 MVVM Light，就像我认为的那样：) 我想复制上面的屏幕，我会做这样的事情。但我可能不是 100% 理解你的意思。

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <StackPanel Grid.ColumnSpan="2">
        <TextBlock Text="Circuit Name"/>
        <ComboBox SelectedValue="{Binding SelectedCircuit,Mode=TwoWay}" ItemsSource="{Binding Circuits}" DisplayMemberPath="Name"/>

    </StackPanel>

    <StackPanel Grid.Column="0" Grid.Row="1">
        <TextBlock Text="Circuit Code"/>
        <TextBlock Text="{Binding SelectedCircuit.Code}"/>
    </StackPanel>

    <StackPanel Grid.Column="1" Grid.Row="1">
        <TextBlock Text="Voltage"/>
        <TextBlock Text="{Binding SelectedCircuit.Voltage}"/>
    </StackPanel>

    <Button Grid.Row="2" Content="Okay"></Button>
    <Button Grid.Row="2" Grid.Column="1" Content="Cancel"></Button>

</Grid>

使用 System.Collections.ObjectModel；使用 GalaSoft.MvvmLight；使用 MvvmLight1.Model;

命名空间 MvvmLight1.ViewModel {

public class MainViewModel : ViewModelBase
{

    public MainViewModel()
    {

        Circuits = new ObservableCollection<Circuit>
                       {
                           new Circuit {Code = "123123", Name = "Test1", Voltage = 2.2, Id = 1},
                           new Circuit {Code = "14224", Name = "Test2", Voltage = 3.2, Id = 2},
                           new Circuit {Code = "54234", Name = "Test3", Voltage = 4.2, Id = 3},
                       };

    }

    public ObservableCollection<Circuit> Circuits { get; set; }

    private Circuit _selectedCircuit;
    public Circuit SelectedCircuit
    {
        get { return _selectedCircuit; }
        set { _selectedCircuit = value;
        RaisePropertyChanged("SelectedCircuit");
        }
    }
}

}

命名空间 MvvmLight1.Model {

public class Circuit
{
    public int Id { get; set; }

    public string Name { get; set; }

    public string Code { get; set; }

    public double Voltage { get; set; }

}

}

【讨论】：

虽然我自己找到了答案（而且它和你的完全一样，除了我们的数据填充方式有明显的不同！），我会把它给你，因为你投入了这么多努力:) 谢谢。

【解决方案2】：

其实答案很简单。

我的ObservableCollection<Circuit> Circuits 已加载到 VM 构造函数中。我创建了一个ObservableCollection<Circuit> SelectedCircuit。我的 xaml 然后看起来像这样：

<ComboBox ItemsSource="{Binding Configs}"
          SelectedValue="{Binding SelectedConfig, Mode=TwoWay}"
          DisplayMemberPath="SwitchCode"
                 />
<toolkit:DataForm CurrentItem="{Binding SelectedConfig}" AutoEdit="False"  />

【讨论】：