Silverlight 4中使用combobox / datagrid的简单主/细节场景

时间:2011-02-18 21:59:28

标签: silverlight

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

许多表单都有相同的场景,我想知道管理它的最佳方法是什么......

Here's a screenshot of an example from the old winforms app.并非所有形式都如此简单,但我认为这是一个很好的起点。

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

目前,我的ViewModel包含ObservableCollection<circuit>(本例)。我不确定如何设置我的绑定,给定主/详细信息场景,其中主(主组合框)也是您的细节(CircuitName字段)的一部分。我想把组合框拉出来,在选择一个项目后,显示一个数据网格。有没有更好的办法?如果我这样做了,我已经阅读了一些文章,指出将数据块绑定到数据网格中,而绑定selectedValue prop的属性是一个总PITA。显然,用户需要使用组合框来创建/编辑现有的CircuitName ...

你的想法?

2 个答案:

答案 0 :(得分: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; }

}

}

答案 1 :(得分:0)

答案其实很简单。

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

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